Awesome

vite-mern-template

Simple opinionated boilerplate for MERN stack with Vite, Redux Toolkit and TypeScript.

This includes React+TypeScript with familiar configuration for vite.config.ts for front-end and Express+TypeScript for back-end.

Feel free to add or tweak the setup as needed.

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

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

If you love this boilerplate, give it a star, you will be a ray of sunshine in our lives :)

Thanks to awesome-vite for publishing this project.

Tools & Technology

Front-end

• React
• TypeScript
• React Router DOM
• Redux Toolkit
• TanStack Query
• Tailwind CSS
• React Testing Library
• Vitest
• Prettier
• Eslint

Back-end

• Node.js
• Express
• TypeScript
• express-async-handler
• mongoose
• argon2
• jsonwebtoken
• Prettier
• Eslint

The dependency versions are managed by depfu.

Requirements

• Node.js 18+

Demo

Installation

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

or

git clone https://github.com/apicgg/vite-mern-template.git

Install dependencies (npm or yarn or pnpm)

• Backend

npm install

• Frontend

cd frontend
npm install

Start the development server

• Backend

npm run dev:backend

• Frontend

npm run dev:frontend

• Remove the .github folder and initialize your own git repository with git init.

TODO

• Include eslint and prettier.
• Add testing framework.

License

MIT License.

Please review the License.

Contributors ✨

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