{"id":22556054,"url":"https://github.com/munawwar/preact-spa-template","last_synced_at":"2025-04-10T05:25:49.833Z","repository":{"id":150753010,"uuid":"477099539","full_name":"Munawwar/preact-spa-template","owner":"Munawwar","description":"Preact Single-Page App Template","archived":false,"fork":false,"pushed_at":"2025-01-26T15:24:08.000Z","size":654,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T04:30:53.338Z","etag":null,"topics":["preact","preact-app","preact-apps","preact-boilerplate","preact-template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Munawwar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-02T15:47:27.000Z","updated_at":"2025-03-12T05:22:20.000Z","dependencies_parsed_at":"2025-01-18T16:25:33.226Z","dependency_job_id":"45331e9f-231a-4c50-bb11-b1cd71fcb1b7","html_url":"https://github.com/Munawwar/preact-spa-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fpreact-spa-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fpreact-spa-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fpreact-spa-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fpreact-spa-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Munawwar","download_url":"https://codeload.github.com/Munawwar/preact-spa-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248162053,"owners_count":21057697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["preact","preact-app","preact-apps","preact-boilerplate","preact-template"],"created_at":"2024-12-07T19:11:06.084Z","updated_at":"2025-04-10T05:25:49.806Z","avatar_url":"https://github.com/Munawwar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preact-spa-template\n\nPreact 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](https://github.com/Munawwar/preact-mpa-template).\n\nClone repo, use node.js 14+ and run following:\n\n```\nnpm ci\nnpm run dev\n```\n\n## Features!\n\n- [Preact](https://github.com/preactjs/preact) + Preact hooks = 4 KB\n- [Vite](https://vitejs.dev) and all the goodies that comes with it\n- [preact-iso](https://github.com/preactjs/preact-iso)\n  - Code split by pages + lazy loaded\n  - Manages browser history\n  - Manage page title - so that it looks good on browser tab \u0026 browser back button history\n  - 404 Screen\n  - Error Screen\n- [CSS Modules](https://github.com/css-modules/css-modules) - with eslint typo/unused css check and autocomplete (it is easy to remove this and use tailwind)\n- ESLint and Prettier\n- Type check via JSDocs and typescript checker (tsc)\n- [Yorkie](https://www.npmjs.com/package/yorkie) git push linting hook\n- [Vitest](https://vitest.dev/) + [Preact testing library](https://preactjs.com/guide/v10/preact-testing-library/) + [Playwright](https://playwright.dev/)\n\n### About Routes\n\nYou can find routes mapping (url-to-component mapping) at src/routes/routes.js.\n\nYou will notice that \u003ccode\u003elazy(() =\u0026gt; import('./file'))\u003c/code\u003e is\nused for lazy loading and bundling each page's JS into separate bundles\nfor production.\n\nYou 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.\n\nRoute components receives following properties about current route:\n\n- url: `url` without origin and URI fragment. e.g '/user/123?tab=subscription'\n- path: route pattern. e.g. `/user/:id`\n- params: path matches (as an object). e.g: `{ id: 'user1' }`\n- title: the title text used to set head title tag\n- query: query params (as an object). e.g: `{ search: 'john' }`\n- routeId: the routeId used in route.js\n\nPath redirects can be configured in src/routes/redirects.js\n\n### Path aliases\n\n`~` 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'`\n\nSimilarly for types, there is a shorthand alias `@` to the types/ directory. e.g. `import('@/Route').PageComponent`\n\n## Where to go next?\n\n- Check package.json - dependencies, scripts and eslint rules\n- Check the implementation of src/App.jsx\n- Read about [preact/compat](https://preactjs.com/guide/v10/switching-to-preact/) (Last I checked charting libraries like recharts 2, ag-charts-react works without problems)\n- Add or remove stuff as you need. Check out other tools:\n  - Whole list of preact related tools at [awesome-preact](https://github.com/preactjs/awesome-preact)\n  - Icons\n    - [Material Icons](https://github.com/material-icons/material-icons)\n    - Remove SVG from JS with [preact-svg-icon](https://www.npmjs.com/package/preact-svg-icon)\n  - CSS Libraries\n    - [Open Props](https://open-props.style)\n    - [Tailwind](https://tailwindcss.com)\n    - [Fluid](https://fluid.tw/)\n  - UI Libraries\n    - [Material UI](https://github.com/mui/material-ui/tree/master/examples/material-preact)\n    - [Preact Fluid](https://github.com/ajainvivek/preact-fluid)\n    - A 20kB (gzip) charting library - [Preact Chartist](https://www.npmjs.com/package/preact-chartist)\n  - State managers\n    - [Preact Signals](https://preactjs.com/guide/v10/signals/)\n    - [Tanstack Query with Preact Signals](https://www.npmjs.com/package/@preact-signals/query)\n    - [nanostore](https://github.com/nanostores/nanostores)\n    - [query with nanostore](https://github.com/nanostores/query)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunawwar%2Fpreact-spa-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmunawwar%2Fpreact-spa-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunawwar%2Fpreact-spa-template/lists"}