Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daniel-le97/mern-stack
https://github.com/daniel-le97/mern-stack
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/daniel-le97/mern-stack
- Owner: daniel-le97
- License: mit
- Created: 2023-11-22T23:41:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-15T02:22:37.000Z (about 1 year ago)
- Last Synced: 2024-12-09T14:57:52.867Z (about 1 month ago)
- Language: TypeScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vite-mern-template
[![Depfu](https://badges.depfu.com/badges/1b70410a7764005553d576dd171dce8d/status.svg)](https://depfu.com)
[![Depfu](https://badges.depfu.com/badges/1b70410a7764005553d576dd171dce8d/count.svg)](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.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 `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](https://github.com/vitejs/awesome-vite) for publishing this project.
## Tools
- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Axios](https://axios-http.com/)
- [React Router DOM](https://reactrouter.com/)
- [Express](https://expressjs.com/)
- [mongoose](https://mongoosejs.com/)
- [bcrypt.js](https://www.npmjs.com/package/bcryptjs)
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)
- [express-async-handler](https://www.npmjs.com/package/express-async-handler)#### The dependency versions are managed by [depfu](https://depfu.com/).
## Demo
![vite-mern-template-gh-demo](https://user-images.githubusercontent.com/78271602/234833309-fe8df564-2895-4727-be1e-c807fe142333.gif)
## Installation
```bash
npx degit apicgg/vite-mern-template my-app
```## Install dependencies (npm or yarn or pnpm)
```bash
cd my-app
cd client
npm install
cd ..
npm install
```## Start the development server
```bash
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 (backend) 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
- [x] Include eslint and prettier.
- [ ] Add testing frameworks.
- [ ] 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)