[Solved] SDEV Lab 10-Heroku Website

Download the template and make sure you extract the files before using them.

5/5 – (1 vote)

This lab will go over the steps needed to host our Node.js website and PostgreSQL database on Heroku. This lab is a walk through lab where the main focus is to ensure you can host your group project online. To receive credit for this lab, you MUST complete steps 1 and 3 in recitation and get marked off by your TA. You must upload lab_10_link.txt to Canvas by the deadline.

Est. Time ⏱
0 minutes

NOTE: This lab is due next week Friday, 22nd Nov by 11:59pm.

IMPORTANT: Make sure you are logged into UCB Wireless, not UCB Guest. Otherwise the heroku pg:psql commands will fail !!

Lab Overview

Mark Complete Expand

The abbreviated steps for todays lab are as follows:

1. Regsiter for Heroku
2. Create a new Heroku App
3. Install Heroku CLI
4. Upload the completed Node.js code to Heroku
5. Setup PostgreSQL database on Heroku
6. Submit a link to your Heroku App to Canvas

1. Setup Heroku App

• Register Heroku Account

---

• Create a New App

---

---

• Upload Node.js Website Code to Heroku

---

Go to Herokus Registration page here and create an account.

Click on Create New App

Name your app, there is no required name here because every student submission will need to be a unique name.

Once you have named your app, youll be shown your Heroku Apps Dashboard.

To upload your code to Heroku, youll need to install the Heroku CLI.For Linux:

sudo snap install --classic heroku

For Windows/Mac users, go here to download the installer.

Follow the directions for your App Dashboard for connecting your websites code to heroku.

IMPORTANT: Make sure that you follow the instructions from WITHIN the complete_student_site directory. If you havent already, download the complete_student_site.zip file and unzip it to your local machine.

ALTERNATIVE: If the website you created in Lab 7 is working perfectly and there are no errors, you can upload it to Heroku instead of the complete_student_site we provided.

heroku login

git initheroku git:remote -a pick-unique-name-here

git add .git commit -am "Initial Setup"git push heroku master

2. Setup Heroku PostgreSQL Database

Mark Complete Expand

(30 Minutes)

• Add a Heroku Resource

• Connect to Heroku PostgreSQL Database

Make sure to replace pick-unique-name-here with the name of your actual heroku app.

heroku pg:psql -a pick-unique-name-here 

• Create the Database Tables

Copy the following code into psql terminal to create the football_player, footbal_games, and favorite_colors tables and populate them with data.

