teaching machines

CS 347: Lab 22 – GitHubber Deployed

November 18, 2021 by . Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. To receive credit for today’s lab, you must show your completed tasks to your instructor by the end of the day.

Task 1

Your first task is to finish implementing the GitHubber app you started last time. Ensure that each team member has a local copy of the source directory. If you are using Live Share, collaborators can right-click on the shared folder and download it.

Task 2

Your second task is to deploy your app to your droplet so that it’s available at https://githubber.YOUR-DOMAIN-NAME. You do this by running the following command in your React project:

npm run build

Notice that a new directory named build appears inside the top-level of your project. This folder must not be put in version control. It can be rebuilt at any time. In general, you should add this directory to your .gitignore file.

On your droplet, create a folder named githubber in your home directory, presumably right next to your project1 directory. Copy the files from your local build directory to your remote githubber directory. If you’re on a machine with Unix utilities, you can run the secure copy (scp) command:

scp -r build/* YOUR-DROPLET-IP-ADDRESS:githubber

If you don’t have scp, try WinSCP. Or something else. I don’t know Windows. As a last resort, you can clone your React project on your droplet and build it there.

Add an Apache virtual host for your app as you did in project 1. You’ll need to set permissions on the githubber directory and add a .conf file. Consult previous tutorial posts to remind yourself how this is done. Use HTTPS, and redirect HTTP traffic to HTTPS.


The next step of your learning is to complete the following tasks:

See you next time.