Skip to content

βš›οΈ Preact Multi-Page Website Starter Template (SSR) - with express and esbuild πŸš€

License

Notifications You must be signed in to change notification settings

Munawwar/preact-mpa-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

40 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

preact-mpa-template

Example repo to start a multi-page app/website (MPA) with Preact, express and esbuild. If you don't need server side rendering (SSR) check preact-spa-template.

  • 🐒 JS, CSS, image files are content hashed ("fingerprinted") on prod for long lived caching
  • πŸ€΅β€β™‚οΈ Express JS server
  • πŸ”„ Live reload
  • βœ‚οΈ Shared code chunks / Code splitting (read esbuild docs for caveats)
  • πŸš€ Preload shared chunks
  • 🌐 Static files deployable to S3 behind a CDN
# Dev
npm run dev

# Prod
npm run build
npm run start

VSCode note: Install es6-string-html extension to syntax highlight HTML inside of JS template literals.

Structure

Example server uses a config file for mapping URL pattern to server handling function. Config file is at server/routes/routes.js. This gives full flexibility on how routes and URLs are handled.

Entry files to a page should placed in client/pages/{name}/{name}.page.jsx.

You will have to do at least a couple of things to production-ize this template:

  1. You may not want to have a single preact context for the entire website. Each page having a separate context might be better.
  2. Add HTTP/2 support.
  3. Optionally upload files from dist/public directory to a file storage origin (like AWS S3) and use a CDN to intercept everything under URL path /public/* (on the same domain as the express server) to point to the file storage origin. Remove express.js compression and enable dynamic compression on the CDN.
  4. You might want a CSS solution like CSS modules or utility CSS (look into esbuild plugins for these)

Credits

Thanks to vite-plugin-ssr for some inspiration and example snippets, but I didn't use Vite here.

About

βš›οΈ Preact Multi-Page Website Starter Template (SSR) - with express and esbuild πŸš€

Topics

Resources

License

Stars

Watchers

Forks