DROP TABLE football_games;CREATE TABLE IF NOT EXISTS football_games (  visitor_name VARCHAR(30),       /* Name of the visiting team                     */  home_score SMALLINT NOT NULL,   /* Final score of the game for the Buffs         */  visitor_score SMALLINT NOT NULL,/* Final score of the game for the visiting team */  game_date DATE NOT NULL,        /* Date of the game                              */  players INT[] NOT NULL,         /* This array consists of the football player ids (basically a foreign key to the football_player.id) */  PRIMARY KEY(visitor_name, game_date) /* A game's unique primary key consists of the visitor_name & the game date (this assumes you can't have multiple games against the same team in a single day) */);DROP TABLE football_players;CREATE TABLE IF NOT EXISTS football_players(  id SERIAL PRIMARY KEY,       /* Unique identifier for each player (it's possible multiple players have the same name/similiar information) */  name VARCHAR(50) NOT NULL,   /* The player's first & last name */  year VARCHAR(3),             /* FSH - Freshman, SPH - Sophomore, JNR - Junior, SNR - Senior */  major VARCHAR(4),            /* The unique 4 character code used by CU Boulder to identify student majors (ex. CSCI, ATLS) */  passing_yards SMALLINT,      /* The number of passing yards in the players entire football career  */  rushing_yards SMALLINT,      /* The number of rushing yards in the players entire football career  */  receiving_yards SMALLINT,    /* The number of receiving yards in the players entire football career*/  img_src VARCHAR(200)         /* This is a file path (absolute or relative), that locates the player's profile image */);INSERT INTO football_games(visitor_name, home_score, visitor_score, game_date, players)VALUES('Colorado State', 45, 13, '20180831', ARRAY [1,2,3,4,5]),('Nebraska', 33, 28, '20180908', ARRAY [2,3,4,5,6]),('New Hampshire', 45, 14, '20180915', ARRAY [3,4,5,6,7]),('UCLA', 38, 16, '20180928', ARRAY [4,5,6,7,8]),('Arizona State', 28, 21, '20181006', ARRAY [5,6,7,8,9]),('Southern California', 20, 31, '20181013', ARRAY [6,7,8,9,10]),('Washington', 13, 27, '20181020', ARRAY [7,8,9,10,1]),('Oregon State', 34, 41, '20181027', ARRAY [8,9,10,1,2]),('Arizona', 34, 42, '20181102', ARRAY [9,10,1,2,3]),('Washington State', 7, 31, '20181110', ARRAY [10,1,2,3,4]),('Utah', 7, 30, '20181117', ARRAY [1,2,3,4,5]),('California', 21, 33, '20181124', ARRAY [2,3,4,5,6]);INSERT INTO football_players(name, year, major, passing_yards, rushing_yards, receiving_yards, img_src)VALUES('Cedric Vega', 'FSH', 'ARTS', 15, 25, 33, '../resources/img/player1.jpg'),('Myron Walters', 'SPH', 'CSCI', 32, 43, 52, '../resources/img/player2.jpg'),('Javier Washington', 'JNR', 'MATH', 1, 61, 45, '../resources/img/player3.jpg'),('Wade Farmer', 'SNR', 'ARTS', 14, 55, 12, '../resources/img/player4.jpg'),('Doyle Huff', 'FSH', 'CSCI', 23, 44, 92, '../resources/img/player5.jpg'),('Melba Pope', 'SPH', 'MATH', 13, 22, 45, '../resources/img/player6.jpg'),('Erick Graves', 'JNR', 'ARTS', 45, 78, 98, '../resources/img/player7.jpg' ),('Charles Porter', 'SNR', 'CSCI', 92, 102, 125, '../resources/img/player8.jpg'),('Rafael Boreous', 'JNR', 'MATH', 102, 111, 105, '../resources/img/player9.jpg'),('Jared Castillo', 'SNR', 'ARTS', 112, 113, 114, '../resources/img/player10.jpg');DROP TABLE favorite_colors;CREATE TABLE IF NOT EXISTS favorite_colors(  hex_value VARCHAR(6) PRIMARY KEY, /* This is the hexvalue for the color, it assumes that the value DOES NOT # */  name VARCHAR(50),                 /* The html safe name for the color.  This can be null */  color_msg  TEXT NOT NULL          /* A message describing the chosen color */);INSERT INTO favorite_colors(hex_value, name, color_msg)VALUES('FF6347', 'TOMATO', 'This color gets it name from the red fruit that at one time was considered poisonous!'),('3CB371', 'Medium Sea Green', 'Not sure what the difference is between Small & Large Sea Green... but I guess this one is in between them.'),('EE82EE','Violet', 'Roses are Red, Violets are blue...'),('545AA7','Liberty', 'Not to be confused with the color of the Liberty Bell (which is indeed a copper color)');INSERT INTO favorite_colors(hex_value, color_msg)VALUES('FF2727', 'An unnamed red color'),('27FF27', 'An unnamed green color'),('870087', 'An unnamed magenta color'),('8F8FFF', 'An unnamed blue color');

• Exit the psql terminal

 q

• Head to your Apps Homepage

On your Heroku Apps Dashboard, click the Open App Button to open your Apps webpage in a new tab.

To create a PostgreSQL database, youll need to first add a new Heroku Resource. Select the Heroku Resource tab and type in postgres to find the Heroku Postgres Resource.

3. Submission Guidelines

Mark Complete Expand

• Create a link to your Heroku App

In a text file (lab_10_link.txt), write down the following:

1. Your name
2. You partners name (if you have one)
3. The link to your Heroku App

---