Deploying a new Angular SPA to GitHub

SOP10100 - Deploying a new Angular SPA to GitHub

1. Purpose

This Standard Operating Procedure (SOP) describes the process of deploying a new Angular Single Page Application (SPA) to GitHub.

2. Scope

This procedure applies to any new Angular SPA being deployed to GitHub.

3. References

4. Definitions

4.1 GitHub – A hosted platform for storing and sharing projects and providing version control

4.2 User Page – A GitHub repository presented as a website

5. Responsibilities

6. Materials and Equipment

6.1 A GitHub account is required

7. Procedure

Example scenario – A new SPA has been created and is being loaded into GitHub as a User Page. The SPA was created via ‘ng build –prod –aot’. The GitHub account being used is ‘mysite’ and the page will be presented as mysite.github.io

7.1 Log into the GitHub account

7.2 Create a new Repository

7.3 Enter the repository name accountName.github.io. This name format must be used in order for the User Page to work as expected.

7.4 Select ‘Public’

7.5 Select ‘Initialize this repository with a README’

7.6 Click ‘Create Repository’

7.7 On your workstation, execute ‘git clone’ with the repository web URL

Recommend: When executing git clone, include your account name in the URL, i.e. mysite@github.com. If this is done, step 7.10 will be unnecessary.

7.8 Switch to the cloned directory

7.9 Copy the SPA files to the new directory

7.10 Modify .git/config so the URL includes your GitHub account

7.11 Execute git add .

7.12 Execute git commit -a –m “Your comments here”

7.13 Execute git push –u origin master

The SPA will now be available at https://accountName.github.io

8. Revision History

Created: May 14, 2017