In this article we will learn about deploying static sites made with ReactJS, Angular and VueJS to Github pages.

PREREQUISITES

I am assuming you have a Git project already pushed to Github for this tutorial as we will only cover how to deploy and host the the repository on Github pages.

Install gh-pages dependency

To start with, we need to go into our project and install gh-pages as dev dependency.

cd my-project
npm i gh-pages --save-dev

Modifying package.json file

We need to add some properties to our package.json file. The first one will be a top level key homepage with a value

"http://{{username}}.github.io/{{repository-name}}" {{ username }} is your GitHub username, and {{ repository-name }} is the name of your GitHub repository for your project. For me, the property would look like:

"homepage": "http://deepinder10.github.io/my-project"

Now, we need to add some scripts under the scripts object.

This will differ based on the build/dist folder of your project that you put your production assets into and the technology we are using.

Predeploy - the command that will run before deploying and generate a build file, this will contain the build command.

Deploy - the command used to deploy your build to github, it takes as param the build folder name i.e. dist/build.

BUILD STEPS

For REACT projects (created with CRA)

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Now push your code to Github and then run npm run deploy on the terminal.

Now try to visit the URL of our project defined as homepage in package.json or also by going to your repository on Github and then Settings -> Pages.

On visiting this URL, you will see your React project deployed and running.

The code for React repo can be found here.

For VUE projects (created with Vue CLI)

As the default build folder is dist, i have changed gh-pages command to dist

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

Once this is done, we push our code to github and then run npm run deploy on the terminal.

As you can see published on the terminal, your project is deployed and you can check it on the homepage url or also by going to your repository on Github and then Settings -> Pages.

On visiting this URL, you will see your Vue project deployed and running.

The code for Vue repo can be found here.

For Angular (created with Angular CLI)

The default build folder for Angular is dist, but Angular generates build with project name directories, so we need to modify the build command as well to include an output path which will be the build output folder and base href which will specify the name of our project. This will generate the build into the dist folder without any subdirectory.

"scripts": {
  "build": "ng build --output-path dist --base-href /angular-ghpages/",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

Once this is done, we push our code to github and then run npm run deploy on the terminal.

As you can see published on the terminal, your project is deployed and you can check it on the homepage url or also by going to your repository on Github and then Settings -> Pages.

On visiting this URL, you will see your Angular project deployed and running.

The code for Angular repo can be found here.

This concludes my article on deployment to Github pages.

Do write down your reviews or send in a mail from the contact form if you have any doubts and do remember to subscribe below for more content like this.

Subscribe to Tech Blog - For Frontend, Backend and Full Stack developers