heroku-demo
A basic guide to setting up a project hosted on Heroku with a PostgreSQL database using Giovanna Aveiro's and OliverJam's tutorial for Founders & Coders Bootcamp, FAC22 cohort during Authentication week.
Table of contents
- Setup project
- Setup local postgres database
- Setup Heroku CLI
- Deploy your project on Heroku
- Deploy your PostgreSQL database on Heroku
- Setup Team on Heroku
- Debugging in Heroku
- Delete App
- Resources
Setup project
- Initialise git hub repo, with README & gitignore file (using node template)
- Clone repo and open in VSCode
- Install package.json, dependencies and devDependencies (express, pg, dotenv, bcryptjs, cookie-parser, nodemon, cypress)
- Add automated server and cypress scripts to package.json.
- Update gitignore file with .DS_Store file
- Add Procfile in root directory of app to explicitly declare what command should be executed to start your app.
web: npm start
- Add project files
- server.js
- layout.js
- auth.js*
- example.env*
- public* (styles.css)
- routes* (homes.js, logIn.js, logOut.js, posts.js, signUp.js)
- database* (connection.js, init.sql, model.js)
- scripts* (create_db, populate_db)
- These files can be created after the app is deployed on Heroku, otherwise you will run into errors such as
Error: Please set the DATABASE_URL environment variable (/app/database/connection.js:9:9).
Setup local postgres database
Use Oliverjam's Express Postgres Example tutorial
a) Copy and paste code from create_db & populate_db files into your project
(i) Amend file path of init.sql file in populate_db file L17 to
./database/init.sql
(ii) Do NOT change any code in create_db file
b) In the terminal run the following commands to allow permissions on each file to make them executable:
chmod +x ./scripts/create_db
chmod +x ./scripts/populate_db
c) In terminal run script commands (Note add the name of your db . This will dynamically input this name into all of the locations
./scripts/create_db <here>
(ii) Once you have a designed your database (init.sql), run the following command to populate your local db;
./scripts/populate_db
Setup Heroku CLI
(Back to top) I followed Heroku Dev Center's guide.
- Check to see if you have heroku installed on your terminal
heroku --version
- Install heroku
npm install -g heroku
- Log in to heroku CLI
heroku login
You’ll be prompted to enter any key to go to your web browser to complete login. The CLI will then log you in automatically.
Deploy your project on Heroku
- Sign up/log in to Heroku.
Create app
- Top right of dashboard screen click
New>Create new app> Add app name >Europe(if in uk)>Create app
There are two ways you can deploy your app; via Herouku CLI or GitHub in the Deploy section.
Connect to github
- Under
Deployment methodclickGitHuband underConnect to Githubsearch and select your project repo - Next section
Automatic deploysclickEnable Automatic Deploys- This will automatic rebuild and deploy your app on Heroku with every push to main branch of your repository.
- For the first deployment you need to deploy manually.
- Under
Manual deployclickDeploy Branch - You will be able to see the build log
- Under
- Once app has successfully deployed you will see a
Viewbutton which will open your app in another tab!
Heroku Git using Heroku CLI
To use this method you must have installed Heroku CLI and follow these step. 
Deploy your PostgreSQL database on Heroku
Add Postgres database
Under Resources section under Add-ons search Heroku Postgres > Hobby Dev - Free > Provision Now you should see a tab under the Add-onssearch bar labelled Heroku Postgres
Connect to the database
Under Setting section > Config Vars section > Revel Config Vars > copy DATABASE_URL string. Note here is where you can also add API keys, tokens(cookie secrets) and environment variables & . Insert PGSSLMODE='no-verify' where PGSSLMODE is KEY and no-verify is VALUE. In the terminal connect your database(init.sql) to your production(Heroku) postgres database:
psqlDATABASE_URL_FROM_HEROKU`\i database/init.sql- You now have access/can query data from your heroku production database from your terminal.
View Postgres database
Under Resources section you should see a tab under the Add-onssearch bar labelled Heroku Postgres
If you click on it you another tab will open showing data about your database (below is an example).
Setup Team on Heroku
There are two ways:
AccesstabOverviewtab > underCollaborator activityclick onManage Access
Add collaborator > insert email > Save changes > ask team mate to check email > Accept Invitation Team mate now has access to Heroku app and add-ons.
Delete collaborator
Under Access tab click on the pen emoji next to the collaborator you wish to remove. Click Delete collaborator > Confirm
Debugging in Heroku
In the terminal
Run command
heroku logs --app=your-app-name --tail
In Heroku
Top right hand corner > More > View logs Here you can view your build logs especially handy when debugging!
Delete App
Settings tab > bottom of page Delete App > Enter your app's name > Delete app
Resources
- An Absolute Beginner Guide to Node Package Manager
- How to set up a free PostgreSQL database on Heroku
- Deploy PostgreSQL in Node.js to Heroku for beginners
- FAC21 Week 6 Authentication group project - Checkin'
- Getting Started on Heroku with Node.js - Procfile
- Heroku Postgres
- The Heroku CLI Installation
1 Dec 21, 2021
36 Dec 25, 2022
25 Dec 9, 2022
4 Feb 22, 2022
5 Jul 22, 2022
8k Jan 4, 2023
105 Dec 15, 2022
17 Dec 23, 2021
0 Sep 5, 2022
9 Dec 18, 2022
10 Sep 17, 2022
10 Dec 17, 2022
791 Dec 14, 2022
26 Oct 25, 2022
27 Dec 24, 2022
46 Jan 2, 2023
105 Jan 2, 2023