The Startup
Published in

The Startup

Build a React Website With Custom Domain in 10 Minutes

Photo by Ferenc Almasi on Unsplash

In this tutorial, we’re going to use create-react-app, Github, Netlify, and namescheap to deploy a React website with a custom domain name.

There are certainly other options for domain name registration and site hosting, but Namescheap provides the least expensive domains I’ve found, is easy to work with, and also comes with whoIs privacy protection for free (so you won’t be spammed with calls and emails when you register a new domain). I also love Netlify as it is free and very easy to use.

STEP 1 OF 5: Create your app

To start, create a new React application called ‘my-awesome-app’ using create-react-app: (you can of course change the name of the application to be whatever you want)

In the terminal, type:

npx create-react-app my-awesome-app
cd my-awesome-app

STEP 2 OF 5: Push your app to Github

Next, create a new github repo for the project, and upload your project to github.

In Github, click on the “New” button in the top left:

— — — — — — — — — — — — — — — — — — — — -

Type the name of the app, and click the “create repository” button at the bottom of the screen:

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Copy the code to push your existing repository from the command line:

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Paste the code into the terminal to upload your code.

STEP 3 OF 5: Set up Netlify for hosting

Next, log into Netlify [www.netlify.com] (create an account if you haven’t already).

Click on “New site from Git”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

On the next screen, select “Github”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

On the next screen, scroll down to find your Github repo for the app:

Then, on the next screen click “Deploy site”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Next, click on “Domain settings”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Next, click on “Add custom domain”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Type in your domain and click verify

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Then click “Yes, add domain”

Back on the Domain Settings screen, copy the .app link. You’ll use this later after you register the custom domain.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

STEP 4 OF 5: Register your custom domain name at Namescheap

Register a domain name on Namescheap

After your purchase is complete, go into your Dashboard, and find the domain name you want to transfer, and click the “MANAGE” button

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Next, click on “Advanced DNS”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Click on “Add New Record”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Scroll down to CNAME and click

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

For the “Host” type “www”, and for the “Value” paste your .app link from Netlify. Hit the green check mark and you are good to go.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

STEP 5 OF 5: Add your domain to Netlify

Your custom domain name should now show up on Netlify:

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Head on over to your new site and start customizing it :). When you push to your GitHub repo your site will automatically update.

Thanks for reading!

Note: the namescheap link is an affiliate link. I use namescheap for all of my personal websites as I’ve found them to have the best and cheapest services. Feel free to go directly to their website instead.

--

--

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
Joel Masters

Joel Masters

Creator of Goalsmash.net. Help others achieve their goals. Get paid.