Webformula core
Welcome Getting started Routing Serve / Build Binding variables Web component Fetcher Multiple languages github-circle-black-transparent GitHub github-circle-black-transparent Example app

Getting started

Build a basic web application
Routing
@Webformula/core uses directory based routing. All routes go in a 'routes' folder.
            
      app/
  └── routes/
      ├── index/
      │   └── index.js     # /
      ├── 404/
      │   └── index.js     # /404 (or any url that is not found)
      ├── one/
      │   └── index.js     # one/
      ├── two[id?]/
      │   └── index.js     # two/:id?
      ├── three/
      │   └── [id]/
      │       └── index.js # three/:id
      └── four/
          └── [...all]/
              └── index.js # four/*all (four/a/b/)
            
          
app/routes/index/index.js → /
app/routes/one/index.js → one
app/routes/two[id?]/index.js → two/:id?
app/routes/three/[id]/index.js → three/:id
app/routes/four/[...rest]/index.js → four/*rest
Directory route details
routes/index/index.js Root page (/)
routes/404/index.js Not found page. Auto redirect on non matching routes
index.js Route component file
[id] Directory that represents a url parameter
[id?] Directory that represents an options url parameter
name[id?] Inline url parameter to avoid sub folder
[...rest] Directory that represents catch-all route
[...rest?] Directory that represents optional catch-all route
Page
Accessing url parameters
            
      import { Component } from '@webformula/core';
      import html from './page.html'; // automatically bundles
      
      export default class extends Component {
        static pageTitle = 'Page'; // html page title
        static html = html; // hook up imported html. Supports template literals (${this.someVar})
        
        constructor() {
          super();
        }
        
        connectedCallback() {
          // one[id] one/:id one/value
          console.log(this.urlParameters); // { id: 'value' }
    
          // two[...rest] two/*rest two/a/b
          console.log(this.urlParameters); // { rest: 'a/b' }
        }
      }