Modern Web Workshop Guide

6. Clone front end

6.1. Start new Glitch project

Let’s “clone” our front end repository on GitHub to a new Glitch project.

1. Open Glitch in a new tab, and keep this tab open
2. Click the New Project button near the top right
3. Then click the Hello-Webpage option to create a new project

6.2. Open Glitch’s command line

Let’s use Glitch’s command line feature (or “console”) to fully clone our front end code from GitHub.

1. Click the Tools button in bottom left corner
2. Click Logs button in Tools menu
3. Click Console button in Logs interface

6.3. Manually clone the front end repository

Copy and paste each of the following comands into the Glitch console to replace the default Glitch project files with our front end files.

*Pro tip: triple-click each line of code to easiliy highlight it for copying!

1. Move up one directory to the home directory
   
   cd /
   
   
2. Remove all visible files in the app directory
   
   rm -rf /app/*
   
   
3. Remove all hidden files in the app directory
   
   rm -rf /app/.*
   
   
4. Clone your front end repository (replace USERNAME with your GitHub username)
   
   git clone https://github.com/USERNAME/modern-web-front-end.git app
   
   
5. Move into the app directory
   
   cd app
   
   
6. Refresh the glitch web editor to see the new files
   
   refresh
   
   

6.4. Checkout branch 1

Our front end project is currently in its finished state. Let’s “checkout” an earlier state to start from the beginning.

Copy and paste the following commands in the Glitch console:

1. Checkout branch 1
   
   git checkout 1
   
   
2. Refresh the Glitch file system to see branch 1
   
   refresh