Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/antoinemcx/react-vite-starter-template

🚀 Full-stack boilerplate template for React using Vite : JWT authentication, migration system, error pages and more.
https://github.com/antoinemcx/react-vite-starter-template

authentication eslint express mariadb migrations react react-starter-kit react-template reactjs starter-template vite website-template

Last synced: about 1 month ago
JSON representation

🚀 Full-stack boilerplate template for React using Vite : JWT authentication, migration system, error pages and more.

Awesome Lists containing this project

README

        

React-Vite-Starter-Template



Full-stack starter template for React projects by antoinemcx using Vite.

If you like the project, feel free to put a ⭐ ; If you need help, join the server support.


MIT License

CodeFactor


Stars


Support server



## Features
* 🚀 Full-stack app : ready to code with a starter file structure !
* 📁 Separated client (React+Vite) and server (express) sides
* ❌ Custom error paging
* 🖌️ Integration of FontAwesome
* ✏️ Pages template with a responsive header and a Title
* 📡 MariaDB connection with migrations management
* 🔑 JWT Authentication system
* 👥 Sign up page with conditional logic and Sign in with "Remember me"
* 🔐 Private routing with a loading message
* ⚙️ A basic ESLint configuration for the client side

### CRA version
If you need you'll find a branch "[CRA](https://github.com/antoinemcx/React-Vite-Starter-Template/tree/cra)" for the same application bootstraped with Create-React-App instead of Vite.


## Setup the project

### 1. Installation
First, install the dependencies in the two folders separately :
```sh
$ cd client ; npm install
$ cd server ; npm install
```

### 2. Configuration
Then, rename the **.env.example** files in the two folders into **.env** and replace the values if needed.

### 3. Database
This template uses on the MariaDB database, a slightly modified version of MySQL.

First, create the database. The name of the database must be the same as the one set in the **server/.env** file.

![](https://i.imgur.com/ALeKvsf.png "Creating a database on phpMyAdmin")

After creating the database, run following command :
```sh
$ cd server ; node database/migrations/0.0.0_init_project.js
```


## Scripts

In development, you will mainly use `npm run start` on both **server/** and **client/** sides ; however, here are the other scripts :

### In the server/ folder
|`npm run ` |Description|
|-------------------|-----------|
|`start` |Serves your app at `localhost:3001`|

### In the client/ folder
|`npm run <script>` |Description|
|-------------------|-----------|
|`start` |Serves your app at `localhost:1234`|
|`build` |Builds the application for production to ./dist|
|`lint` |[Lints](https://en.wikipedia.org/wiki/Lint_%28software%29) the project to review errors|
|`preview` |Preview your production app|

<br>

## More information

For any errors found, please contact me [here](https://discord.gg/G6WQsMQShZ) or do a pull request.
This repository is licensed under the MIT License. See the `LICENSE` file ([here](LICENSE)) for more information.