jpa03a : Spring Boot / React / OAuth Configuration on Render.com

num ready? description assigned MW lect due MW lect assigned TR lect due TR lect
jpa03a true Spring Boot / React / OAuth Configuration on Render.com Tue 04/12 12:30PM Thu 04/21 11:59PM

THIS IS AN “ALT VERSION” of jpa03

It is intended as a replacement for jpa03 for students that would like to try deploying jpa03 on Render.com instead of on Heroku.com

Instructions for jpa03

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 Render.com

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 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 Render.com. 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 1: Create an Account on Render.com

Visit https://render.com and click Sign Up.

You should see a screen like this one:

image

I encourage you to use either the GitHub or Google buttons to create your account, rather than signing up with a new Username/Password, but it’s your choice.

Step 2: Create your repo

You should already have a repo under the course organization ucsb-cs156-f22 called jpa03a-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-f22/STARTER-jpa03

That sets up starter as a remote with the code from this github repo: https://github.com/ucsb-cs156-f22/STARTER-jpa03

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 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.

The .env file should not be committed to GitHub

I already made this point, but I really, really want to emphasize it.

One of the values in the .env file is called a client secret for a reason.

If it leaks, it can be used for nefarious purposes to compromise the security of your account; so don’t let it leak!

Never, ever, commit those to GitHub, and try to only share them in DMs on Slack (not in public channels).

The same is true with Personal Access Tokens from GitHub (only more so!)

Security starts with making smart choices about how to handle credentials and tokens. The stakes get higher when you start being trusted with credentials and tokens at an employer, so learning how to handle these with care now is a part of developing good developer habits.

The staff reserve the right to deduct points if we find that you have committed your .env file to GitHub.

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 Render.com application and deploy your code

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

Step 4a: Create a Render.com application and link GitHub Repo

You can follow the instructions here to create a new app. Use the name jpa03-yourgithubid

https://ucsb-cs156.github.io/topics/render/deploying_any_repo_to_render.html

This should result in an app at the address https://jpa03-yourgithubid.onrender.com

Step 4b: Define environment variables

Under the left navigation on Render.com, you’ll see Environment

Select this, and for jpa03, you need to enter five things:

Environment Variable Name Value Notes
PRODUCTION true Signals that we want to build both frontend and backend
GITHUB_CLIENT_ID see notes above Obtain value from Google Developer Console; you can also fill in temp as a temporary placeholder
GITHUB_CLIENT_SECRET see notes above Obtain value from Google Developer Console; you can also fill in temp as a temporary placeholder
ADMIN_EMAILS phtcon@ucsb.edu,youremail@ucsb.edu,yourmentor@ucsb.edu See notes above

Step 4c: Try logging into your app

The URL for your app should be something like https://jpa03-yourgithubid.onrender.com.

Try logging in, and logging out.

What if it doesn’t work?

Since Render.com is new to the CMPSC 156 staff this quarter, we’ll have to deal with various “failure” scenarios as they come up.

If you have trouble, please post to either #help-lecture-discussion during class time, or to #help-jpa03 outside of class time.

Step 5: Set up Storybook repos

Storybook is a utility that produces documentation sites for React Apps.

We are going to set up two separate repos that have the same name as your repo, but with the suffixes -docs and -docs-qa.

For example, if your GitHub id is cgaucho, you’ll have a main repo:

In this step, you’ll create two additional repos:

There is a script that you can try to run that should create these for you; the script is in the form of a “GitHub Action”.

If the script works, great! (As of this writing, it was not working properly.)

If not, you can create these two repos manually.

Instructions are under the docs directory in the file storybook.md. Follow those instructions.

One step that isn’t in the instructions:

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-f22.github.io/demo-spring-react-example-docs/storybook>
* QA:  <https://ucsb-cs156-f22.github.io/demo-spring-react-example-docs-qa/storybook>

After (with your URLs)

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

Make sure that the links work.

Step 6: Submitting your work for grading

When you have a running web app, find the assignment jpa03 on Canvas 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//jpa03a-chrislee123

on Render.com: https://jpa03a-chrislee123.onrender.com

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

Grading Rubric:

Note that the Rubric above is subject to change, but if it does: