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
npm run dev
- Preact + Preact hooks = 4 KB
- Vite and all the goodies that comes with it
- preact-iso
- Code split by pages + lazy loaded
- 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 (it is easy to remove this and use tailwind)
- ESLint and Prettier
- Type check via JSDocs and typescript checker (tsc)
- Yorkie git push linting hook
- Vitest + Preact testing library + Playwright
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:
urlwithout origin and URI fragment. e.g '/user/123?tab=subscription' - path: route pattern. e.g.
/user/:id - params: path matches (as an object). e.g:
{ id: 'user1' } - title: the title text used to set head title tag
- query: query params (as an object). e.g:
{ search: 'john' } - routeId: the routeId used in route.js
Path redirects can be configured in src/routes/redirects.js
~ 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. e.g. import('@/Route').PageComponent
- Check package.json - dependencies, scripts and eslint rules
- Check the implementation of src/App.jsx
- Read about preact/compat
- Add or remove stuff as you need. Check out other tools:
- Whole list of preact related tools at awesome-preact
- Icons
- Material Icons
- Remove SVG from JS with preact-svg-icon
- CSS Libraries
- UI Libraries
- State managers