team03 : Deploying Team Deployment of Legacy Code App (Course Search/LAs/Mapache)

num ready? description assigned MW lect due MW lect assigned TR lect due TR lect
team03 true Deploying Team Deployment of Legacy Code App (Course Search/LAs/Mapache) Thu 03/04 05:00PM Thu 03/11 11:59PM

This lab is similar to jpa03, in that you will be doing the configuration of a Spring/React full-stack web application that has Google Authentication via OAuth (though Auth0).

Here’s what’s different:

What we’ll have when we are done

When teams are done, the following Heroku applications should be up and running:

Section Team 1 Team 2 Team 3 Team 4
5pm AppDashboard AppDashboard AppDashboard AppDashboard
6pm AppDashboard AppDashboard AppDashboard AppDashboard
7pm AppDashboard AppDashboard AppDashboard AppDashboard

Why are we doing all of this

In order to be able to work on a full stack web application, you need to be able to:

These setup steps, as you’ve already experienced, can be a little complex. We are introducing them now so that:

OK, I get that, but what are all of these steps?

We can talk more about this in lecture, and I’m happy to… just ask. But here’s a quick run down.

If you have more questions, ask in lecture, in office hours, or ask the TAs/LAs during section.

Steps

Steps 1 and 2 can be delegated to individual members of your team, and done in parallel with the remainder of the steps.

Step 1: Give everyone on your team access to your Heroku app

On your team’s slack channel, you should find a message about your team03 Heroku app. The name of the app will be something like this:

Examples:

Some on your team was given admin access to the app. Identify that person. They should add everyone else on your team, using the email address that person uses to login to Heroku.

If that person is not available, there is an LA designated for your team. Ask them, or one of the TAs, or the instructor, to add someone else from your team, and then they can add everyone else.

Step 2: Give everyone on the staff access to your Heroku app

On the Slack, in the channel #course-notes, there is a list of the email addresses of the course staff. Some of them already have access to your app, but the rest do not. Please add the rest of them.

Step 3: Clone the Repo assigned to your team.

This step should be done, eventually, by each member of the team individually. For today, though, it is sufficient for one member of the team to do it, preferably, sharing their screen with other members looking on and helping.

Identify the repo associated with your team:

Clone this repo on your local machine, or in your CSIL account.

Step 4: Follow the SETUP-QUICKSTART.md instructions to create a temp-credentials.txt

Next, follow the SETUP-QUICKSTART.md instructions for your repo.

Note that you should be able to use these instead of the SETUP-FULL.md instructions, since you should already have:

So, following these instructions:

Step 5: Setting up shared Auth0 tenant

Two members of your group shoudl have an invitation to a shared auth0 tenant with a name such as:

Find out which of these group members are present; one of them should be assigned to jobs “A” and “B”.

If no-one has such emails, ask for help on the #help-lecture-discussion channel on Slack; one of the staff will invite one of the members of your group.

First task is to accept your own invitation.

Next, switch tenants to the team tenant (there is a “Switch Tenant” option in the menu at the upper right of the Auth0.com dashboard, where your login name is.)

Then, from the same menu, choose the “Invite Admin” feature to invite the other admins.

The person with job “A” should get the @ucsb.edu email addresses of all of the other team members.

The person with job “B” should get the @ucsb.edu email addresses of all of the staff; these are posted in the #class-notes channel on the course Slack.

When you have finished inviting all of the other members of your team (A) or the staff (B), you are done with this task.

Step 6: Create an application, API and custom rule as in jpa03

Also: add the additional steps needed, depending on your particular application:

Once you’ve filled in all these values in your temp-credentials.txt, distribute these among the members of your team.

It is best to do this via Slack DMs rather than in a public message on the team slack channel.

Step 7: Configure your secrets-localhost.properties and javascript/.env.local files

Next, set up the values in secrets-localhost.properties and javascript/.env.local files, and secrets-heroku.properties using the values from temp-credentials.txt.

For the app.admin.emails value, add half of the team members to the list, and leave half off:

app.admin.emails=phtcon@ucsb.edu,cgaucho@ucsb.edu,foobear@ucsb.edu,ldelplaya@ucsb.edu

Here’s why: as a team, you want to be able to test with, and without admin privileges. The users you list here are “permanent admins” that always have admin privileges. The rest can be shapeshifters; existing admins can turn admin privileges on/off for these users.

You should always have at least one permanent admin on your team, but it is good to have several folks that can test the application in both admin and non-admin mode.

You might distribute these files via DMs on slack also.

Step 8: Test the application on localhost

Now, with the values in place in secrets-localhost.properties and javascript/.env.local, you should be able to run your application using

mvn spring-boot:run

Make sure it comes up on localhost, and that you can login and logout.

Step 9: Run setHerokuVars.py and then deploy on Heroku

Next, run the setHerokuVar.py script (following the instructions), and then deploy your main branch on Heroku.

You should be able to access the application, and then login, and logout.

Step 10: Test the admin features

Check that the permanent admins have access to the admin menu.

Then, try having some non-admin members login to the app. After they login, admins should be able to see their logins on the admin menu.

They should also be able to promote and demote these users, giving and taking away admin status.

When all of this is done, you’re basically finished with this lab, and ready to submit it on Gauchospace.

Step 11: Submit on Gauchospace

One member of your team should submit here: https://gauchospace.ucsb.edu/courses/mod/assign/view.php?id=7087487&forceview=1