{"id":15040551,"url":"https://github.com/nemanjam/mern-boilerplate","last_synced_at":"2025-04-04T22:06:44.241Z","repository":{"id":38057380,"uuid":"250020969","full_name":"nemanjam/mern-boilerplate","owner":"nemanjam","description":"Full stack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.","archived":false,"fork":false,"pushed_at":"2024-06-02T08:06:13.000Z","size":1181,"stargazers_count":484,"open_issues_count":2,"forks_count":134,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-28T21:04:51.098Z","etag":null,"topics":["authentication","authorization","boilerplate","express","facebook-login","fullstack","google-login","jwt","mern","mern-boilerplate","mongodb","mongoose","oauth","passport","react","reactjs","redux","redux-thunk"],"latest_commit_sha":null,"homepage":"https://mern-boilerplate.arm1.nemanjamitic.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nemanjam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-25T15:45:27.000Z","updated_at":"2025-03-16T12:20:48.000Z","dependencies_parsed_at":"2023-12-07T13:26:09.377Z","dependency_job_id":"e30a8227-149a-4ec3-8195-c223d9480031","html_url":"https://github.com/nemanjam/mern-boilerplate","commit_stats":{"total_commits":98,"total_committers":1,"mean_commits":98.0,"dds":0.0,"last_synced_commit":"922cece108659984fbdaaac75ddf00242c304957"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmern-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmern-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmern-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmern-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nemanjam","download_url":"https://codeload.github.com/nemanjam/mern-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256112,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","authorization","boilerplate","express","facebook-login","fullstack","google-login","jwt","mern","mern-boilerplate","mongodb","mongoose","oauth","passport","react","reactjs","redux","redux-thunk"],"created_at":"2024-09-24T20:44:43.959Z","updated_at":"2025-04-04T22:06:44.223Z","avatar_url":"https://github.com/nemanjam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERN Boilerplate\n\nThis is full stack boilerplate with React, Redux, Express, Mongoose and Passport. Skip the tedious part and get straight to developing your app.\n\n## Demo\n\n- Live demo is available here: **[https://mern-boilerplate.arm1.nemanjamitic.com](https://mern-boilerplate.arm1.nemanjamitic.com)**\n\n## Deployment with Docker (2023. update)\n\nSince Heroku is no longer free I made Docker production deployment that you can use on any Linux VPS.\n\n- original [mern-docker-prod](https://github.com/nemanjam/mern-docker-prod) repository with Docker code and instructions that you can reuse to deploy your own Mern apps\n- Traefik part of the deployment [traefik-proxy](https://github.com/nemanjam/traefik-proxy) and [traefik-proxy/apps/mern-boilerplate](https://github.com/nemanjam/traefik-proxy/tree/main/apps/mern-boilerplate)\n\n\n## Features\n\n- Server\n\n  - User and Message models with `1:N` relation\n  - Full CRUD REST API operations for both Message and User models\n  - Passport authentication with local `email/password`, Facebook and Google OAuth strategies and JWT protected APIs\n  - `User` and `Admin` roles\n  - NodeJS server with Babel for new JS syntax unified with React client\n  - `async/await` syntax across whole app\n  - Joi server side validation of user's input\n  - Single `.env` file configuration\n  - Image upload with Multer\n  - Database seed\n\n- Client\n\n  - React client with functional components and Hooks\n  - Redux state management with Thunk for async actions\n  - CSS agnostic, so you don't waste your time replacing my CSS framework with yours\n  - Home, Users, Profile, Admin, Notfound, Login and Register pages\n  - Protected routes with Higher order components\n  - Different views for unauthenticated, authenticated and admin user\n  - Edit/Delete forms for Message and User with Formik and Yup validation\n  - Admin has privileges to edit and delete other users and their messages\n  - Layout component, so you can have pages without Navbar\n  - Loading states with Loader component\n  - Single config file within `/constants` folder\n\n## Installation\n\nRead on on how to set up this for development. Clone the repo.\n\n```\n$ git clone https://github.com/nemanjam/mern-boilerplate.git\n$ cd mern-boilerplate\n```\n\n### Server\n\n#### .env file\n\nRename `.env.example` to `.env` and fill in database connection strings, Google and Facebook tokens, JWT secret and your client and server production URLs.\n\n```\n#db\nMONGO_URI_DEV=mongodb://localhost:27017/mernboilerplate\nMONGO_URI_PROD=\n\n#google\nGOOGLE_CLIENT_ID=\nGOOGLE_CLIENT_SECRET=\nGOOGLE_CALLBACK_URL=/auth/google/callback\n\n#facebook\nFACEBOOK_APP_ID=\nFACEBOOK_SECRET=\nFACEBOOK_CALLBACK_URL=/auth/facebook/callback\n\n#jwt\nJWT_SECRET_DEV=secret\nJWT_SECRET_PROD=\n\n#site urls\nCLIENT_URL_DEV=https://localhost:3000\nCLIENT_URL_PROD=https://mern-boilerplate-demo.herokuapp.com\nSERVER_URL_DEV=https://localhost:5000\nSERVER_URL_PROD=https://mern-boilerplate-demo.herokuapp.com\n\n#img folder path\nIMAGES_FOLDER_PATH=/public/images/\n```\n\n#### Generate certificates\n\nFacebook OAuth requires that your server runs on `https` in development as well, so you need to generate certificates. Go to `/server/security` folder and run this.\n\n```\n$ cd server/security\n$ openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cert.key -out cert.pem -config req.cnf -sha256\n```\n\n#### Install dependencies\n\n```\n$ cd server\n$ npm install\n```\n\n#### Run the server\n\nYou are good to go, server will be available on `https://localhost:5000`\n\n```\n$ npm run server\n```\n\n### Client\n\nJust install the dependencies and run the dev server. App will load on `https://localhost:3000`.\n\n```\n$ cd client\n$ npm install\n$ npm start\n```\n\nThat's it as far for development setup. For production check the `Deployment on Heroku` section.\n\n## Screenshots\n\n![Screenshot1](/screenshots/Screenshot_1.png)\n\n![Screenshot2](/screenshots/Screenshot_2.png)\n\n![Screenshot3](/screenshots/Screenshot_3.png)\n\n![Screenshot4](/screenshots/Screenshot_4.png)\n\n![Screenshot5](/screenshots/Screenshot_5.png)\n\n![Screenshot6](/screenshots/Screenshot_6.png)\n\n## Deployment on Heroku\n\n#### Push to Heroku\n\nThis project is already all set up for deployment on Heroku, you just need to create Heroku application add heroku remote to this repo and push it to `heroku` origin.\n\n```\n$ heroku login\n$ heroku create my-own-app-name\n$ git remote add heroku https://git.heroku.com/my-own-app-name.git\n$ git push heroku master\n$ heroku open\n```\n\n#### Database setup\n\nBut before that you need MongoDB database, so go to [MongoDB Atlas](https://www.mongodb.com/cloud/atlas), create cluster, whitelist all IPs and get database URL. Set that URL in `.env` file as `MONGO_URI_PROD`.\n\n```\nMONGO_URI_PROD=mongodb+srv://\u003cyour-username-here\u003e:\u003cyour-password-here\u003e@cluster0-abcd.mongodb.net/test?retryWrites=true\u0026w=majority\n```\n\nIf you don't insert environment variables in Heroku manually via web interface or console you'll need to remove `.env` file from `server/.gitignore` and push it to Heroku. Never push `.env` file to development repo though.\n\n```\n...\n#.env #comment out .env file\n...\n```\n\nIn the following section you can read detailed instructions about Heroku deployment process.\n\n### Server setup\n\n#### Development\n\nServer uses Babel so that we can use the same newer JavaScript syntax like the one used on the Client. In development we are passing `server/src/index.js` file to `babel-node` executable along with `nodemon` daemon. We run that with `npm run server` script.\n\n```\n\"server\": \"nodemon --exec babel-node src/index.js\",\n```\n\n#### Production\n\nThat is fine for development, we compile the source on every run but for production we want to avoid that and to compile and build code once to JavaScript version which Node.JS can execute. So we take all the code from `/server/src` folder compile it and put the output into `/server/build` destination folder. `-d` is short for destination, and `-s` flag is for sourcemaps for debugging. We make that into `build-babel` script.\n\n```\n\"build-babel\": \"babel -d ./build ./src -s\",\n```\n\nWe also need to delete and make `build` folder on every deployment, so we do that with this simple script.\n\n```\n\"clean\": \"rm -rf build \u0026\u0026 mkdir build\",\n```\n\nNow we have everything to build our server code. We do that by calling 2 last scripts.\n\n```\n\"build\": \"npm run clean \u0026\u0026 npm run build-babel\",\n```\n\nNow we just need to call build script and run compiled file with node. Make sure Babel is in the production dependencies in the `server/package.json` or you'll get \"babel is not defined\" error on Heroku.\n\n```\n\"start-prod\": \"npm run build \u0026\u0026 node ./build/index.js\",\n```\n\n#### Running server on Heroku\n\nOur server is now all set up, all we need is to call `start-prod` script. Heroku infers runtime he needs to run the application by the type of dependencies file in the root folder, so for Node.JS we need another `package.json`. Heroku will call `start` script after building phase so we just need to pass our `start-prod` script to spin up the server with the `--prefix server` where `server` is folder in which `package.json` with that script is located.\n\n```\n\"start\": \"npm run start-prod --prefix server\",\n```\n\n#### Installing dependencies\n\nBefore all this happens Heroku needs to install the dependencies for both server and client, `heroku-postbuild` script is meant for that. `NPM_CONFIG_PRODUCTION=false` variable is there to disable production environment while dependencies are being installed. Again `--prefix` flag is specifying the folder of the script being run. In this script we build our React client as well.\n\n```\n\"heroku-postbuild\": \"NPM_CONFIG_PRODUCTION=false npm install --prefix server \u0026\u0026 npm install --prefix client \u0026\u0026 npm run build --prefix client\"\n```\n\n### Client Setup\n\nBefore you push to production you'll need to set your URLs in `client/constants`. That's it.\n\n```javascript\nexport const FACEBOOK_AUTH_LINK =\n  \"https://my-own-app.herokuapp.com/auth/facebook\";\nexport const GOOGLE_AUTH_LINK = \"https://my-own-app.herokuapp.com/auth/google\";\n```\n\n## References\n\n- Brad Traversy [Dev connector 2.0](https://github.com/bradtraversy/devconnector_2.0)\n- Brad Traversy [Learn The MERN Stack Youtube playlist](https://www.youtube.com/watch?v=PBTYxXADG_k\u0026list=PLillGF-RfqbbiTGgA77tGO426V3hRF9iE)\n- Thinkster [react-redux-realworld-example-app](https://github.com/gothinkster/react-redux-realworld-example-app)\n- Thinkster [\n  node-express-realworld-example-app ](https://github.com/gothinkster/node-express-realworld-example-app)\n- Quinston Pimenta [Deploy React with Node (Express, configured for ES6, Babel) to Heroku (without babel-node)](https://www.youtube.com/watch?v=mvI25HLDfR4)\n\n- Kim Nguyen [How to Deploy ES6 Node.js \u0026 Express back-end to Heroku](https://medium.com/@kimtnguyen/how-to-deploy-es6-node-js-express-back-end-to-heroku-7e6743e8d2ff)\n\n## Licence\n\n### MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Fmern-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnemanjam%2Fmern-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Fmern-boilerplate/lists"}