Skip to content

AppRun Site

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

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]

Alternatively, you can create a project using the npx apprun-site init command.

npx apprun-site init [my-app]

The init command provides a few more project templates to choose from:

AppRun Site Architecture

An AppRun-Site project has the following structure:

/pages              <- pages of the website
  /index.html       <- index file
  /index.tsx        <- home page
  /main.tsx         <- start up code (registers web component and renders the layout)
  /about
    /index.tsx      <- about page
  /contact
    /index.tsx      <- contact page

The pages are tsx/jsx files (AppRun components) or markdown files:

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>

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.