anikethsaha / Mern

MERN-BoilerPlate

This is boilerplate for MERN stack with integrations like Redux and SSR

Table of Contents

• Getting Started
• Configurations
  • mern.json
• Starting development setup
  • Using CWA
• Start Editing
• technology
• Features
• addons using mern.json
• license
• contributors

Support

Getting Started

• Clone the project

• Install the Dependencies

$ npm i

• Run the server

$ 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

{
	"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

$ npm run watch

and, start making changes in src/client and src/server folders.

• For running the production server

$ npm run server:prod

You can Also add this using This Package

$ 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

Contributors

Thanks goes to these wonderful people (emoji key):

Anix 🚇 ⚠️ 🤔 🚧 🎨 💻	przemwierzbicki 🚇 ⚠️ 💻	Anmol Varma 🚇 ⚠️	Fasoro-Joseph Alexander 🚇 ⚠️	Yash Pahalajani 🚇 💻 📖 🐛	GT Deng 🚇	wincentrtz 💻
elsonlim ⚠️	jeffin sam 🚇 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!