Google .dev Domain + Github Pages + ReactJS

We will be creating a simple React App host it in Github pages and point it to a Google Domain (.dev)

4 min readAug 12, 2019

Google Domain

Google has introduced their latest top level domain ‘.dev’ few months back. Google markets ‘.dev’ as a domain for developers. Developers can showcase all their skills under ‘.dev’ domains. It’s been said that as of today, Over 200 million .com domains have been reserved. So you can reserve something that you wanted before and could’t get it as it was already reserved. Also .dev domains comes with built in security. For every .dev domain HTTPS is required.

Github

You may all know about Github the development platform. Now you can not only host your source there. You can also host the static web pages as well.

ReactJS

ReactJS is a fastest growing JavaScript Library at the moment. It’s being used to develop user interfaces. Being component based and being sharable is its most catching feature.

Getting started.

First of all you need to create a GitHub repo to host the static web application. I have named it with the same name of my purchased domain. This should be public if you are using a free GitHub account.

Github screen for create new repo - 2019 Aug 12

Next step is to create an ReactJS application on your local machine. For this we will be using create-react-app. You’ll have to install create-react-app globally.

npm install -g create-react-app

Then Im gonna use it and create a boilerplate reactJs application named static_web_app.

create-react-app static_web_app

Then go to the static_web_app app location and do as following to install any NPM dependancies, and try starting the application to check whether its working as expected.

#Install dependancies
  npm install#Start web application
  npm start

Now I have perfectly fine reactJS application, Im gonna upload the content to the created GitHub repo. Execute following git commands in project location to do that.

#set git origin to start uploading
git remote add origin https://github.com/masakorala/craftswithlove.dev.git#upload content
git push -u origin master

We also need to create and push a CNAME file to the github repo. Add following entries to the CNAME file.

craftswithlove.dev
www.craftswithlove.dev

Then we have to push the added file to GitHub repo. Following will do that.

git add CNAME
git commit -m ‘added cname file’
git push origin master

By doing so we are left with final few NPM commands to execute. We need to install and execute gh-pages. Now you have your source files in master branch which is not minified and not bundled. So we will be minifying the existing code and will be using gh-pages to push them into a new branch called gh-pages-branch.

To do this we need to do few modifications in package.json file. Notice the following highlighted entries and add them accordingly to the package.json file.

#install gh-pages package
  npm install — save gh-pages
#deploy bundled package
  npm run deploy

After following above commands you may noticed that there have been a new brach created and minified files have been uploaded to that branch.

Before you do change the settings of the GitHub repo to point new domain please follow following steps to setup DNS in google domain’s end.

I purchased my domain from google itself. It only cost me USD12 per year. There are other providers as well other than google. The cost may slightly change on those. Also note that google have list of countries that they approve domain payments. Only those countries can purchase from google as of today. You can use other service providers if your country is not in the list.

Now you can go to https://domains.google.com and set DNS. we are gonna point the domain to GitHub by adding following Addresses.

Addresses
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Now that we have added DNS we are gonna do the final step. We are gonna set the branch as gh-pages-branch and set the custom domain as bellow. Also don’t forget to enable HTTPS as follow.