Using Squarespace Domains with Netlify to host React apps with custom url

I have always used Google Domains with Netlify to host my frontend web projects. Sadly, Google has sold off the Domains side of their business to Squarespace, which means that I (or we) need to learn how to play with DNS settings again.

I found that there was no specific Squarespace <> Netlify documentation, and a lot of different potential solutions, so this will serve as a tutorial for anyone else who is transitioning from Google Domains over to Squarespace Domains, or for those who are doing it for the first time.

Before we start:

This tutorial is for users who want to point their simple React project at a custom domain. Netlify is an awesome free resource to host frontend projects! If you have a DB or backend that you need to host, you can try Railway or Render for free.

How Google/Squarespace will handle moving existing projects over is still a mystery — they might handle the DNS settings for existing projects, but this will be good to know in case you need to do some manual setup yourself.

The last section of this article covers some errors and issues that I encountered and how to solve them, so if you found this article in frustration then I recommend skipping down to there.

Create your React project

I won’t go too deep into this, but create your React app any way you please. I use Create React App, but of course you can also build your project in other ways.

Connect to Netlify

The easiest way to do this, is to connect your repo to a new project. This way any time you merge to main it will automatically update. Just be sure to work on new/unfinished features on a feature branch so the live site continues to work.

Purchase domain on Squarespace

Go over to Squarespace Domains and find your domain of choice. These all seem more expensive than previous domains that I purchased from Google, but I guess that’s showbiz, baby.

Add DNS settings

This is the step that slowed me down, as it was quite different from the Google Domains flow.

1- Update your DNS settings in the Squarespace domain manager

Find your domain of choice and then click on EDIT DNS in top right corner, this will bring you to the DNS settings.

If you try to add a new Custom DNS Record now, you wil receive a generic error:

This is because they are in conflict with the default records. You will need to delete all of the Squarespace Defaults from your DNS settings. Click the red trash can in the top right corner to remove all of them. Note: These can easily be regenerated if you decide to return to the default settings, so don’t worry.

2- Point your custom Domain to Netlify

Now that you have deleted all of the existing records, you can add a custom record that points to Netlify (source):

Host: www

Type: CNAME

Priority: (leave this blank)

Data: apex-loadbalancer.netlify.com

Alternatively, you can set an A record:

Host: @

Type: A

Priority: (leave this blank)

Data: 75.2.60.5

(Optional) Remove www prefix

If you want your site to show up as: `coffee-fix.net`

Go to the main page for Domain settings in Squarespace and look for the Advanced Settings. Toggle the Use "www" prefix off if you would like to use this setting (this will be the default setup on Netlify).

If you want to use the www. version of your app as the main url, then you can update your domain settings in the Netlify app to make it the deafult.

Add the custom domain to your Netlify app

Under Site Configuration for your app on Netlify, go to Add Custom domain to your site and enter in your newly purchased URL. If you updated the DNS settings correctly, then you should be able to click through Verify and Add Domain without issue.

At this point, your site might be live! Or your may see Awaiting External DNS in your Netlify domain settings.

If you have completed all the previous steps then you should be able to click through to provision a certificate without any further changes:

If you are still getting errors, give it time —it can take time (potentially 72 hours) for these steps to propagate.

That’s it!

Now you just wait for site propagation and you’ll have a shiny new live project! Some steps (like validating your SSL certificate) may not be possible during the 72 hour wait period, so if you are having trouble then give it a few days before attempting again.

Trouble Shooting

Here are some issues that I ran into along the way:

1- Could not add new DNS settings on Squarespace

Issue: seeing a generic error when trying to add a custom record on Squarespace. That is simply because it conflicted with the default settings.

Solution: Remove the default settings (steps above)

2- Could not configure custom DNS settings on Netlify

Issue: Couldn’t verify a custom domain because the DNS Zone was the same. This is how I was used to setting up custom domains with Netlify using Google Domains.

Solution: Make sure you have updated your DNS setting in Squarespace before attempting to connect them on the Netlify app. Once you have it pointed at the Netlify source from the Squarespace app, you shouldn’t see this error.

3- Privacy Error when navigating to the website

Issue: A privacy error pops up when you launch your site.

Solution: Just give it time. There is a verification process involved with custom domains and can take up to 72 hours. You can expect to see the Awaiting External DNS in your netlify app domain settings while this is happening.

Time for coffee

Hopefully you have found this helpful! If you are interested in pulling shots of espresso, then you can check out this newly live coffee-fix.net, created for the purpose of this tutorial.