template cloudflare

A template for applications using preact, htm, typescript, and cloudflare as host. Use tape-run for tests in a browser environment.

See template-ts-preact-htm-app for the same thing, but not using cloudflare.

See template-ts-preact-htm for something similar, but for dependency modules.

use

Use the template button in github. Or clone this then rm -rf .git && git init.
Then npm i && npm init.
Edit the source code in src/.
Setup the environment variables:

mv .dev.vars.example .dev.vars

Write docs -- mv README.example.md README.md + edit the readme file

featuring

preversion npm hook -- lint.
postversion npm hook -- git push && git push --tags
eslint via eslint-config-standard -- npm run lint
test in a browser environment via tape-run -- see npm test. Includes tap testing tools -- tapzero and tap-spec
CI via github actions
routing via route-event and @substrate-system/routes

develop

Start a localhost server, and serve the cloudinary serverless functions locally. Note the lambda functions are accessible at the path /api/*.

npm start

architecture

See this article for more details about application architecture.

We create application state and logic in the file ./src/state.ts. This exports static functions, creates a state object, and sets up URL routing.

In the view code, you would call the functions exposed in state with a state instance in response to application events.

Notes

headers + cloudflare functions

Warning

Custom headers defined in the _headers file are not applied to responses from Functions, even if the Function route matches the URL pattern. If your Pages application uses Functions, you must migrate any behaviors from the _headers file to the Response object in the appropriate /functions route. When altering headers for multiple routes, you may be interested in adding middleware for shared behavior.