JovelLabay / vite-mern-template

Simple production ready boilerplate for MERN stack with Vite.

vite-mern-template

Simple opinionated boilerplate for MERN stack with Vite and Redux Toolkit. This includes React+TypeScript with familiar configuration for vite.config.ts for front-end and Express+TypeScript for back-end.

This has been created with the official Vite template (npm create vite@latest) and some extended setup. There are two separate folders called server and client. The entry point for the backend is server/src/index.js.

Any package manager can be used with this project (e.g. npm, yarn or pnpm).

Thanks to awesome-vite for publishing this project.

Tools

• React
• Tailwind CSS
• TypeScript
• Redux Toolkit
• Axios
• React Router DOM
• Express
• mongoose
• bcrypt.js
• jsonwebtoken
• express-async-handler

The dependency versions are managed by depfu.

Demo

Installation

npx degit apicgg/vite-mern-template my-app

Install dependencies

cd my-app
cd client
npm install
cd ..
npm install

Start the development server

npm run watch
npm run dev

• Run the above two commands on different terminal sessions.

• Remove the .git folder and initialize your own git repository.

• In this case npm run watch needs to be executed before starting the development server with npm run dev as the TypeScript files need to be compiled to JavaScript before staring the dev server with node. ts-node can be used this to avoid this.

• To build run npm run build:all to build both the client and the server.

TODO

• Include eslint and prettier.
• Add testing frameworks.
• Create a npm CLI library for scaffolding projects.

License

MIT License.

Please review the License.

Contributors ✨

Contributions of any kind welcome! Kindly have a look into Contributing Guidelines