Now that we have our backend deployed to production, we are ready to deploy our frotend to production as well! We’ll be using a service called Netlify to do this. Netlify will not only host our React app, it’ll also help automate our deployments. It’s a little like what we did for our serverless API backend. We’ll configure it so that it’ll deploy our React app when we push our changes to Git. However, there are a couple of subtle differences between the way we configure our backend and frontend deployments.
Netlify hosts the React app on their infrastructure. In the case of our serverless API backend, it was hosted on our AWS account.
Any changes that are pushed to our
masterbranch will update the production version of our React app. This means that we’ll need to use a slightly different workflow than our backend. We’ll use a separate branch where we will do most of our development and only push to master once we are ready to update production.
We have an alternative version of this where we deploy our React app to S3 and we use CloudFront as a CDN in front of it. Then we used Route 53 to configure our domain with it. We also had to configure the www version of our domain and this needed another S3 and CloudFront distribution. This process can be a bit cumbersome. But if you are looking for a way to deploy and host the React app in your AWS account, we have an Extra Credit chapter on this here — Deploying a React app on AWS.
Now before we can automate our deployments, we’ll need to configure environments in our React app. This’ll allow the production version of our React app to connect to our production backend.