Skip to content
Quickly bootstrap your next web app with Fastify, Preact and htm
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.eslintrc.js
.gitignore
Dockerfile
LICENSE
README.md
package-lock.json
package.json

README.md

fastify-preact-htm-boilerplate

Quickly bootstrap your next web app with Fastify, Preact and htm (great stack for quick web prototypes).

Rationale 🤯

Sometimes you just want to create a quick prototype of a web app to get feedback from friends and co-workers.

In such cases, I personally don't like to invest a lot of time configuring build toolchains and tools such as Babel or Jest, but I want to get straight to the core.

Since my favorite technologies to develop web apps are Fastify (API) and React (UI), I found this stack to work quite well as a compromise between familiarity, ease of development and possibility to improve over in case I want to convert the project to an actual production-ready app.

More details available in my blog article Fastify and Preact for quick web app prototyping

Fastify and Preact for quick web app prototyping

Getting started 👩‍💻

As easy as running this:

git clone https://github.com/lmammino/fastify-preact-htm-boilerplate.git my-new-project
cd my-new-project
rm -rf .git
npm install

Now enjoy editing the sample code in src:

  • src/ui: is for your frontend (Preact + htm)
  • src/server: is for your backend (Fastify)

To start the app, just run:

npm start

The app will be available at localhost:3000.

Ready to be distributed (with Docker) 🐳

The project contains already a Dockerfile that allows you to package and run the project without having to have Node.js and NPM installed.

Run the following commands to run the app in a container:

docker build -t my-new-project .
docker run -it -p 3000:3000 my-new-project

Now enjoy your app at localhost:3000.

What's missing? 🤔

This boilerplate does not suggest any way to compile your assets in a more production ready way. Also it doesn't make any frontend routing assumption (no library provided), nor it provides server side rendering (which you might want if you care about SEO).

Moreover, there's no default way to persist data in your backed. Picking the right database for your needs is left up to you.

These are only some of the aspects you have to generally keep in mind while building an application for production and this boilerplate leaves these concerns to you.

Contributing 🤙

Everyone is very welcome to contribute to this project. You can contribute just by submitting bugs or suggesting improvements by opening an issue or by sending a pull request.

License 👮‍♀️

Licensed under MIT License. © Luciano Mammino.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.