Adding a custom domain from godaddy.com to a surge.sh project.
Published: 2020-08-09 00:09:35

In this tutorial, we are diving into the world of custom domains [surge](https://surge.sh/help/getting-started-with-surge) and [godaddy.com](https://www.godaddy.com/). 

This tutorial shows how I added the custom domain name of [tallangroberg.com](http://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](https://sso.godaddy.com/?isc=goodbr01/account/create?realm=idp&path=%2Fproducts&app=account). 

2.[node installed](https://nodejs.org/en/download/). 

3. Knowledge of [npm installs](https://docs.npmjs.com/cli/install#:~:text=npm%20install%20(in%20package%20directory,directory)%20as%20a%20global%20package.)

3. [create-react-app installed](https://www.npmjs.com/package/create-react-app) _if you already have a react app you are trying to give a custom domain, you can start after the react project is made_.

4. 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. 

```bash
  create-react-app domain-tutorial
```

cd into that project. 

```bash
cd domain-tutorial
```

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

```bash
npm start 
```

If everything looks good continue. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0macs7lw6h12xie1cyjy.png)

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](https://en.wikipedia.org/wiki/OSI_model#:~:text=The%20Open%20Systems%20Interconnection%20model,underlying%20internal%20structure%20and%20technology.) 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. 

```bash
,      
"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. 

```json

  "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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/88n5o6y597ax63hb3njd.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uaawkqcd236tgnylpbon.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dxjafhgahgb91xgyttfk.png)

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kwo4s7sewmcnvkpj67rw.png)

We still need access to the surge npm package. 

npm install surge on the command-line globally. 

```bash
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. 

```bash
npm run deploy
```

This will create a compiled build of the react application into [vanilla javascript](https://stackoverflow.com/questions/20435653/what-is-vanillajs).

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l9jp82owma7nqrrion0t.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3mv274zr8k1wg6pnlo68.png)

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](https://sso.godaddy.com/v1/account/create?isc=cjc99com%2Faccount%2Fcreate%3Frealm%3Didp&path=%2Fproducts&app=account&autodetect=true&iframe=false), 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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cei322ah7dh17uk4xjx0.png)

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


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxydr76iywgerk6sh3ba.png)


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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/getbihcah2u9z7gokkl5.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zptyqxs3rqhurgfpz3ew.png)

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

```bash
npm run deploy
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dv5k9nvwsara2unraygq.png)

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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/db3vbd5meht92gbnyfou.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/db3vbd5meht92gbnyfou.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q4w36gsso05evxcjc75e.png)

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](http://example-bob-gate-swan-vuy.surge.sh/)

link to the [custom-domain](http://domain-example-tutorial.com/)

link to [github repo](https://github.com/TallanGroberg/custom-domain-tutorial)



Happy hacking everyone.