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
• Axios
• React Router DOM
• Express
• mongoose
• express-async-handler
• material-ui

Requirements

• Node.js 18+

Installation

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

Install dependencies (npm or yarn or pnpm)

• Backend

npm install

• Frontend

cd client
npm install

Start the development server

• Backend

npm run watch
npm run server

• Frontend

npm run client

• 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 server on different terminal sessions as the TypeScript files (backend) need to be compiled to JavaScript before staring the dev server with node.
• To build run npm run build:server and npm run build:client.

License

MIT License.

Please review the License.

Contributors ✨

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