Preact Project Template

This is a template for a opinionated Preact project with many features already set up.
There are 4 links, each link corresponding to Preact/React Full/Light Template.

Full	Light

Try it online

Note: memo is not used in React version.

Note 2: It is expected in the future that all Preact versions will be deleted since memoization is handled by React with its compiler.

The Light versions remove the dependencies with typebox, mantine, react-hot-toast, lucide-react and react-icons.

Links

• Preact Full Template
• Preact Light Template
• React Full Template
• React Light Template

Features

• File base routing (client) (using Easy-React-Router)
• Lazy loading (client) (using Easy-React-Router)
• Structured code (server and client)
• Tests (server and client)
• Code coverage (server and client)
• Documentation (client) (WIP: add of Storybook on client, and see for Server)
• Dependency graph (server and client)
• Linting (server and client)
• API type safety (server and client)

Installation

Requirements

npm install -g bun
npm install -g serve

On Windows:

Installation

git clone https://github.com/nicolasventer/Preact-Project-Template
cd Preact-Project-Template
all_init_on_cloned.bat

The script will create a symbolic link between the Shared folder of the Client and Server folders and then install the dependencies.
If you want to install the dependencies manually, you should at least create the symbolic link:

mk_link.bat

If you only require the server, you can run the following:

copy_shared.bat

On Linux

Installation

git clone https://github.com/nicolasventer/Preact-Project-Template.git
cd Preact-Project-Template
./all_init_on_cloned.sh

The script will create a symbolic link between the Shared folder of the Client and Server folders and then install the dependencies.
If you want to install the dependencies manually, you should at least create the symbolic link:

mk_link.sh

If you only require the server, you can run the following:

copy_shared.sh

Usage

Client

Development

Watch mode

In the Client folder:

bun run dev

WARNING: Be sure to be exactly in the Client folder, otherwise you will have page not found error.

Access the client at http://localhost:5173

Preview mode

In the Client folder, run:

bun run build
bun run preview

Access the client at http://localhost:4173

Production

Preview mode

In the Client folder, run:

bun run buildProd
bun run previewProd

Access the client at http://localhost:4173/${clientEnv.BASE_URL}/

Deployment

In the Client folder, run:

bun run buildDeploy

It updates the docs folder (for example for GitHub pages).

Server

Development

Watch mode

In the Server folder, run:

bun run dev

Preview mode

In the Server folder, run:

bun run start

Check that the server is running at http://localhost:3000/

Production

TODO: see for building the server.

Deployment

TODO: see for deploying the server.

---

Project structure

Tech stack