Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/antoinemcx/react-vite-starter-template
- Owner: antoinemcx
- License: mit
- Created: 2023-07-22T17:16:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-23T09:42:14.000Z (over 1 year ago)
- Last Synced: 2024-11-30T11:33:04.162Z (about 1 month ago)
- Topics: authentication, eslint, express, mariadb, migrations, react, react-starter-kit, react-template, reactjs, starter-template, vite, website-template
- Language: JavaScript
- Homepage:
- Size: 43.9 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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.
## 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.