Stephen Grider – Fullstack React

Section 2 – Server side

New project: - new folder - npm init - npm install --save express



Express server setup:const express = require('express') const app = express() app.get('/', (req,res) => { res.send( )} ) app.listen()


Heroku deployment
– dynamic port
– specify node version, package.json “engine”: {“node”:”12.1.0″, “npm”: “6.13.0”}
– specify start script “scripts”: {“start”:”npm server/index.js”
– add .gitignore, to exclude the “node_modules” folder

First time git commit
– git –version, install git at git-scm.com
– heroku -v, install,
– heroku login
– heroku create, create an app on heroku with a random name
– git init/add ./commit -m “”
– git remote add heroku [git link]
– git push heroku master, push from master to heroku branch

Subsequent commit:
– git status/ add . / commit -m “” / push heroku master /logs



–
Section 3 – OAuth

PassportJS, passportjs.org
install 2 types of packages: passport & passport strategies (facebook, google, etc.)

Google API, console.developers.google.com
A few steps to get API, 1. create project, 2. create Oauth consent screen, 3. create Credentials Client ID, and maybe 4. Add authorized redirect URI

In dev environment, save sensitive data like clientID, secret key in a .js file with module.exports, then import to use when needed
in prod environment, use env variableskey.js file module.exports = {object}1. Require passport, passport strategy Google, and google secret keys, note the .Strategy.
The call back will have access to accessCode,refreshToken,profile,done
i.e (accessCode,r,p,d) => {console.log(accessCode)}2. Set up the routes


Section 4 – Adding MongoDBNodemon setup
npm i nodemon

Refactoring, require(file) will run all the script in that file

MongoDB stuff:
Create mongoDB atlas free tier account
Install mongoose
Create mongoose Model with Schema
create model like above,
use model by const User = mongoose.model(‘users’), single argument = using
we can then use mongoose queries .save(), .find() on User

Anytime we reach out to Mongo, it is always an asynchronous action, need to await3. After setting up mongo, now we add the logic flow to identify user and create new user.

The Passport done(error return, success return) function, to be called when finishing the auth process4. Serialize & Deserialize functions to tell passport what to save as cookie and identify user for subsequent requests.

5. npm install cookie-session
middleware, auto pass and get info to/from cookie https://www.npmjs.com/package/cookie-session6. config passport to use cookieSession
import Passport and cookie-session at the top
add 3 app.use() with above configs7. Any subsequent request will run like this.
result of deserialize function is added to req.user
passport also attaches some other stuff to req object, such as the logout function

8. logout, if visit the url below:
app.get(‘api/logout’, (req,res) => { req.logout() })

Section 5







install concurrently to run 2 terminal script (server & client) at the same time

specifying different domains (due to relative links) for server (local5000) and client(local3000) by using proxy in package.json. This problem only exists in development environment, in production we build react app with webpack and babel into 1 big file so there is no separate create-react-app server.

React router exact={true} path match

a