TUT-REACT-CLOTHING

See live at https://aambayec-clothing.herokuapp.com

Start App

Client (only)

cd client
yarn
yarn start

Client and Backend

npm i -g nodemon
yarn dev

SASS

Check Node version support policy

# check your node version
nvm version

# e.g. if you have node v14.17.1 you should install node-sass v4.14.1

yarn add node-sass # or yarn add [email protected]

Updating Packages + Latest Version of React

Using Yarn

yarn upgrade

Using NPM

# Update all of the dependencies
npm update -D 

# If you see some vulnerabilities run:
npm audit fix
# then
npm install

React Router DOM

Installation

yarn add react-router-dom

withRouter is a Higher Order Component (HOC) - a function that takes a component and returns a new component. It adds the routing related props to the new component.

Troubleshooting Package Dependencies

E.g One package requires a specific version of babel-jest, add "resolutions" in package.json.

"resolutions": {
    "babel-jest": "24.7.1", 
}

Firebase

1. Create new project in firebase.

2. Create new </> web platform in your firebase project.

3. Take note of the SDK firebase config.

4. Add Authentication with google sign in provider and Email/Password.

5. Install firebase in your project source code.

   yarn add firebase

6. See code implementations in src/firebase.

Redux

yarn add redux redux-logger react-redux
yarn add redux-persist
yarn add redux-thunk
yarn add redux-saga

Reselect / Memoization

yarn add reselect

# memoize helper function
yarn add lodash.memoize

Stripe Checkout

yarn add react-stripe-checkout

Test credit card for payments: NO: 4242 4242 4242 4242 EXP: 10/29 CW: 123

Deploying in Heroku

Installing Heroku and Login

curl https://cli-assets.heroku.com/install.sh | sh
heroku --version
heroku login

Project Setup

heroku create aambayec-clothing --buildpack https://github.com/mars/create-react-app-buildpack.git
git push heroku main

# optional: heroku force push
git push heroku main --force

heroku config:set STRIPE_SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxx

heroku open

Linking Github to Heroku https://devcenter.heroku.com/articles/github-integration

Relinking a Heroku Git Project

# Get your app name here
heroku apps

# Setup git remote
heroku git:remote -a <heroku-app-name>

Get/Remove Heroku buildpacks

# get
heroku buildpacks
#remove
heroku buildpacks:remove https://github.com/mars/create-react-app-buildpack.git

Styled Components

yarn add styled-components