djizco / mern-boilerplate

A Full MERN Stack Boilerplate for Web Apps including a local authentication system. Uses React, Express.js, MongoDB, Redux, Passport.js, Webpack, Testing, and more.

MERN Boilerplate

MongoDB Express.js React.js Node.js

A Full MERN Stack Boilerplate for Web Apps. Includes a local authentication system using passport. User is given a simple profile with Full Name and Profile Picture. User is also able to reset password and username case.

NEW: For those of you who wish to separate the client and server into separate projects, I have created two repos that do just that! Check out MERN Client and MERN Server.

Requirements

• Operating System: MacOS or Linux
• Node.js (I recommend installing with NVM)
• Homebrew (to install MongoDB)

Quick Start

Setup

npm install

# Install MongoDB
brew tap mongodb/brew
brew install mongodb-community

Start the database

brew services start mongodb-community

for Development

Start the client

npm run start:client

Start the server

npm run start:server

Or run client and server together

npm start

for Production

npm run build
npm start:server

Other Commands

npm start
npm test
npm run lint
npm run lint:fix
npm run test:verbose
npm run test:coverage
npm run test:watch-client
npm run test:watch-server

Setup Instructions

Note: This is now a github template project. This makes copying the contents of the project into a new repo very simple.

To setup your own project, you will need to copy the contents of this project into a new repo. You will need to update the content in these files to names of your project and yourself:

• package.json: name, version, description, repository, author, bugs, homepage
• LICENSE: (update to your preferred license)
• client/index.html: description and title
• this README.md

This is also a good time to go through the included libraries to add or remove features that you want.

After this you can commit the files into a new repository and push up to your github. You can now start updating files in your client to begin working on your own project!

Features

• Webpack conveniently bundles your code for you.
• Babel lets you use ES6/7 features.
• CSS pre-processor setup for LESS and SASS lets you keep your styles clean and organized.
• ESLint helps you maintain a high level of code quality.
• Jest gives you a robust testing framework to make sure your code works.

Code Structure

- client
  - api
  - assets
    - images
    - icons
  - components
    - pages
    - environment
  - hooks
  - store
    - actions
    - reducers
    - thunks
    - tests
  - styles
  - utils
- server
  - config
  - database
  - routes
- scripts

Technologies

React - View Library

Redux - State Manager

Webpack - Module Bundler

Express - Node Application Framework

MongoDB - Document Database

Mongoose - MongoDB Framework

Passport - Authentication Framework

React Notifications Component - Notification System

Material-UI - React Component Library

Bulma - CSS Framework

React Bulma Companion - Bulma Component Library

FontAwesome - Icons

Ramda - Functional Library

date-fns - Date Functions Library

SuperAgent - HTTP Request Library

ESLint - Code Linter

Jest - Testing Framework

mern-boilerplate's Issues

still using react 17

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Dependency conflict: mongoose

OS: Xubuntu 21.04
npm: v7.22
node: v16.9.0

Server Side Rendering - Google Can't Crawl

We're getting ready to launch our project which was built on this template though Google can't crawl the site. What's the best way to implement SSR?

Need to incorporate shortid for users

Not a bug. But how would I go about adding shortid to the mongodb. I need my users to have a stream key for my site which is generated on registration.

Bit of a beginner with Mern stack but willing to learn :)

I have this working in my site now but this looks like a better user profile option for me.

Thanks

UnhandledPromiseRejection Error on Saving file

Whenever any new file is saved with changes, getting the error as UnhandledPromiseRejection. How can i resolve this error ?

How are you shipping the server to build folder ?

Dependency issue - nom install

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^16.14.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/react-notifications-component
npm ERR!   react-notifications-component@"^3.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.```

Dependency issue while running rpm install. 

'.' is not recognized as an internal or external command

Hello, after cloning the project and executed the command 'npm run dev', but got this error

useKeypress != useKeyPress

running yarn run dev in a current clone of master will fail due to
client/hooks/useKeypress.js
it should be renamed client/hooks/useKeyPress.js

Same UserId Cookie For Every User

I'm curious why the userId cookie is the same for every user that signs up. Was that done on purpose?