Preact

Preact is a framework boilerplate from the Vercel examples collection that scaffolds a minimal Preact application preconfigured for zero-configuration deployment to Vercel, with a Preact CLI script set for development, building, serving, and testing.

What is the Preact template?

The Preact example is a single-directory starter project that produces a deployable Preact app. You clone it (or follow the Deploy with Vercel link that points at the framework-boilerplates/preact folder of the vercel/examples repository), run npm install, then use the standard Preact CLI scripts to develop and ship it. It ships no custom build configuration: the toolchain is the one Preact CLI provides, and the deployment target named on the page is Vercel, reached through the hosted Deploy with Vercel flow. A live instance is published at the preact-template.vercel.app URL listed on the page.

What makes the Preact template stand out?

• Preact CLI dev server — npm run dev serves the app with hot reload at localhost:8080.
• Production build with minification — npm run build generates the minified production bundle.
• Local production preview — npm run serve lets you test the built production output locally before deploying.
• Jest and Enzyme test setup — npm run test runs the project's test suite using Jest with Enzyme.
• One-click Vercel deploy — a Deploy with Vercel clone link encodes the example repository URL and the preact template parameter, so no manual project configuration is needed.
• Part of vercel/examples — the parent repository is described as a curated collection of examples and solutions for building your own applications; its listed topics include examples, nextjs and vercel.
• npm-driven workflow — every task (install, dev, build, serve, test) is exposed as an npm script, with no extra config files to edit.

Who should use the Preact template?

• Frontend developers starting a Preact project: scaffold a working app shell with hot reload and a production build in a few commands instead of wiring a bundler.
• Developers comparing Preact with React: use a small, working Preact codebase to evaluate the component model and build output before committing to it.
• Vercel users: deploy a hosted demo from the example repository without touching deployment settings.
• Teams that want a test setup out of the box: start from a project that already runs Jest with Enzyme via npm run test.

Use cases

• Rapid prototyping: clone the example, run npm run dev at localhost:8080, and iterate on components with hot reload.
• Demo or internal tool hosting: build with npm run build and deploy the result through the Deploy with Vercel flow to get a public preact-template-style URL.
• Learning Preact CLI conventions: inspect the script set to see how Preact CLI handles dev serving, minified builds, production previews, and tests.
• Bootstrapping a larger Preact app: use the boilerplate as the first commit and add your own routes, state, and styling on top of it.

How does the Preact template work?

The workflow is a short npm script sequence driven by Preact CLI. First run npm install to fetch dependencies, then npm run dev to serve the app with hot reload on localhost:8080, npm run build to produce a minified production build, npm run serve to test that production build locally, and npm run test to run the Jest and Enzyme suite. Deployment to Vercel happens through the Deploy with Vercel link, which clones the example repository and provisions the project for you.

Pricing

The Preact example is free and open source: it lives in the public vercel/examples GitHub repository and is deployed through Vercel's Deploy with Vercel flow.

FAQ

What does the Preact template do?

It provides a working Preact app scaffold taken from the Vercel examples repository, complete with npm scripts for a hot-reloading dev server, a minified production build, a local production preview, and Jest/Enzyme tests.

Is the Preact template free?

Yes. The example is published in the public vercel/examples repository, so you can clone, modify, and deploy it without paying for the template itself. Any costs would come from the hosting or services you attach to your own deployment.

Which port does the Preact dev server use?

npm run dev serves the app with hot reload at localhost:8080. The other scripts are npm run build for a minified production build, npm run serve to test that build locally, and npm run test for the Jest and Enzyme test suite.

What testing tools does the Preact template include?

The example ships a test setup that runs through npm run test using Jest together with Enzyme, so you can add component tests without installing or configuring a test runner yourself.

Do I need configuration to deploy the Preact template to Vercel?

No. The page states the app can be deployed to Vercel with zero configuration, and the Deploy with Vercel link already targets the preact directory of the vercel/examples repository.