Deploying the Winds App to Amazon S3 and CloudFront
Winds is a popular RSS and Podcast application powered by Stream – a service that allows you to build news and activity feeds in hours instead of months. Winds is 100% open-source and the frontend is easy to install in a local environment or in the cloud – a task that we will cover in this tutorial. To ensure that you make it through the tutorial, please make sure to complete all of the prerequisites.
Prerequisites 📚
As with any tutorial, there are some requirements that come with it. For this post, you’ll need to ensure that you have the following up and running, and ready to go prior to continuing on. If you decide to skip the requirements, you’ll likely get hung up at one spot – and we don’t want that to happen.
- An AWS account with IAM Access to S3 and CloudFront
- AWS CLI installed on your machine and configured
- Have Winds cloned from GitHub to a local directory
Creating a Bucket 🗑
Setting up CloudFront 💨
Change the API URL 👨🚀
I wanted to quickly note that it’s important to change your API URL as you’ve probably decided to your API elsewhere. To do so, head into the Winds directory and under /app there will be a .env file. Change the REACT_APP_API_ENDPOINT environment variable. Be sure to do this before uploading or your application will not load.
Prepping the Deploy Script 🚀
-
Verify that you want to actually deploy
-
Move into the /app directory
-
Create a build directory with compiled files and assets
-
Sync the build files and assets to your S3 bucket
-
Sync non-build, but necessary files to S3
-
Invalidate the cache
Final Thoughts 🤔
If you’d like to change the URL, I’d recommend taking a look at AWS Route53 for a DNS service. You can map your custom URL to your CloudFront distribution making Winds have a custom domain! If you haven’t had a chance to check out the post on how to deploy the Winds API, you can read it here. As always, if you have any thoughts or comments, please leave them in the comments below! Happy coding! 🎉