Auto Publish React/Angular Front End App to GitHub Pages

In this story we will walk through in publish cli generated React or Angular app to the GitHub pages. We will later automated process to deploy to GitHub pages with every push to the master branch. GitHub pages are one of popular hosting mechanism for personal blogs among other things.

Step 1: In First step, we will create new repository on the GitHub. The steps for it are mentioned in GitHub help - create new repository.

Step 2: Then create new React/Angular on your local machine with same name as repository. Since npm requires project be in lower case, please use lower case while creating project.

Below are commands for quick reference:

React

Repository name should be used instead of demoapp. The template typescript and npm options are optional.

npx create-react-app demoapp --template typescript --use-npm

Angular

npm install -g @angular/cling new demoapp

Step 3: Then we publish initial to GitHub repository created in first step.

git remote add origin remote <RepositoryURL>
git remote -v
git push origin master
git pull

Step 4: Install gh-pages npm package

Use npm install to install gh-pages as Dev dependency. This package does work of creating required branch on GitHub for hosting.

npm i gh-pages -D

Step 5: Add Homepage field

Add Homepage in package.json . It will be in form https://<username>.github.io/<RepoName> . Example:

"homepage": "https://chiragrupani.github.io/demoapp/",

Step 6: Set up deploy script. Since the directory created by Angular and React slightly differs there is separate script for Angular and React.

React

Add deploy script. The predeploy first builds React app and generates build folder. The same folder name is specified with gh-pages command.

"predeploy": "npm run build",                                       "deploy": "gh-pages -d build"

Angular

"predeploy": "npm run build -- --prod=true --base-href=<homeURL>/",

For Windows

"deploy": "@powershell copy dist/ngapp/index.html dist/ngapp/404.html && gh-pages -d dist/ngapp",

For *nix

"deploy": "cp dist/ngapp/index.html dist/ngapp/404.html && gh-pages -d dist/ngapp",

The Angular requires base href need to be updated as well copying index.html to 404.html. The <homeURL> should be https://<username>.github.io/<RepoName>/ , note the trailing slash, same as home page URL. Replace ngApp with name of Angular project.

Step 7: Deploy - run npm run deploy and verify application is deployed and working fine.

Congratulations 🎉, you have completed publishing React/Angular app to Git Hub pages. Now, lets look into automating workflow so that every push to master branch will publish to GitHub pages

step 8: Azure Pipeline

For automated deployment we would be using Azure Pipelines. You can head to https://dev.azure.com , create new account if you don’t already have. Once you login you can see “New project” at top right, click on that.

Steps to add new project in Azure Dev ops pipeline

Enter project Name (any name you desire), description and select visibility.

After that, it will ask for repository source location for pipeline. Select GitHub(yaml)

Select GitHub (YAML) for code location

Then select repository from Git Hub. The Azure pipeline would require permission to access repository, provide required access to repository.

If you still not able to see repository then go to https://github.com/marketplace/azure-pipelines and provide access to your repository. You can also configure it at Git Hub > repository > settings > Integration.

Then in configure step of pipeline, select Node JS, it will generate azure-pipelines.yml, replace it’s contents as below:

Click on Run to check-in the code and let pipeline be created. Of course, the build would fail since we need to provide some missing information in yml file that we would look in next step.

Step 9: Generate Deploy Key

Since gh-pages package works by pushing build/dist folder to gh-pages branch of the repository, it would need write access to the repository when running on azure pipeline build agent. One way to provide access is using Deploy Key.

The steps for it are mentioned at

It involves basically executing below command. Please provide valid email address with C flag, it should not necessarily be active mail address:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Two files would be generated ending with _rsa and _rsa.pub.

Step 10: Update Deploy key

PUBLISHKEY variable

Go to azure pipeline, click on Edit and click on Variables on Top right

Enter name as publishKey and the value the pass phrase used in generating deploy Key.

Also, mark “Keep this value secret” and click on OK to create the variable.

Public Key:

Public key will be uploaded to GitHub repository. Go to repository > settings > Deploy Keys. Click on Add Deploy Key

In Title mention any name and in key copy the contents of *.pub file generated in step 9. Please ensure if you are not copying extra white space while copying contents. Select Allow write access and click on Add Key.

Also, copy the same contents in sshPublicKey of task InstallSSHKey@0 in azure-pipelines.yml in local repository.

Note: Anyone having access to both deploy keys and pass phrase can update repository, keep them safe and also safeguard them while adding other tasks in pipeline.

Private Key:

Upload private key to azure pipeline. For that go to pipeline > Library and click on + secure file.

Adding secure file in azure dev ops pipeline

Upload private file ( _rsa file without extension generated in step 8).

After uploading go to secure files, click on secure files and click on that file. Observer the URL in browser address bar, copy the secureFileId=<GUID> part, that GUID would be generated different for each secure file.

Copy the GUID and add it to secureFile of DownloadSecureFile@1 task as well as sshKeySecureFile of InstallSSHKey@0 task in azure-pipelines.yml in local repository.

Update valid email address and user name in git configs of script section of azure-pipelines.yml . The email address should be same as one used in creating deploy keys. Save the file and push the code to the master branch.

That’s it, run the pipeline and verify the auto deployment on master push is working fine. The website will be hosted at https://<RepoUserName>.github.io/<RepoName> .

Thank you for reading this story.

--

--

--

Full stack .Net developer, Web developer and Web Surfer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implementing a Recurring Subscription Billing System Using Delayed Messaging Part 1

A Quick Guide to Integrating Leaflet.js and React

Automation And Screen Capture in PhantomJS

Building A Searchbox UI with Keyboard Shortcuts Support

A Minute with @epnsproject ! ⏳ Week # 42

Zenity Command In Linux

Infjhttps://youtube.com/shorts/Psz7jklejOE?feature=share

Twitter API with JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chirag Rupani

Chirag Rupani

Full stack .Net developer, Web developer and Web Surfer.

More from Medium

Stop to use if / else statements in your Javascript files

Clean Code: Vue.js Edition

Adding Slices to an Firefly Semantics Slice Entity Store

Now UI Dashboard | Made with Angular JS