The Dev World – Sergio Lema

You’ve worked a lot creating your SPA (Single-Page Application) with React or Angular. Now it’s time to deploy it somewhere. Somewhere which has your own domain name.

Today, I’ve chosen to use the GCP Bucket Storage to upload my frontend and use my own domain name.

DNS Setup

First things first, you need to prove to Google that you own your domain. No, you can’t just tell them “Trust me, bro”, they’re going to need a TXT record in your domain’s DNS settings.

Here’s how you do it:

Head over to Google Search Console.

Hit “Verify” in Google Search Console. Add your domain as a property. Use the Domain option for a simple, wide-reaching setup. Google will give you a TXT record to add to your domain’s DNS settings. It will look something like this:

Name: @
Type: TXT
Value: google-site-verification=some-long-string

Open your domain registrar’s DNS management tool and add the record. Then, wait. DNS propagation is like cooking instant noodles, except you have no control over the timer, and “instant” could mean a few minutes or a few hours.

GCP Bucket Configuration

Now it’s time to create your GCP bucket and configure it to host your website. This part is simple, so no excuses for procrastination.

1. Go to the Google Cloud Console.
2. Create a new bucket. Give it a globally unique name using your domain name at the end, something like my-website.my-domain.com.
3. Set the bucket’s location (region). Pick one near your audience or just randomly point and click, both work.
4. Make the bucket public. To do this:
   • Go to the bucket’s Permissions tab.
   • Add “allUsers” and grant them the “Reader” role. This makes your content publicly accessible. If you’re nervous about this, don’t worry; it’s just your site, not your bank details.
5. Configure the bucket as a static website:
   • In the Edit Website Configuration section, specify an index.html for both your homepage and your “Not Found” page. When using React or Angular, all the job in done in a single file (the index.html), so it must be in both parts.

Boom! You’ve got yourself a public bucket ready to serve your website.

Domain Name Configuration

This is where the custom domain magic happens. You’ll add a CNAME record to point your domain to the GCP bucket. Think of this as teaching your domain to answer the door when someone knocks on your site’s URL.

1. In your DNS settings, create a CNAME record like this:
   • Name: my-website
   • Type: CNAME
   • Value: storage.googleapis.com
2. If you want the root domain (my-domain.com) to work too, you’ll need to set up a redirect from my-domain.com to www.my-domain.com.
3. Wait for DNS propagation. Yes, again. Don’t blame me, I didn’t invent the internet.

Test your setup by visiting your domain. If everything worked, you’ll see your website live. If not, double-check your DNS settings and permissions. Or cry into your coffee and try again.

Conclusion

Congrats! You now have a custom-domain React or Angular application hosted on GCP. But before you pat yourself on the back too hard, let’s talk limitations:

• HTTP only: This setup doesn’t support HTTPS by default. If you want HTTPS, you’ll need to configure a Cloud Load Balancer. (Think of it as upgrading from a bicycle to a car, more work, but more capabilities.)
• Framework-friendly: This works great for frameworks like React and Angular. Just make sure your index.html can handle routing.
• Basic redirects: If you need complex redirect rules, you’ll need a load balancer.

For simple projects, though, this is an easy and cost-effective solution. And hey, you’ve just leveled up your GCP skills, go flex them responsibly.