Skip to content

AppRun Site

AppRun-Site let you focus on creating web pages using HTML, markdown, AppRun components, and web components. AppRun-Site will take care of the rest:

  • It compiles your pages to ES Modules
  • It runs your pages run as Single Page Applications (SPA)
  • It can render your pages using Server-Side Rendering (SSR)
  • It can also generate a static website

Create AppRun Site

You can initialize a project using the npm create apprun-app command and select the AppRun Site template.

npm init apprun-app [my-app]

AppRun Site Architecture

An AppRun-Site project has the following structure:

/pages              <- pages of the website
  /index.html       <- index page
  /index.md         <- home page
  /main.tsx         <- start up code
  /about
    index.md        <- about page, markdown
  /contact
    contact.tsx     <- contact page, AppRun component

Then, you can use:

  • npm start or npm run dev to start the dev server and watch your code changes.

The application will run at http://localhost:8080.

Add Pages

You can add AppRun components, class or functional (tsx/jsx files), markdown, or html files to the pages directory.

Example of an AppRun class component page: 

import { app, Component } from 'apprun';
export default class ContactComponent extends Component {
  state = '...';
  view = state => <div>
    <h2>{state}</h2>
    <p>This is a class Component</p>
  </div>;
}

Example of an AppRun functional component page:

import app from 'apprun';
export default () => <>
  <h2>...</h2>
  <p>This is a functional Component</p>
</>

Example of a markdown page:

# Hello Web Component
This is a markdown page with a web component to display a comic from XKCD
<ws-comic></ws-comic>

Example of an html page:

<h2>Page</h2>
<div>This is an HTML page</div>

All the pages will be compiled into the ES modules in the public directory when you build the site.

Next, you will learn how to build your site.