https://github.com/seanmayer/mern-example-project
Fullstack - React.js application with Node.js, Express.js & MongoDB (MERN), JWT
https://github.com/seanmayer/mern-example-project
express expressjs jwt nodejs react
Last synced: 3 months ago
JSON representation
Fullstack - React.js application with Node.js, Express.js & MongoDB (MERN), JWT
- Host: GitHub
- URL: https://github.com/seanmayer/mern-example-project
- Owner: seanmayer
- Created: 2021-12-08T06:20:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-20T06:16:31.000Z (about 3 years ago)
- Last Synced: 2025-01-16T03:49:49.413Z (4 months ago)
- Topics: express, expressjs, jwt, nodejs, react
- Language: JavaScript
- Homepage:
- Size: 1.91 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Project Example
Building a fullstack React.js application with Node.js, Express.js & MongoDB (MERN)
- MongoDB - document database
- Express(.js) - Node.js web framework
- React(.js) - a client-side JavaScript framework
- Node(.js) - the premier JavaScript web server
## Setting up a NodeJS Express Project
1. `npm init --prefix backend`
2. `npm install --save express body-parser --prefix backend`
3. `npm install --save-dev nodemon --prefix backend`
4. `npm start --prefix backend`
5. `npm install --save uuid --prefix backend`
6. `npm install --save express-validator --prefix backend`
7. `npm install --save axios --prefix backend`
8. `npm install dotenv --save --prefix backend`
9. `npm install --save mongoose --prefix backend`
10. `npm install --save mongoose-unique-validator --prefix backend`
11. `npm install --save multer --prefix backend`
12. `npm install --save bcryptjs --prefix backend`
13. `npm install --save jsonwebtoken --prefix backend`
### Finally... (for local development)
1. `npm start --prefix backend`
2. `npm start --prefix frontend` (don't forget to change package.json from `"start": "node app.js"` to `"start": "nodemon app.js"`)
## Testing Tools
### Backend testing
- Postman used for Node.js API testing
### Frontend testing
1. Test frontend locally -> Simple local server -> `npm install -g serve --prefix frontend` (can serve static site)
2. `cd frontend/build/`
3. `serve`
## Security Considerations
### JSON Web Token (JWT) is an open standard (RFC 7519) used for Authentication
- JWT uses HMAC alorifthm by default (HS256)
- Involves a combination of a hashing function and one (secret) key
- Shared between the two parties used to generate the hash that will serve as the signature
- Great care must be taken to protecting the key, becuase the same key is used to generate the signture and to perform validation
### Token is stored in local storage
- Cross-site scripting (XSS) vunerability, this is vunerable as the local storage used to persist the tokens is accessible to all JS on the same domain
- To note: React does have some protective measures in place for XSS
## Deployment
- Used dotenv to store environment variables for frontend
- Backend is using Heroku to source configured environment variables
### Frontend (React) - DEV testing
1. `npm run build` -> Optimises, provides only essentials (strips out debugging)
2. New build folder will be created with all files needed to deploy
### Backend (Express.js) - DEV testing
- Nodemon is used as tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory detected. (not to use in production environment)
### Backend (Express.js) - Heroku
- Create heroku app and use git to push changes 😀
### Standalone SPA Frontend (React) - Production with Google Firebase
1. `sudo npm install -g firebase-tools --prefix frontend`
2. `firbase login`
3. `firebase init` configuration below:
- `Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices` -> `Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys`
- `Please select an option:` -> `Create a new project`
- `What do you want to use as your public directory?` -> `build`
- `? Configure as a single-page app (rewrite all urls to /index.html)?` -> `Yes`
4. `firebase deploy`
### Combine Frontend & Backend (React) - Heroku
1. `npm run build --prefix frontend`
2. Create `public` folder in backend directory
3. Copy `frontend/build` contents to `backend/public`
4. `git add .`
5. `git commit -m "added react frontend"`
6. `git push heroku master`
#### Optimisation
- Code splitting is used to "lazy-load" to create code chunks as and when a user needs a certain component, this increases performance.
##### Example
Usage of Suspense -> `import React, { Suspense } from "react";`
Lazy load component -> `const Users = React.lazy(() => import("./user/pages/Users"));`
Suspense is used to handle loading of components:
```
return (
}
>
{routes}
);
};
```