Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apicgg/vite-mern-template
Simple production ready boilerplate for MERN stack with Vite.
https://github.com/apicgg/vite-mern-template
boilerplate-front-end express mern-stack reactjs redux-toolkit typescript vite
Last synced: 5 days ago
JSON representation
Simple production ready boilerplate for MERN stack with Vite.
- Host: GitHub
- URL: https://github.com/apicgg/vite-mern-template
- Owner: apicgg
- License: mit
- Created: 2022-07-28T15:35:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-12T05:23:34.000Z (4 months ago)
- Last Synced: 2024-09-12T14:53:27.043Z (4 months ago)
- Topics: boilerplate-front-end, express, mern-stack, reactjs, redux-toolkit, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 1.02 MB
- Stars: 72
- Watchers: 2
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-mern-template - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose. (Get Started / Templates)
- awesome-vite - vite-mern-template - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose. (Get Started / Templates)
README
# vite-mern-template
[](https://depfu.com)
[](https://depfu.com/github/apicgg/vite-mern-template?project_id=38988)
> 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](https://vitejs.dev/) 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](https://github.com/vitejs/awesome-vite) for publishing this project.
## Tools & Technology
### Front-end
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [React Router DOM](https://reactrouter.com/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [TanStack Query](https://tanstack.com/query/latest)
- [Tailwind CSS](https://tailwindcss.com/)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- [Vitest](https://vitest.dev/)
- [Prettier](https://prettier.io/)
- [Eslint](https://eslint.org/)
### Back-end
- [Node.js](https://nodejs.org/en)
- [Express](https://expressjs.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [express-async-handler](https://www.npmjs.com/package/express-async-handler)
- [mongoose](https://mongoosejs.com/)
- [argon2](https://www.npmjs.com/package/argon2)
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)
- [Prettier](https://prettier.io/)
- [Eslint](https://eslint.org/)
#### The dependency versions are managed by [depfu](https://depfu.com/).
## Requirements
- [Node.js](https://nodejs.org/en/) 18+
## Demo
## Installation
```bash
npx degit apicgg/vite-mern-template my-app
```
or
```bash
git clone https://github.com/apicgg/vite-mern-template.git
```
## Install dependencies (npm or yarn or pnpm)
- Backend
```bash
npm install
```
- Frontend
```bash
cd frontend
npm install
```
## Start the development server
- Backend
```bash
npm run dev:backend
```
- Frontend
```bash
npm run dev:frontend
```
- Remove the .github folder and initialize your own git repository with ```git init```.
## TODO
- [x] Include eslint and prettier.
- [x] Add testing framework.
## License
MIT License.
Please review the [License](https://github.com/apicgg/vite-mern-template/blob/main/LICENSE).
## Contributors ✨
Contributions of any kind welcome! Kindly have a look into [Contributing Guidelines](CONTRIBUTING.md)