CS 347: Lab 24 – Dukebox 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 as an individual must show your completed tasks to your instructor by the end of the day.
Task 1
Your first task is to finish implementing the Dukebox 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
Add a progress indicator that displays while each fetch is in progress. You want it to display right before the fetch starts and hide after the fetch finishes. Add a flag to your Redux store that indicates whether or not the app has a background task in progress. Then conditionally render a progress indicator:
{isProgressing && <div className="spinner" />}
This flag must be set to true right before a fetch starts and set to false when it finishes. Your thunk creators are the perfect place to orchestrate this sequence. For example, you might write something like this:
function thunkCreator() {
return dispatch => {
dispatch(showProgress());
fetch(url)
.then(...)
.then(data => {
// ...
dispatch(hideProgress());
});
};
}
If you have time, feel free to design your own progress indicator. Otherwise, use this one from W3 Schools:
.spinner {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Task 3
Your final task is for each individual to deploy your app to your droplet so that it’s available at https://dukebox.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 dukebox in your home directory, presumably right next to your project1 directory. Copy the files from your local build directory to your remote dukebox directory. If you’re on a machine with Unix utilities, you can run the secure copy (scp) command:
scp -r build/* YOUR-DOMAIN-NAME:dukebox
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 dukebox 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. You’ll need to follow the steps in the book to mark sure the paths are correctly handled by Apache.
TODO
The next step of your learning is to complete the following tasks:
- 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 on project 3.
See you next time.
