React Project Template

This is an opinionated template for a React project with many features already set up.
There are 2 links, each link corresponding to React Full/Light Template. (The Light version is WIP)

Try it online

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

Links

• React Full Template
• React Light Template

Features

• File base routing (client) (using Easy-React-Router)
• Lazy loading (client) (using Easy-React-Router)
• Auto memoization (client)
• 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)
• Ready for Native (client)
• 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/React-Project-Template.git
cd React-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