cbbfcd / preact-mpa-template

⚛️ Preact Multi-Page Website Starter Template (SSR) - with express and esbuild 🚀

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
• 🏝️ Create your own islands
• 🌐 Static files deployable to 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. Enable dynamic compression on the CDN. If not that, then optionally add an express middleware for compression.
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.