Adding a custom domain from godaddy.com to a surge.sh project.

In this tutorial, we are diving into the world of custom domains surge and godaddy.com.

This tutorial shows how I added the custom domain name of tallangroberg.com to my portfolio site which is a react project.

If you find this helpful please share, like and comment the site that you published with the help of this tutorial.

Prerequisites:

1. godaddy.com account.

2.node installed.

1. Knowledge of npm installs

2. create-react-app installed if you already have a react app you are trying to give a custom domain, you can start after the react project is made.

3. Knowledge of the command line. (I use a Mac/unix for this tutorial but it's possible to follow along with windows or Linux.)

First, let's make a new react-app through the terminal.

  create-react-app domain-tutorial

cd into that project.

cd domain-tutorial

Do an npm start to make sure you get the react boilerplate.

npm start 

If everything looks good continue.

Since this isn't about how to make react-apps necessarily, I'm just going to publish this boilerplate.

I do want to note that none of the npm packages you install should interfere with your ability to add custom domains to your react apps since this is happening on lower levels of the OSI model and react-apps operate at the very top of that model.

Next, we want to add a script to the package.json so that when we enter npm run deploy in the command line, it will send our react app live to the web.

Go to the package.json and add the following line of code inside of the "script" brackets.

,      
"deploy": "npm run build && mv build/index.html build/200.html && surge build"

We need the comma because it's json.

Our new script section should look like this.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
, 
    "deploy": "npm run build && mv build/index.html build/200.html && surge build"

  },

Now go to the public folder and add a file called CNAME all caps.

Starting, we will use a surge.sh address but we will change this later to our custom domain.

As long as no one else has a domain that you have tried, you can use that domain name with the ending surge.sh type in your own creative prefix in front of .surge.sh and if you see this screen, you can use that domain.

Now copy the URL and paste it into the CNAME folder.

https://example-bob-gate-swan-vuy.surge.sh/

We still need access to the surge npm package.

npm install surge on the command-line globally.

npm i -g surge

In the command-line when you enter npm run deploy it will reference the URL in the CNAME file and publish the react app to that site.

Try it.

npm run deploy

This will create a compiled build of the react application into vanilla javascript.

if this is your first time, you may run into a strange screen.

To proceed hit enter once and you will be prompted for your email.

You will be prompted for a password as well.

After you enter an email and password, if the site isn't taken, you will see your site on the live web at the address in your CNAME file.

Now for the godaddy.com side of things.

if you don't have a godaddy.com account, go ahead and meet us back here once you have an account and a custom domain name.

Go to your my-products page within your GoDaddy account.

Click on DNS for the domain you are connecting to the react app.

It may look different on your GoDaddy dashboard depending on if they changed the web site layout.

This is the most dangerous part of the process. Read these instructions very carefully.

All you have to do is delete both the CNAME records and change the A record to the IP address we are about to get.

start by deleting both the CNAME records in your domain manager settings.

This will reference the CNAME file through the project on the surge and react side. So, they have to be removed from the GoDaddy's records.

Your account should now look like this.

We want to go back to the CNAME file in the react-app and change the URL to our final domain URL.

Save, then run another deploy on the command-line.

npm run deploy

On the command-line we can see the IP address given to us by surge.

Copy that IP address and go back to your godaddy.com dns management page for your domain.

Under Type, where it says A, at the top of the list, click the pen to edit that record.

Now change where it says Parked to the IP address you copied from the command-line.

Now click save.

Please be patient because unlike many things with web development, this is not instantaneous.

If you followed this tutorial this will work, when I talked with a customer service representative at godaddy.com, they told me that this can take up to 48 hours. In my case with writing this tutorial, it took 20 minutes before my website was live at my custom domain.

If you run into problems I recommend calling customer services. Every time I have had problems with a custom domain they were extremely helpful.

A few last warnings.

I cannot guarantee that this is safe from any type of hacking and I don't know how to set up the SSL certificate.

If anyone reading this has any helpful links please put them in the comments below.

I will also do my best to help anyone with any questions if you reach out.

link to the surge site

link to the custom-domain

link to github repo

Happy hacking everyone.