Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anikethsaha/mern
:tada: This is boilerplate for MERN stack with integrations like Redux and SSR :tada:
https://github.com/anikethsaha/mern
boilerplate expressjs mern mongodb nodejs reactjs redux server-side-rendering ssr webpack
Last synced: 2 months ago
JSON representation
:tada: This is boilerplate for MERN stack with integrations like Redux and SSR :tada:
- Host: GitHub
- URL: https://github.com/anikethsaha/mern
- Owner: anikethsaha
- License: mit
- Created: 2019-04-22T10:25:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-11T15:53:22.000Z (over 1 year ago)
- Last Synced: 2024-10-22T04:29:05.249Z (2 months ago)
- Topics: boilerplate, expressjs, mern, mongodb, nodejs, reactjs, redux, server-side-rendering, ssr, webpack
- Language: JavaScript
- Homepage: https://mern.netlify.com
- Size: 2.64 MB
- Stars: 99
- Watchers: 7
- Forks: 45
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
MERN-BoilerPlate
This is boilerplate for MERN stack with integrations like Redux and SSR
[](https://codesandbox.io/s/mern-gq5eb?fontsize=14)
[](https://evening-woodland-07645.herokuapp.com/#/)
## Table of Contents
- [Getting Started](#getting-started)
- [Configurations](#configs-for-addons-v1)
- [`mern.json`](#mernjson)
- [Starting development setup](#starting-development-setup)
- [Using CWA](#you-can-also-add-this-using-this-package)
- [Start Editing](#start-editing)
- [technology](#technology)
- [Features](#features)
- [addons using `mern.json`](#addons-using-mernjson)
- [license](#license)
- [contributors](#contributors)
## Support
## Getting Started
- **Clone the project**
- **Install the Dependencies**
```bash
$ npm i
```
- **Run the server**
```bash
$ npm run server:dev
```
## configs for addons v1
You can add addons for this project by simply editing the `mern.json` and then running `npm run develop`
### `mern.json`
- default options
```json
{
"styles": "none",
"stateManager": "none"
}
```
- For adding `styles`
- `"styles": "styled-components"` for styled-components
- `"styles": "css-modules"` for css-modules using webpack
- For adding state manager
- `"stateManager": "redux"` for redux store
**Run `npm run develop` or `yarn develop` after changing `mern.json`**
You can check the `scripts` folder for the implementation of these. Can even add your own addons.
Try to replicat how the other addons are build
Soon gonna add plugin system in this project, then it will be much simpler to create own plugins which can do different stuffs like SSR with store injections, managing `webpack.config.js`.
That will be the main feature for **v2**
More addons are coming soon.
> these addons should be added before you start editing or working on this project
## Starting development setup
- **Run the webpack server**
```bash
$ npm run watch
```
and, start making changes in `src/client` and `src/server` folders.
- **For running the production server**
```bash
$ npm run server:prod
```
### You can Also add this using [This Package](https://www.npmjs.com/package/@buildtip/create-web-app)
```bash
$ npm i -g @buildtip/create-web-app
$ cwa
```
And then on question `no. 4` that is `Please Select Project Stack [ Required ] :` Type: **`1`**
## Start Editing
Look for the `config/index.js` for making changes in the configs of the project
- _Edit_ the src/client/index.js to make changes for client
- _Edit_ the src/server/index.js to make changes in the server
## technology
- NodeJS - Server
- ExpressJS - Nodejs framework
- MongoDB - Database
- ReactJS - Frontend
- Redux - State Management
- Docker - Containerization and image
- Eslint - Linter
- Webpack - Bundler
- Babel - Loader and Compiler/Transpiler
- Jest - Testing Framework
## Features
- [x] Server Side Rendering
- [x] Image for Container
- [x] Routing
- [x] Model Controller Project Structure
- [x] Build Pipelines
- [x] Tests
- [x] Examples (live in codesandbox)
## addons using `mern.json`
- [x] State Management
- Redux
- [x] Styling
- styled-components (css-in-js)
## todo - addons
- `state-manager`
- [ ] Mobx
- [ ] Context API
- `styles`
- [ ] emotion
- [ ] postcss support (css modules, cssnano)
- [x] css modules (using webpack)
- [ ] linaria
- [ ] aphrodite
## [LICENSE](https://github.com/anikethsaha/MERN-Boilerplate/blob/master/LICENSE)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Anix
🚇 ⚠️ 🤔 🚧 🎨 💻
przemwierzbicki
🚇 ⚠️ 💻
Anmol Varma
🚇 ⚠️
Fasoro-Joseph Alexander
🚇 ⚠️
Yash Pahalajani
🚇 💻 📖 🐛
GT Deng
🚇
wincentrtz
💻
elsonlim
⚠️
jeffin sam
🚇 🐛 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!