Lab for Continuous Deployment
Date: June 1, 2021
Time: 5:30 to 8:30 in two groups of 90 minutes each
Where: Microsoft Teams meeting
Objective: Create a CD pipeline for GitHub Pages deployment
Groups:
S. No.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Group 1
Hamid Zaib
Aftab Rafique
Emil Amin
Muhammad Shan Hassan
Sidra Qasim
Umaiza Gul
Qaiser Aziz
Fida Mohammad
Saqib Ali
Aroona Ayub
Ali Arslan
Sana Gul
Arslan Nawaz
Abdul Rehman Ahmad
Ahmed Hayat
Muhammad Waqas Bilal
Mamoona Nazir
Group 2
Muhammad Asif
Bilal Raza
Mamoona Khalid
Muhammad Rizwan Khaliq
Tayyaba Ikram
Rimsha Tehreem Ali
Shahzad Khan
Raja Ahmed Ali
Syeda Iqra Ayaz Gardazi
Saad Jahangir
Malik Shah Jahan
Kalsoom Shaheen
Umer Sultan
Zain ul Hassan
Aniqa Parveen
Rahila Rafiq
Izaz Ahmad
Umaiza Gul
Steps:
1. Install these required software on your machine if not already:
a. Node.js v12 or higher: https://nodejs.org/en/download/
b. Git v2.29: https://git-scm.com/downloads
c. GitHub Desktop: https://desktop.github.com/
2. Create a React App and run it:
a. Either use the create-react-app scripts directory. See the notes at the end of this
document.
b. Or clone the code from: https://github.com/do-riu/M5-WebApp
3. Create a repo on GitHub:
a. Repo should be named ‘yourusername.github.io’ under your username.
4. Push changes to GitHub
5. Setup GitHub Pages:
a. Go to yourusername-github.io repo.
b. Create a branch called ‘gh-pages’.
c. Go to settings and select this branch for the website.
d. Go to website and it will give error for now.
6. Setup CD workflow:
a. Now create a new Action which will go to workflows dir.
b. This YAML will copy the output to gh-pages branch.
c. Create YAML which should have following steps:
i. Have trigger it to run on any changes to master/main branch
ii. Run npm install and build.
iii. Copy build output to gh-pages using some GitHub Actions task. Hint: one such
task is named JamesIves/github-pages-deploy-action
7. Test your workflow:
a. Make a change to your source in src/App.js.
b. Commit it to master / master.
c. It should trigger your workflow.
d. When it finishes, it will copy output to the gh-pages branch.
e. Now go to the URL and it should show website up and running.
f. This URL can be seen in Settings > Pages section of your repo.
Step 1: Create a blank React App
1. Launch cmd, type ‘npx create-react-app my-app’ and hit Enter.
2. ‘npx’ is a command to run execute npm package binaries. We are saying to fetch and run
‘create-react-app’ to help us start with our first React app.
3.
4.
5.
6.
7.
It will take some time to set things up for you.
When complete, it will have a directory named ‘my-app’ that has all the code needed.
Let’s go there: ‘cd my-app’
Now we can run our app by doing ‘npm run start’.
It will launch a browser window pointing to ‘http://localhost:3000’, showing a page like this:
8. Congratulations! Your first React App is ready.
Step 2: Modify App so that you can see your changes
1.
2.
3.
4.
Launch Visual Studio Code and open folder ‘my-app’.
As the Page suggested, go to src/App.js and add a line or two in the <p> tag.
Save and run it again (it reloads if not closed).
It will now show the changed page as below:
Step 3: Create a build that can be deployed
This setup comes with a predefined scripts to generate a build that can be deployed (moved) to a cloud
service.
1.
2.
3.
4.
Go to Terminal or cd to ‘my-app’ on your cmd.
Type ‘npm run build’ and hit ‘Enter.
It will generate a production build at folder ‘build’.
You can see that it has an index.html along with other stuff. We need to preserve this and use it
as deployment artifact.