/React-Vite-Starter-Template

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

Primary LanguageJavaScriptMIT LicenseMIT

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" 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 :

$ 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.

After creating the database, run following command :

$ 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 <script> 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 the project to review errors
preview Preview your production app

More information

For any errors found, please contact me here or do a pull request.
This repository is licensed under the MIT License. See the LICENSE file (here) for more information.