https://github.com/munawwar/preact-mpa-template

⚛️ Preact Multi-Page Website Starter Template (SSR) - with express and esbuild 🚀
https://github.com/munawwar/preact-mpa-template

preact preact-app preact-apps preact-boilerplate preact-ssr-boilerplates preact-template

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/munawwar/preact-mpa-template
• Owner: Munawwar
• License: mit
• Created: 2023-02-18T16:15:31.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-24T18:17:28.000Z (5 months ago)
• Last Synced: 2024-12-01T09:40:41.394Z (about 2 months ago)
• Topics: preact, preact-app, preact-apps, preact-boilerplate, preact-ssr-boilerplates, preact-template
• Language: JavaScript
• Homepage:
• Size: 1.01 MB
• Stars: 7
• Watchers: 2
• Forks: 5
• 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, express 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

- 🤵‍♂️ 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

```sh

# Dev

npm run dev

# Prod

npm run build

npm run start

```

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.

## 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://www.npmjs.com/package/http2-express-bridge) 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](https://vite-plugin-ssr.com/) for some inspiration and example snippets, but I didn't use Vite here.