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
express mern-stack reactjs redux-toolkit typescript vite
Last synced: about 1 month 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 (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-10T05:43:11.000Z (2 months ago)
- Last Synced: 2024-03-10T06:35:45.926Z (2 months ago)
- Topics: express, mern-stack, reactjs, redux-toolkit, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 823 KB
- Stars: 55
- Watchers: 1
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- 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)
- 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-viter - 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)
- 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 and Redux Toolkit.
> 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).
> Thanks to [awesome-vite](https://github.com/vitejs/awesome-vite) for publishing this project.
## Tools
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [React Router DOM](https://reactrouter.com/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Axios](https://axios-http.com/)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- [Vitest](https://vitest.dev/)
- [Express](https://expressjs.com/)
- [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)
#### 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 .git and .github folder and initialize your own git repository.
## TODO
- [x] Include eslint and prettier.
- [x] Add testing framework.
- [ ] Create a npm CLI library for scaffolding projects.
## 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)