As part of the rebranding and migration of my portfolio site, I recently decided to change the domains for both my frontend, which is a React project and backend services. Previously, my frontend was hosted under andras.olddomain.com and my backend under api.olddomain.com. To streamline my brand and shift to a more professional image, I migrated both services to new domains, andras.newdomain.co.uk and api.newdomain.co.uk. Here’s a detailed guide on how I accomplished the migration and the steps you can follow if you need to do something similar.
Before diving into the technical aspects, I planned the following:
The frontend of my project is hosted on Netlify, so I started by updating the domain configuration in the Netlify dashboard:
At this point, Netlify automatically generated an SSL certificate for andras.newdomain.co.uk, and I could see the domain pointing to my frontend project.
Once the domain was updated on Netlify, I needed to adjust the DNS records to point to Netlify. Here’s what I did:
I made sure to add this CNAME entry to ensure traffic would be correctly routed to Netlify’s servers.
To make sure that users with bookmarks or old links to andras.olddomain.com wouldn’t hit a 404 page, I set up a redirection from andras.olddomain.com to andras.newdomain.co.uk. Since andras.olddomain.com was still hosted on Netlify, I added a redirect rule in the _redirects file.
Steps to Set Up the Redirect:
In the root folder of my project, I created a file called _redirects.
Inside this file, I added the following line:
https://andras.olddomain.com/* https://andras.newdomain.co.uk/:splat 301!This rule tells Netlify to permanently (301) redirect all traffic from andras.olddomain.com to andras.newdomain.co.uk, preserving the URL path.
I committed the changes and redeployed the site. Netlify picked up the _redirects file, and users visiting the old domain were now automatically redirected to the new one.
When I updated the frontend domain to andras.newdomain.co.uk, Netlify automatically provisioned an SSL certificate for the new domain. However, I ran into a brief issue where SSL wasn’t working immediately after the change. I had to wait around 5–10 minutes for the SSL certificate to propagate and become active.
To ensure a smooth transition, I monitored both domains (the old and new) and confirmed that the SSL certificate was active on andras.newdomain.co.uk before fully switching traffic over.
While the frontend domain was successfully migrated, I realized that the backend was still functioning properly without any issues, even though it was using api.olddomain.com. Since everything was working fine, I decided not to immediately migrate the backend to api.newdomain.co.uk. This would have involved updating AWS configurations and possibly updating environment variables and API routes in the frontend.
If needed, I could update the backend domain later on by following a similar process as for the frontend
Migrating both frontend and backend domains can seem like a complex process, but breaking it down into smaller steps makes it manageable. With proper planning, DNS updates, and redirect configuration, you can ensure that your users experience a smooth transition from the old domain to the new one.
By following this process, I successfully migrated my domain from andras.olddomain.com to andras.newdomain.co.uk without disrupting my service or losing traffic. The key takeaway here is to be thorough with DNS and redirection settings, and be patient with SSL certificate propagation.