#Netlify link https://mk-full-store-app.netlify.app #Heroku back-end link https://mk-cta-be.herokuapp.com/

• select use this template
• clone this repo

├── README.md (what you are currently reading)
├── back-end (a basic express app)
├── front-end (a basic create-react-app)
└── package.json (necessary boilerplate for heroku deployment )

NOTE: - You will have 3 package.json files in this project

• Top level - necessary for heroku deployment: you don't need to do anything with this file, it is set up for you
• back-end - everything to do with the express/postgres backend
• front-end - everything to do with the create-react-app front-end

/back-end

• cd back-end
• npm install
• touch .env

make sure you are on the same level as the package.json of the back-end directory

• touch .env

PORT=3333
PG_HOST=localhost
PG_PORT=5432
PG_DATABASE=postgres
PG_USER=postgres
PG_PASSWORD=""

• npm run db:init
• npm run db:seed

Test app locally. If it does not work locally, it will not work on Heroku.

Fix bugs.

When ready:

• heroku create
• git add .
• git commit -m 'heroku deployment
• git push heroku main - if this does not work, go to heroku dashboard => deployment and add the remote

ie heroku git:remote -a <your-heroku-app-name>

Open your heroku app. You should see the Hello, world! message.

In the heroku dashboard, go to Overview choose configure add ons

In the search bar Quickly add add-ons - search for postgres - choose heroku postgres

• Choose hobby dev
• Note: even though hobby dev is free, you may be required to provide a credit card
• In new view, click on heroku Postgres / attached as DATABASE => Settings

You will need to make these key value pairs in your heroku app

IMPORTANT The keys must match perfectly with what is in your db/dbConfig.js file and your local .env

• Open a new tab/window and go to the main page of your heroku app choose settings
• Reveal Config Variables
• Add the variables

Note: these are false credentials and given for example only:

PG_HOST=ec2-55-227-246-76.compute-1.amazonaws.com
PG_PORT=5432
PG_DATABASE=d9bq2bk2s4ilde
PG_USER=bcwmtakzkmkdxr
PG_PASSWORD=afb0a7a9396af1bac763154f5649e049ce280658bef0ded7efde6

• make sure you are on the same directory level as your package.json of your back-end directory

Go back to the heroku database view => settings

• copy Heroku CLI (something like heroku pg:psql postgresql-shaped-11685 --app mysterious-spires-49488)

• paste into your terminal

• it should open a pg shell

Run the following:

• update the \i ./db/prod_schema.sql with the PG_DATABASE value from Heroku
• \i ./db/prod_schema.sql
  • success should say CREATE TABLE
• update the \i ./db/prod_seed.sql with the PG_DATABASE value from Herkou
• \i ./db/prod_seed.sql
  • success should say INSERT 0 7
• \q

This will insert the test table with the days of the week.

Later, when you have build out your app to have your schema and seed data, you will:

• edit the db/schema.sql file to be your own
• edit th db/seed.sql file to be your own
• reopen this shell and rerun these commands.

Note you should set up the

/front-end

• cd front-end
• npm instal
• touch .env

Replace the URL given with your new heroku URL

.env

REACT_APP_API_URL=https://mysterious-spire-49483.herokuapp.com

• npm start

Make sure your back-end is still running. You should see an unordered list of the days of the week, coming from your back-end. If it does not work locally, it will not work when it is deployed. Keep debugging until it works

Go to netlify, choose New site from Git

• choose continuos deployment, GitHub.
• configure the netlify app on GitHub

Follow the prompts to add this project repo to Netlify Once, authorized, configure to launch app from

• Base directory: front-end
• Build command: npm run build
• Publish directory: build (may appear as front-end/build)
• add the environmental variable

Note: if you were starting your own create-react-app from scratch, in order to use react-router, you would need to add the file _redirects to /public

The content of the _redirects file should be

/* /index.html 200

More info