CS 347: Lab 22 – GitHubber Deployed
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.
TODO
The next step of your learning is to complete the following tasks:
- Re-read the chapter Multi-page Applications in All Over the Web. Be sure to follow along with the code samples. Recreate each exercise yourself.
- Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and a snippet of source code in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page. If any of the requirements is not met, you will not receive full credit.
- Keep working project 3.
See you next time.
