{"id":16551189,"url":"https://github.com/michaelcurrin/preact-quickstart","last_synced_at":"2025-12-01T22:14:33.979Z","repository":{"id":93179651,"uuid":"288146494","full_name":"MichaelCurrin/preact-quickstart","owner":"MichaelCurrin","description":"Template project for a basic Preact app with the default setup","archived":false,"fork":false,"pushed_at":"2021-03-16T14:34:30.000Z","size":189,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-14T20:52:28.138Z","etag":null,"topics":["preact","quickstart","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/MichaelCurrin.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":"2020-08-17T10:09:01.000Z","updated_at":"2021-03-16T14:34:32.000Z","dependencies_parsed_at":"2023-05-02T07:46:35.101Z","dependency_job_id":null,"html_url":"https://github.com/MichaelCurrin/preact-quickstart","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fpreact-quickstart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fpreact-quickstart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fpreact-quickstart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fpreact-quickstart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichaelCurrin","download_url":"https://codeload.github.com/MichaelCurrin/preact-quickstart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241876002,"owners_count":20035368,"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","quickstart","template"],"created_at":"2024-10-11T19:36:35.742Z","updated_at":"2025-12-01T22:14:33.955Z","avatar_url":"https://github.com/MichaelCurrin.png","language":"JavaScript","readme":"# Preact Quickstart\n\u003e Template project for a basic Preact app with the default setup\n\n[![Node CI](https://github.com/MichaelCurrin/preact-quickstart/workflows/Node%20CI/badge.svg)](https://github.com/MichaelCurrin/preact-quickstart/actions)\n[![GitHub tag](https://img.shields.io/github/tag/MichaelCurrin/preact-quickstart)](https://github.com/MichaelCurrin/preact-quickstart/tags/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue)](#license)\n\n[![Made with Node](https://img.shields.io/badge/Node.js-\u003e=10-blue?logo=node.js\u0026logoColor=white)](https://nodejs.org)\n[![Package - preact](https://img.shields.io/github/package-json/dependency-version/MichaelCurrin/preact-quickstart/preact)](https://www.npmjs.com/package/preact)\n\n\n\n## Preview\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=sample.png alt=\"Sample screenshot\" title=\"Sample screenshot\" height=\"400\" /\u003e\n\u003c/div\u003e\n\n\n## Use this project\n\n\u003cdiv align=\"center\"\u003e\n\n[![Use this template](https://img.shields.io/badge/Generate-Use_this_template-2ea44f?style=for-the-badge)](https://github.com/MichaelCurrin/preact-quickstart/generate)\n\n\u003c/div\u003e\n\n\n## About Preact\n\n### What is Preact?\n\nFrom the [preactjs.com](https://preactjs.com) homepage:\n\n\u003e Fast 3kB alternative to React with the same modern API.\n\nIf you are new to Preact, see the [Getting Started](https://preactjs.com/guide/v10/getting-started) page of the docs.\n\n### Why Preact?\n\nThe whole point of Preact is that it is very small and light package that gives most of the React functionality. If you use few or no dependencies already and want to keep your project fast, then Preact is a great fit. You can even use it to on the frontend only to add a widget to page.\n\nThe problems comes in when you add other packages to your project as well that are bigger than Preact - then your footprint for JS assets the user has to download becomes bloated and you might as well use React.\n\nThis quickstart project uses over 1600 dependencies once prod and dev dependencies are installed. So that might default the point of choosing Preact over React. If you do a prod install (`npm i --only=prod`) then only 4 packages get installed (one not in direct dependencies).\n\nPreact also has great community support - check the online forums or Slack if you are stuck.\n\n### How does it compare to React?\n\nPreact is supposed to cover most functionality in React that you're likely to need.\n\nPreact and React code looks very similar. One difference is that you can use `class` on element in Preact, while in React you need `className`.\n\nCheck out my [React Quickstart](https://github.com/MichaelCurrin/preact-quickstart) repo to compare how a basic app is structured in each library.\n\nPreact needs its own plugins though. Unless you can configure a React plugin to look for Preact.\n\n\n## Create a fresh project\n\nThis project was generated using instructions in the [preact-cli](https://github.com/preactjs/preact-cli#readme) README file.\n\nYou can do the same with:\n\n```sh\n$ npx preact-cli create default my-project\n```\n\nThe `default` value was used here. The  page linked above covers other options.\n\nCreating a new project will give you code that might be more up to date than this Preact Quickstart template project. But you can still use this template project as a reference for sample documentation and a CI workflow for your own project.\n\n\n## Installation\n\n### Install system dependencies\n\nInstall [Node.js](https://gist.github.com/MichaelCurrin/aa1fc56419a355972b96bce23f3bccba).\n\n### Clone\n\nClone this project:\n\n```sh\n$ git clone git@github.com:MichaelCurrin/preact-quickstart.git\n$ cd preact-quickstart\n```\n\n### Install project dependencies\n\n```sh\n$ npm install\n```\n\n#### Notes\n\nThat install commands covers 3 production dependencies and 8 dev dependencies - see [package.json](/package.json)\n\nOn a first-time install of the generated quickstart, I got this output:\n\n```\nadded 1649 packages from 803 contributors and audited 1649 packages in 84.978s\n```\n\nA few months later, this was higher:\n\n```\naudited 2270 packages in 15.531s\n```\n\nSo yes, Preact is light on your frontend for your user, but you still get a ton of local dependencies to manage.\n\n\n## Usage\n\n### Lint\n\nLint with ESLint.\n\n```sh\n$ npm run lint\n```\n\n### Tests\n\nRun tests using `jest` and `enzyme`.\n\n```sh\n$ npm test\n```\n\n### Start dev server\n\nServe with hot-reloading.\n\n```sh\n$ npm start\n```\n\nOpen the browser at:\n\n- [localhost:8080](https://localhost:8080)\n\n\n## Deploy\n\n### Local production build\n\nBuild to the unversioned `build` directory.\n\n```sh\n$ npm run build\n```\n\nStart a static server in that directory.\n\n```sh\n$ npm run serve\n```\n\n### Deploy pipeline\n\nThis project is setup to run a CI/CD builds on GitHub pages. See the _Actions_ tab on the repo for build status and logs.\n\nSee the [workflow config](/.github/workflows/main.yml) file.\n\nThe build is not persisted and served on GH Pages, however, this [React quickstart](https://github.com/MichaelCurrin/react-create-app-quickstart) projects does do that and so that can be brought in here if needed.\n\n\n## License\n\nReleased under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin).\n\nThis project is based on the CLI quickstart output which includes the default setup here:\n\n[![preactjs-templates - default](https://img.shields.io/static/v1?label=preactjs-templates\u0026message=default\u0026color=blue\u0026logo=github)](https://github.com/preactjs-templates/default)\n\nSee the [source license](/LICENSE-source).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelcurrin%2Fpreact-quickstart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelcurrin%2Fpreact-quickstart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelcurrin%2Fpreact-quickstart/lists"}