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.
1. Preparation and Planning
Before diving into the technical aspects, I planned the following:
- The frontend would move from andras.olddomain.com to andras.newdomain.co.uk.
- The backend, which was hosted on AWS under api.olddomain.com, would also shift to api.newdomain.co.uk.
- I wanted to ensure that all traffic from the old domain would be redirected to the new one to avoid any loss of visitors due to broken links or old bookmarks.
2. Updating the Frontend Domain on Netlify
The frontend of my project is hosted on Netlify, so I started by updating the domain configuration in the Netlify dashboard:
- Log into Netlify and go to the Site settings of the project.
- Under Domain management, I updated the domain value from andras.olddomain.com to andras.newdomain.co.uk.
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.
3. Updating DNS Records on Namecheap
Once the domain was updated on Netlify, I needed to adjust the DNS records to point to Netlify. Here’s what I did:
- Log into Namecheap (my domain registrar).
- I navigated to Domain List and selected andras.newdomain.co.uk.
- I updated the CNAME record for andras.newdomain.co.uk to point to the Netlify URL, which was something like cozy-mousse-3525c.netlify.app.
I made sure to add this CNAME entry to ensure traffic would be correctly routed to Netlify’s servers.
4. Redirecting the Old Domain to the New Domain
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.
5. SSL Certificates
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.
6. Migrating the Backend Domain (Optional Step)
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.
