https://github.com/munawwar/preact-mpa-template
⚛️ Preact Multi-Page Website Starter Template (SSR) - with fastify and esbuild 🚀
https://github.com/munawwar/preact-mpa-template
preact preact-app preact-apps preact-boilerplate preact-ssr-boilerplates preact-template
Last synced: about 1 month ago
JSON representation
⚛️ Preact Multi-Page Website Starter Template (SSR) - with fastify and esbuild 🚀
- Host: GitHub
- URL: https://github.com/munawwar/preact-mpa-template
- Owner: Munawwar
- License: mit
- Created: 2023-02-18T16:15:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-27T15:43:23.000Z (about 2 months ago)
- Last Synced: 2025-04-06T04:52:06.846Z (about 1 month ago)
- Topics: preact, preact-app, preact-apps, preact-boilerplate, preact-ssr-boilerplates, preact-template
- Language: JavaScript
- Homepage:
- Size: 554 KB
- Stars: 13
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# preact-mpa-template
Example repo to start a multi-page app/website (MPA) with Preact, fastify and esbuild. If you don't need server side rendering (SSR) check [preact-spa-template](https://github.com/Munawwar/preact-spa-template).
- 🐢 JS, CSS, image files are content hashed ("fingerprinted") on prod for long lived caching
- 🤵♂️ Fastify server (More performant than Express, can add HTTP/2 support)
- 🔄 Live reload¹
- ✂️ Shared code chunks / Code splitting (read esbuild docs for caveats)
- 🚀 Preload shared chunks
- 🗲 Preloads pages on mouse hover / touch start (using [instant.page](https://instant.page/))
- 🌐 Static files deployable to S3 behind a CDN
```sh
# Dev
npm run dev
# Prod
npm run build
node server/server.js
# Don't use `npm run prod-debug` here as npm is known to swallow process signals
# Also --enable-source-maps is heavy, so use it cautiously
```
VSCode note: Install [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) extension to syntax highlight HTML inside of JS template literals.
¹ Live Reload here means:
- Changes to client JS are automatically refreshed via a full page reload
- Changes to CSS are reflected on page without page reload
- Changes to node.js server routes are hot reloaded
- Route handlers are also lazy loaded, to not only get the hot reloading to work, but also:
1. to keep dev server restarts fast (restart are needed when editing common server code outside routes)
2. to keep cold start time low, if you plan to deploy this to serverless environments like GCP Cloud Run
## 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](https://fastify.dev/docs/latest/Reference/HTTP2/) support.
3. Use a CDN for URL paths `/public/*` and `/assets/*` (on the same domain as the fastify server). Remove fastify compression and enable dynamic compression on the CDN. Optionally upload files from `dist/public` and `assets` directories to a file storage origin (like AWS S3) so that your main server doesn't have to serve static files (especially if your server is not auto-scaling or is constrained by bandwidth).
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](https://vite-plugin-ssr.com/) for some inspiration and example snippets, but I didn't use Vite here.