/preact-spa-template

Preact Single-Page App Template

Primary LanguageJavaScriptMIT LicenseMIT

preact-spa-template

Preact single-page app starter template. This template is tuned for "SPA" sites; sites that do not need server side rendering (SSR). If you need SSR, then take a look at preact-mpa-template.

Clone repo, use node.js 14+ and run following:

npm ci
cd tests; npm ci; cd ..
npm run dev

# works with yarn and pnpm too

Features!

  • Preact + Preact hooks = 4 KB
  • Vite and all the goodies that comes with it
  • preact-router
    • Code split by pages + lazy loaded (via preact-lazy)
    • Manages browser history
    • Manage page title - so that it looks good on browser tab & browser back button history
    • 404 Screen
    • Error Screen
  • CSS Modules - with eslint typo/unused css check and autocomplete
  • ESLint and Prettier
  • Type check via JSDocs and typescript checker (tsc)
  • Yorkie git push linting hook
  • postcss-custom-media plugin
  • Vitest + Preact testing library

About Routes

You can find routes mapping (url-to-component mapping) at src/routes/routes.js.

You will notice that lazy(() => import('./file')) is used for lazy loading and bundling each page's JS into separate bundles for production.

You can also manage page titles from routes.js. title must be a string (it can have placeholders from route pattern. e.g. Orders | :orderId) or a function that which receives route info and returns a string.

Route components receives following properties about current route:

  • url: current page url
  • path: route pattern. e.g. /user/:id
  • matches: path matches (as an object). e.g: { id: 'user1' }
  • title: the title text used to set head title tag

Path redirects can be configured in src/routes/redirects.js

Path aliases

~ is short hand for src/ directory. So you don't have to do import '../../../js-file-in-src-directory'. You can just do import '~/js-file-in-src-directory'

Similarly for types, there is a shorthand alias @ to the types/ directory. import('@/RouteComponentProps')

Where to go next?