Modern Front-end Development: Trends and Best Practices
Earlier this year, we decided to launch a new version of our website and host it on the domain antstack.com.
Our previous website was built using Gatsby and it was tedious to get content (blog posts/event pages) out since we were sourcing the content from Markdown. To simplify the flow of content creation and give a brand new look to our home page, we started the development with the below technical goals,
- Statically Generated Content Served through CDN.
- Content to be backed by a CMS, which should be easy for non-technical folks to write and publish content
- It should be scalable and easy to manage.
- Being able to retain the links from the previous website (antstack.io) and have 301 Permanent Redirects to the new domain (antstack.com).
In this post, we will be talking about how we managed to host the new website. Stay tuned to know about how we built the website with Astro and Strapi CMS.
Since we work with AWS, using AWS services to host our website had been one of the preferences & using AWS Amplify to host the Gatsby version of the website had proved useful since it had taken care of the following requirements for us
- Automatic CI/CD
- Preview Generation for Pull Requests raised to specific branches
- Distributing & Caching the static content through CDN via CloudFront
- Creating Invalidations under the hood when there are changes
- Adding and Updating Domain Names
- Provision of free SSL through ACM (Amazon Certification Manager)
Because of these reasons we had a bias towards using AWS Amplify again for the newer website. But during the process of deciding the tech stack of the website, we validated using Netlify and Vercel. But having to manage another service outside of AWS and also extra costs (since those two platforms use AWS under the hood), we finalized using AWS Amplify for the new website.
Now that we had most of the things figured out, we had one last challenge to address, making sure all URLs of antstack.io/any-page will correctly land at antstack.com/any-page with proper redirect code so that we are not losing on any of the SEO presence for the blog posts. From the development side, we made sure we don’t change any of the slugs to support this. But there had to be logically put in place on the antstack.io to make sure it is redirecting the traffic.
Initially, we thought we can do it in Gatsby, but that means that the page has to be loaded, then identify which URL in antstack.com it should go to, and then trigger the redirect which is not a great user experience. Hence the ideal approach was to handle it at the domain level before loading the old site. Here we got to use the Redirect & Rewrites feature of Amplify.
To achieve the redirect logic, instead of removing antstack.io’s Amplify App, we added the redirect logic to forward the traffic from antstack.io to antstack.com as shown in the screenshot below, and Amplify will redirect it with 301 Redirect retaining the URLs in all depth.
So, there it is. This is how we set up the complete CI/CD and CDN for our new website and migrated it over from antstack.io.
