This is a functional Component
\n;\n```\n\nOr\n\n```tsx\n// pages/[page]/index.tsx -- class component\nimport { app, Component } from 'apprun';\nexport default class extends Component {\n view = () => <>\nThis is a class Component
\n ;\n}\n```\n\nOr markdown files:\n\n```md\n# Hello World\nThis is a markdown file\n```\n\n## How does it work?\n\n### Build\n\nThe `npx apprun-site build` command compiles your code to the `public` folder. It generates the following files:\n\n```\n/pages <- pages of the website\n/public <- static files (genegretd by the build command)\n /index.html <- index page\n /main.js <- start up code\n /about\n /index.js <- about page\n /contact\n /index.js <- contact page\n/server.js <- server code (genegretd for SPA and SSR)\n```\n\n### Static Website\n\nThe `npx apprun-site build --render` command renders your pages to create a static website in the `public` folder.\n\n```\n/public\n /_.html <- /defualt page for SPA\n /index.html <- rendered home page\n /main.js\n /index.js\n /about\n /index.html <- rendered about page\n /index.js\n /contact\n /index.html <- rendered contact page\n /index.js\n/server.js <- server code (genegretd for SPA and SSR)\n```\n\n\nYou can deploy the `public` folder to any static file server.\n\n\n### Serve\n\nYou can run the generated `server.js` file to serve the pages.\n\n```sh\nnode server.js\n```\n\nModify the `server.js` file to fit your needs. The compiler will not overwrite the `server.js` file if it already exists.\n\n\n### File-based Routing\n\nWhen you run `node serve.js`, it starts a server that supports your code run as Single Page Applications (SPA) and supports Server-Side Rendering (SSR).\n\nOn both the client side and the server side, it loads the pages on demand as dynamic modules using thw following steps:\n\n* load the index.html\n* load the main.js (for the dynamic layout and the start up code)\n* load the modules by path to render the pages:\n\n```\n/public\n / <- /index.js\n /about <- /about/index.js\n /contact <- /contact/index.js\n```\n\n> Note:\n> * The main.js should create a layout and a div with the id `main-app` to render the pages.\n> * 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.\n\n\n\n### Server App\n\nIf you add server backend code, you can add an `app` folder with the following structure:\n\n```\n/app <- app folder (backend code)\n /_ <- action folder\n /api <- api folder\n/pages <- pages of the website\n```\n\nThe `build` command will compile the server code to allow the API endpoints and server-side functions.\n\nIf you only want to build the server code, you can use the `--server-only` option:\n\n```sh\nnpx apprun-site build --server-only\n```\n\n### API Endpoints\n\nThe `build` command generated `server.js` can serve API endpoints. You can add your API endpoints in the `api` folder.\n\nThe API endpoints are served at the path `/api/[endpoint]`. For example, the `api/hello.js` file will be served at `/api/hello`.\n\n```js\n// api/hello.js\nexport default (req, res) => {\n res.json({ hello: 'world' });\n};\n```\n\n### Server-side functions\n\nYou can add server-side functions in the `_` folder. The server-side functions are served at the path `/_/[action]`. For example, the `_/comic.js` file will be served at `/_/comic`.\n\nUse the `//#if server`, `//#else`, and `//#endif` comments to separate the server-side code from the client-side code. The compiler will strip out the server-side code from the client-side code and vice versa.\n\n```js\n// _/comic.js\nimport action from 'apprun-site/action.js';\nexport default async (data) => {\n //#if server\n const num = data?.num || Math.floor(Math.random() * 2990) + 1;\n const response = await fetch(`https://xkcd.com/${num}/info.0.json`);\n return response.json();\n //#else\n return action('comic', data);\n //#endif\n}\n```\n\nThe `action` function will POST to the `comic` action on the client side.\n\nYou can refer to the server-side action in the client-side code:\n\n```tsx\n// components/comic.tsx\nimport { app, Component } from 'apprun';\nimport comic from '../../app/_/comic';\nexport default class Comic extends Component {\n state = comic();\n view = ({ img, alt }) => img ?