jpa03 : Spring Boot and Heroku Hello World

num ready? description assigned MW lect due MW lect assigned TR lect due TR lect
jpa03 true Spring Boot and Heroku Hello World Wed 01/19 12:30PM Fri 01/28 11:59PM

If you run into problems, let us know on the jpa03-help channel on the slack.

This is an individual lab on the topic of deploying Java web apps that use OAuth and Databases, using Heroku.

You may cooperate with one or more pair partners from your team to help in debugging and understanding the lab, but each person should complete the lab separately for themselves.

Preliminaries

We assume that you already created a Heroku account for jpa02.

We also assume that you are familiar with the material in jpa02 concerning the following items; consult jpa02 if you find while doing the lab that you need a refresher on any of these:

Also, if you are working on your own machine, you need the same software that was needed for jpa02, namely:

Since this is our first time working with frontend React code, you’ll also need to setup the following:

See guides for installing these on your machine at the links shown:

Step 1: Understanding what we are trying to do

What are we trying to accomplish in this lab?

This lab, similar to jpa02 has no programming; just like jpa02 the task is simply to deploy an app on localhost and on Heroku. This time, however, instead of a simple Hello World type app, the app you are deploying is a full-stack web app with:

The reason we are doing this lab is that before you can work on a full-stack legacy code webapp, you need to know how to deploy such an app, i.e. get it running.

There are quite a few configuration steps that are needed, and we want to get you used to those before we start introducing the coding challenges as well.

Step 2: Create your repo

You should already have a repo under the course organization ucsb-cs156-w22 called jpa03-githubid created for you by the staff, where github is your github id.

If not, create one for yourself following that naming convention; it should initially be private, and empty (no README, license or .gitignore.)

Clone that repo somewhere and cd into it.

Then add this remote:

git remote add starter https://github.com/ucsb-cs156-w22/demo-spring-react-example

That sets up starter as a remote with the code from this github repo: https://github.com/ucsb-cs156-w22/demo-spring-react-example

Then do:

git checkout -b main
git pull starter main
git push origin main

Step 3: Configure your app as documented in the README.md

The next step is to read through the README.md and configure your app as indicated there.

This includes configuration for Auth0, and GitHub Actions (the CODECOV_TOKEN).

The configuration step includes copying the .env.SAMPLE file to .env.

The .env file should not be committed to GitHub.

The instruction to configure this app for OAuth are linked to from the README.md in the starter repo itself, so will not repeat them here. Follow those instructions (which may, in turn, refer you to instruction inside the docs folder of the repo.)

These instructions include setting up OAuth using your UCSB Google Account.

About OAuth

OAuth is a protocol that allows you to delegate the login/logout functionality (user authentication) to a third party such as Google, Facebook, GitHub, Twitter, etc. If you’ve ever used a website that allows you to “Login with Google” or “Login With Facebook”, then chances are good that app was built using OAuth.

Indeed, you’ve already encountered two examples of GitHub OAuth earlier in the course:

Follow the instructions in the README

The instructions in the README include instructions for deploying to both localhost, and to Heroku. Follow those instructions, consulting the material below and the material in jpa02 as needed, until you have the application working on both localhost and Heroku.

You’ll be following this sequence of instructions many times during this course, so this assignment is here to help you get used to that process.

Also set up the GitHub Actions secrets

In the file docs/github-actions.md there are instructions for configuring GitHub Actions so that it runs the tests for both the JavaScript and Java code in the repo.

You should follow these instructions to get the CI/CD pipeline set up so that you have a green check, and not a red X, on the main branch of your repo.

Reminder about running your web app on localhost

To get this demo app running on localhost, we need to do the following:

The mvn spring-boot:run command is a shortcut that is provided for us to be able to run the jar file. It does pretty much the same thing as if we ran the .jar file and specified the class containing our main on the command line.

When the app is up and running, try logging in with your UCSB Google Account.

Step 4: Create a new Heroku App using the Heroku CLI

In this step, we’ll deploy our Spring Boot application to the public internet using Heroku.

As part of the setup instructions, you likely already set up a Heroku application with the name jpa03-ucsbnetid.

You should now be able to link this app to your repo and deploy the main branch, provided you did all the other setup steps correctly.

What if it doesn’t work?

If it doesn’t work, consult the troubleshooting steps in jpa02 and try them before asking a mentor, TA, or instructor for help.

Step 5: Set up Storybook repos

You will now need to set up two repos manually.

You’ll create these repos under the course organization ucsb-cs156-w22. Be sure that owner says ucsb-cs156-w22 and not your personal github id when you create these.

The names should be the name of your jpa03 repo (e.g. jpa03-cgaucho) followed by:

Then follow the steps in the docs/storybook.md file in your original jpa03 repo.

This will allow you to set up the storybook for your repository.

In the original jpa03 repo, you may need to do a push to the main branch, and or a pull request to trigger the GitHub actions scripts that set up the storybook.

When you are finished, update the links in the README.md file so that they point to your storybook repos:

Before:

* Production: <https://ucsb-cs156-w22.github.io/demo-spring-react-example-docs/storybook>
* QA:  <https://ucsb-cs156-w22.github.io/demo-spring-react-example-docs-qa/storybook>

After (with your URLs)

* Production: <https://ucsb-cs156-w22.github.io/jpa03-cgaucho-docs/storybook>
* QA:  <https://ucsb-cs156-w22.github.io/jpa03-cgaucho-docs-qa/storybook>

Make sure that the links work.

Step 6: Submitting your work for grading

When you have a running web app, visit https://gauchospace.ucsb.edu/courses/mod/assign/view.php?id=824178&forceview=1 and make a submission.

In the text area, enter something like this, substituting your repo name and your Heroku app name:

repo name: https://github.com//jpa03-chrislee123

on heroku: https://jpa03-chrislee123.herokuapp.com

Then, and this is super important, please make both of those URLs clickable urls.

The instructions for doing so are here: https://ucsb-cs156.github.io/topics/gauchospace_clickable_urls/

Grading Rubric: