Deploying the Winds App to Amazon S3 and CloudFront
Nick P.
â˘over 2 years ago
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 đ
First things first, head on over to the S3 console on AWS and create a bucket. Iâm going to name my bucket âwinds-2-0-hostedâ, however, feel free to name yours anything youâd like! Click next and continue through the steps. Weâll be changing up some of the settings, so be sure to follow along. đ Next, within the âPropertiesâ, open the âStatic Website Hostingâ tab and select âEnable websiteâ. Fill in index.html for both the Index and Error documents. By specifying index.html as the Error Document, we can allow react-router to handle routes outside of the root.
Open the âPermissionsâ tab and select âEdit Policyâ. Here, weâre going to modify the permissions of the bucket to ensure that users can see and load the contents of Winds. The bucket policy can be found below:
Setting up CloudFront đ¨
CloudFront is the Content Delivery Network (CDN) service offered by AWS. CDNs optimize for speed by pushing your content out to edge locations around the world, making it highly available around the globe. Because Winds is a rather demanding application and has a lot of resources to add, weâre going to take it to the next level with CloudFront. Letâs go ahead and setup CloudFront. Once set up, weâll then point it to the S3 bucket that we created in the previous step. To get started, head over to the CloudFront console and click âCreate Distributionâ. Youâll be presented with the following screen. Choose âGet Startedâ under the âWebâ section. In the drop-down named âOrigin Domain Nameâ, select the S3 bucket that to previously created. In our case, it will be named âwinds-2-0-hosted.s3.amazonaws.comâ.
The rest of the settings will be pre-populated with the correct values, so scroll to the bottom and click âCreate Distributionâ. Your distribution will take a couple of minutes to generate, so be patient. Once generated, click on the CloudFront distribution, followed by the âDistributionâ tab. Once that has loaded, click on the âEditâ button and set the âDefault Root Objectâ to index.html and click the âYes, editâ button at the bottom.
Now, click the ID of your newly created distribution to reach its settings page, then click on the âError Pagesâ tab. Select âCreate Custom Error Responseâ. Select Yes for a custom error response, set â/index.htmlâ for the âResponse Page Pathâ and â200: OKâ for the âHTTP Response Codeâ. This custom error page in the CloudFront distribution is analogous to the Error Document on the S3 bucket. When finished, click Create. Youâll want to create a second error page as well, this time with the âHTTP Error Codeâ set to â404â, the âResponse Page Pathâ path to â/index.htmlâ (again), and the âHTTP Response Codeâ to â200: OKâ.
Once that is complete, head back into the settings and click on the âBehaviorsâ tab. Click âCreate Behaviorâ and select âRedirect HTTP to HTTPSâ to force all traffic to HTTPS, as well as âAllowed HTTP Methodsâ to âGET, HEAD, OPTIONS, PUT, POST, PATCH and DELETEâ. Then click âYes, editâ at the bottom.
Thatâs it for now! You can find the URL on the distribution listings page, under the Domain Name column. Let your distribution sit for a couple of minutes to let all of the settings propagate.
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 đ
When deploying Winds on our end, we use a handful of scripts for both the front and backend. Luckily, the frontend only requires one file. This file must be located inside of your Winds directory and have the proper permissions. To create the script, move into the Winds directory and create a file called deploy.sh. Open deploy.sh and paste the following into the file:
Next, letâs set the permissions on the file: Note: You must change the following in order for the deploy script to properly work! 1. On line 16, change the homepage to the Domain Name provided by CloudFront as shown in the screenshot below:



-
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
Deploying to S3 & CloudFront đ¤ Now that everything is created and properly set up, letâs go ahead and give it a shot! Make sure that you are in the Winds directory, and type ./deploy.sh to fire off the script. When it prompts you, press âyâ followed by pressing enter. A series of events will happen automatically and youâll see the output below when the script is complete. You did it! Your application should now be live at the URL that CloudFront provides.
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! đ