Join Ray Villalobos for an in-depth discussion in this video Using the exercise files for this course, part of Building a Progressive Web App.
- [Narrator] The files for this course are freely available in GitHub for all users at this URL. However the images for this course need to be downloaded by getting the exercise files from our web site. In the exercise files folder you'll see a single folder called images with all of the images for this project. Next, we'll need to get the project from GitHub. In GitHub you'll see that the project is organized in different branches. Each branch corresponds to a video in the course.
They are named according to the video they correspond to, so if you see a B at the beginning, those would be the files for the project at the beginning of the video. And if you see an E at the end, that would be how the files looked at the end of the video. You can clone this repo into your local hard drive if you want to follow along. The best way to work with the project is to clone all the branches. In order to work with Git, you need to have Nodejs which you can get from this web site as well as Git, which you can get here.
When you install Git, make sure you add the Git bash terminal in Windows. It makes running the commands a little bit more consistent. So let me show you how to clone all the branches for this project. First of all, I'm going to go to the GitHub repository and click on this clone or download link. From here, I'm going to click on this icon to copy the link to my clipboard. Next I'll open up my terminal or git bash and I want to make sure that I'm on the desktop.
From here I'll create a directory, I'll call this progressive, and I'll switch to that directory. Once I do that, I can execute the git clone command. But I want to use a special version called bare. Then I want to paste the link from GitHub. Finally I want to add an extra .git at the end. Let me expand it to see it more clearly. Now I'm going to hit return and this will clone a bare version of the repository from GitHub.
In order to switch this to a regular repository, I can use the git config and change the Boolean variable core.bare to false. Finally I'll issue a git reset --hard command and this will make this into a regular repository. Let's clear this out and you'll see that if I execute a git branch command, I'll see all of the branches that are also available in GitHub.
You can open this in your favorite text editor, I'm going to use Atom right now. You can see the state of the files at the end of the project. We'll also need to move this images folder into this application folder. So I'm going to open up progressive, and then move the images folder we downloaded from our web site into the app folder.
It may ask you to replace existing files. Let's go ahead and clear this out in our terminal and now we'll issue an npm install command to install all the modules for this project. You may need to run sudo npm install depending on how your permissions are set. Once the npm installation is done, we can clear this out, and then you should be able to run the gulp command.
This will start up the automation and display the web site on a browser. At the beginning of each video, I'll have the gulp command running in the background in my terminal. You can cancel the terminal by hitting Ctrl-C and if you want to you can switch to a different branch of the project by using a git checkout command. Let's do a git branch, and if we wanted to switch to how the files looked at the beginning of the third chapter in the second video, I can issue a git checkout 03_02b.
And if you see this error, you want to issue a git stash command to stash any temporary changes. So let's go ahead and do that. We'll do a git stash, and then two ampersands, and then a Git Checkout 03_02b. Now the files looked how they looked at the beginning of the third chapter and the second movie. If you need more help understanding this process, make sure you check out Up And Running With Git and GitHub.
Now let's get started building this application.
- Using a progressive workflow
- Adding navigation HTML
- Making navigation interactive
- Adding data via templates
- Adding Bootstrap modals
- Adding a service worker
- Deploying your app