AppRun-Site Client-Side Rendering

The AppRun-Site build command creates pages as ES modules that can be loaded dynamically. The AppRun-Site build command injects the client-side code into the main.js file for routing and loading the pages. To conclude, AppRun Sites are Single Page Applications (SPA).

App Startup

If you have a startup code, you can add it to the main.tsx file. The AppRun-Site build command injects calls to the default exported function of the main.tsx file.

/pages              <- pages of the website
  /main.tsx         <- startup code

Example of a markdown page:

import app from 'apprun';
import Layout from '../components/layout'
import Comic from '../components/comic';

export default () => {
  app.webComponent('ws-comic', Comic);        // register web component
  app.render(document.body, <Layout />);      // render site layout
}

No-Code Routing

You don't need to write any code to route an URL to a component. When users visit an URL, the client-side code will load, route, and render the page dynamically.

E.g., when the URL in the browser address bar becomes http://.../contact, it triggers the /contact event. The Contact component reacts to the /contact and renders itself to the screen.

The event handler for the /contact event is also injected. Therefore, there is no need to code for routing.

Routing Parameters

However, if you want to pass parameters to the component through the URL, you can create your event handler. For example:

import { app, Component } from 'apprun';
export default class extends Component {
  state = async () => { ... }
  view = state => <div>...</div>;
  update = {
    '/products': async (state, id) => {
      state = await Promise.resolve(state);
      return ({ ...state, id: parseInt(id) })
    }
  };
}

When the URL in the browser address bar becomes http://.../products/1, it triggers the /products event and passes the 1 as the parameter to your event handler.

Pretty Links

AppRun-Site injects code by default to support pretty links (a.k.a. non-hash links), e.g., http://.../products/1. You don't need to write any code to support pretty links. However, you will need a webserver to serve the index.html when the routes don't exist on the server.

The AppRun-Site dev server provides such capability of serving index.html when the routes don't exist.

File-based Routing

AppRun-site also injects code to load the pages on demand as dynamic modules using thw following steps:

• load the index.html
• load the main.js (for the dynamic layout and the start up code)
• load the modules by path to render the pages:

/public
  /                 <- /index.js
  /about            <- /about/index.js
  /contact          <- /contact/index.js

Note: * The main.js should create a layout and a div with the id main-app to render the pages. * The page modules should create a div with the id [page]-app for sub pages. E.g., /docs/index.js should create a div with the id docs-app for its sub pages if any.

The some file-based routing logic runs on the server side for the server-side rendering.

Next, you will see how to use the dev server and how it renders your pages on the server side.