From 71d69080def204143621a2914266a772b9893213 Mon Sep 17 00:00:00 2001 From: Baljeet Singh <74047381+Baljeet9670@users.noreply.github.com> Date: Wed, 28 Jul 2021 02:29:00 +0530 Subject: [PATCH] Update README.md --- README.md | 182 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) diff --git a/README.md b/README.md index b5a1851..30bdf78 100644 --- a/README.md +++ b/README.md @@ -1 +1,183 @@ # BaljeetVerse-Social-Plateform + +> Social network for developers + +This is a MERN stack application from the "MERN Stack Front To Back". It is a small social network app that includes authentication, profiles and forum posts. +[Here](https://baljeetverse.herokuapp.com/) is the link of website. + +# Quick Start 🚀 + +### Add a default.json file in config folder with the following + +``` +{ + "mongoURI": "", + "jwtSecret": "secret", + "githubToken": "" +} +``` + +### Install server dependencies + +```bash +npm install +``` + +### Install client dependencies + +```bash +cd client +npm install +``` + +### Run both Express & React from root + +```bash +npm run dev +``` + +### Build for production + +```bash +cd client +npm run build +``` + +### Test production before deploy + +After running a build in the client 👆, cd into the root of the project. +And run... + +Linux/Unix +```bash +NODE_ENV=production node server.js +``` +Windows Cmd Prompt or Powershell +```bash +$env:NODE_ENV="production" +node server.js +``` + +Check in browser on [http://localhost:5000/](http://localhost:5000/) + +### Deploy to Heroku + +If you followed the sensible advice above and included `config/default.json` and `config/production.json` in your .gitignore file, then pushing to Heroku will omit your config files from the push. +However, Heroku needs these files for a successful build. +So how to get them to Heroku without commiting them to GitHub? + +What I suggest you do is create a local only branch, lets call it _production_. + +```bash +git checkout -b production +``` + +We can use this branch to deploy from, with our config files. + +Add the config file... + +```bash +git add -f config/production.json +``` + +This will track the file in git on this branch only. **DON'T PUSH THE PRODUCTION BRANCH TO GITHUB** + +Commit... + +```bash +git commit -m 'ready to deploy' +``` + +Create your Heroku project + +```bash +heroku create +``` + +And push the local production branch to the remote heroku main branch. + +```bash +git push heroku production:main +``` + +Now Heroku will have the config it needs to build the project. + +> **Don't forget to make sure your production database is not whitelisted in MongoDB Atlas, otherwise the database connection will fail and your app will crash.** + +After deployment you can delete the production branch if you like. + +```bash +git checkout main +git branch -D production +``` + +Or you can leave it to merge and push updates from another branch. +Make any changes you need on your main branch and merge those into your production branch. + +```bash +git checkout production +git merge main +``` + +Once merged you can push to heroku as above and your site will rebuild and be updated. + +--- + +## Fix broken links in gravatar 🔗 + +There is an unresolved [issue](https://github.com/emerleite/node-gravatar/issues/47) with the [node-gravatar](https://github.com/emerleite/node-gravatar#readme) package, whereby the url is not valid. Fortunately we added normalize-url so we can use that to easily fix the issue. If you're not seeing Gravatar avatars showing in your app then most likely you need to implement this change. + +## Redux subscription to manage local storage 📥 + +The rules of redux say that our [reducers should be pure](https://redux.js.org/basics/reducers#handling-actions) and do just one thing. + +If you're not familiar with the concept of pure functions, they must do the following.. + +1. Return the same output given the same input. +2. Have no side effects. + +So our reducers are not the best place to manage local storage of our auth token. +Ideally our action creators should also just dispatch actions, nothing else. So using these for additional side effects like setting authentication headers is not the best solution here. + +Redux provides us with a [`store.subscribe`](https://redux.js.org/api/store#subscribelistener) listener that runs every time a state change occurs. + +We can use this listener to **_watch_** our store and set our auth token in local storage and axios headers accordingly. + +- if there is a token - store it in local storage and set the headers. +- if there is no token - token is null - remove it from storage and delete the headers. + +The subscription can be seen in [client/src/store.js](https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/store.js) + +We also need to change our [client/src/utils/setAuthToken.js](https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/utils/setAuthToken.js) so it now handles both the setting of the token in local storage and in axios headers. + +With those two changes in place we can remove all setting of local storage from [client/src/reducers/auth.js](https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/reducers/auth.js). And remove setting of the token in axios headers from [client/src/actions/auth.js](https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/actions/auth.js). This helps keep our code predictable, manageable and ultimately bug free. + +## Log user out on token expiration 🔐 + +If the Json Web Token expires then it should log the user out and end the authentication of their session. + +We can do this using a [axios interceptor](https://github.com/axios/axios#interceptors) together paired with creating an instance of axios. +The interceptor, well... intercepts any response and checks the response from our api for a `401` status in the response. +ie. the token has now expired and is no longer valid, or no valid token was sent. +If such a status exists then we log out the user and clear the profile from redux state. + +Note that implementing this change also requires that you use the updated code in [utils/setAuthToken.js](https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/utils/setAuthToken.js) +Which also in turn depends on [utils/api.js](https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/utils/api.js) +I would also recommending updating to use a [ redux subscription ](https://github.com/bradtraversy/devconnector_2.0#redux-subscription-to-manage-local-storage-) to mange setting of the auth token in headers and local storage. + +--- + + +## App Info + +### Author + +Baljeet Singh + +### Version + +2.0.0 + +### License + +This project is licensed under the MIT License