Deploy React App to S3 with Custom Domain

Amazon's S3 buckets are a service that allows us to store files in the cloud for a really really cheap price and in this video I'm going to show you how to deploy a react app or pretty much any front-end web app to an S3 bucket with a custom domain name [Music] I have a really basic react app here that I created using Veet and it's running on localhost Port 3000 and the home page is just the basic landing page for react app and then I have react router set up so that I can go to other pages so here's another page that just grabs a random Kanye West quote and displays it on the page so a really simple app two pages and we're going to deploy this to an S3 bucket and before we do that I should mention that when we create react apps using things like create react app or Veet there are a lot of Dev tools set up that help us do things like transpiling jsx or typescript into base JavaScript says hot module replacement and npm dependency resolution and these are all things that are built into the dev environment that we're not going to use in production so we don't want to deploy the create react app or the servers and Dev tools running on Port 3000 to our production environment what we want to do is build this app into the basic HTML CSS and JavaScript files and then just deploy those into production because that's all these front end apps really are just bundled HTML CSS and JavaScript files so we can build the app by running yarn build or npm run build and this will build all of the files into the bare minimum HTML CSS and JavaScript files and if you're using Veet then you'll end up with a dist folder if you're using Create react app you'll end up with a build folder but if we open that up we'll be able to see an index.html file and a few other static files here I've got uh let's see some JavaScript and some CSS and there might be a few more files there but this is all we need to deploy the app this is what we're going to put on the S3 bucket so we're only concerned with the dist or build folder in this case so now that we have the static assets we need to put them onto an S3 bucket and in order to do that we actually need to create an S3 bucket so I'm going to head over to the AWS console and navigate to the S3 dashboard here and we're going to set up a brand new S3 bucket so I'm going to click the create bucket button right there and if I want to use a custom domain name here like samichwood.com I would have to have set up that domain name in AWS already so I have that set up in Route 53 if I navigate to the Route 53 service here I already have samichward.xyz setup and I covered how to do this in a separate video so if you haven't done this part already go check out that other video I'll leave a link in the description but once you have your custom domain name set up in Route 53 you can move on to creating the S3 bucket because when we create the bucket we need to name the bucket exactly what the domain name will be so since I have sandwichword.xyz I could use that as the bucket name or I could create a subdomain here something like my site dot samitwa.xyz either of those would be fine I'm just going to use the root domain here but it's really important that this exactly matches whatever the domain name is going to be for your S3 bucket it doesn't really matter which region I put it in but I'm in Canada so maybe I'll just put in Canada here and then object ownership we can leave the default settings there and since this is going to be a public website available over the public internet I need to uncheck the block or Public Access checkbox here so this will allow people to actually access the things within the bucket and if we do that we need to acknowledge that we're now allowing people to access the files in this bucket we can leave everything else as the default settings and then create this bucket so now that the S3 bucket has been created I need to go back into the bucket and upload those static files from the react app so that's the index.html and the other files so I'm going to open up my react app directory and I have that dist folder and in here I can just take these files and drag and drop them into the S3 bucket and I'll show you a slightly better way of doing this later on but right now this is great I can just drop all of those files in Click upload and now all of my react app will be uploaded to the S3 bucket so once that's done I can click close here and my bucket is setup all the files are uploaded but there's still two more things I need to do in order to get this website working so the first they need to go into the properties of the S3 bucket and scroll down to the bottom where it says static website hosting and here we need to edit this and enable this S3 bucket for static website hosting so we just change that to enable there host a static website and then it's going to ask us which file is the index document so that's the index.html file and then which is the error document and this is the document that it will provide if someone tries to request something that doesn't exist or there's any other errors and in more classical websites we might have a different HTML page for each different resource each page that someone might visit but in a react app especially when using react router we're going to navigate around to different pages that don't actually exist we're always serving up the index.html file and allowing our JavaScript code to take over and present whatever to be presented so in this case we need to specify index.html for both files and that means that no matter what happens we just always need to serve up that entry point into the react app so once that's done we can save changes here and if we scroll to the bottom again we should see a link to the website and we'll change this in a little bit to have it as a custom URL but right now we can use the standard S3 URL and if I click on this we will get a 403 Forbidden message and this is great this means that everything so far has been set up correctly but we still need to give permission for people to actually access these files the files are public it's set up as a website but we still need to Grant permission so for this we need to go to permissions and scroll down to the bucket policy right here and currently the bucket policy should be empty but we're going to edit this to create a policy that allows anyone to access the website files over the Internet so down here we can click on this add new statement button and the service that this is for is S3 so we'll click S3 there we want to only allow get object there we go this will allow someone to actually access the files in the bucket and then if we scroll down to add a resource it's going to be S3 the resource type is the object and here we need to replace this bucket name with the name of the bucket so the name of my bucket is samichward.xyz and we want to allow access to all of the objects in there all the JavaScript CSS and HTML files so it should end up looking something like this and I'm going to click add resource and that should be it I'm just going to scroll up here and check this out so this is the policy it's a Json policy and here we have the rules for how things can be accessed so we're going to allow access to the objects in this bucket and any object in there but we need to modify the principle here because this says what is allowed to get objects from the bucket and we could say that a specific AWS user can do this or a specific account but we want to put in a star here in quotes to say the that anything from anywhere you know people over the public internet are able to access the objects in this bucket so this is what the policy should look like and I'll leave links to all the code in the description um and then I'm just going to save these changes and that should be it yeah we can see the permissions this is uh Public Access there's the policy that we added so if I go back to this page where I was trying to access the site before this should now work and I should get my react app so this react app again is the basic react app I have two pages of home page and another page and this just makes a request to get a random quote and then back to the home page just a normal home page so this is all working but currently it's using the S3 default domain name and we want to have a custom domain name so we have to go back into AWS now and head over to Route 53 and go back to the hosted Zone that is associated with the bucket so in this case the Sam each war.xyz for me so I'm going to click on this and I need to create a new record for my S3 bucket so I'm going to click this orange button and I'm in the Wizard view here if you're in the quick create view just click the Switch to wizard it's a little bit easier and we want a simple route so I'm going to select that and then click next down on here and then Define a simple record and if I had created this as a subdomain I would have to enter the subdomain here but because I'm using the root domain I'm just going to go down to choose endpoint and select S3 and this is going to create an alias to an S3 website endpoint then the region I think I did this in Canada and then my S3 endpoint it should only appear the one that can actually be used for this and that's the bucket with the name that is identical to the route that I'm creating so samichwa.xyz and that's it Define simple record so I'm going to click that and then I'm going to click create records here and that's all I need to do in Route 53 that will set up the DNS record for my S3 bucket now this can take a little bit of time uh it usually takes around 30 minutes to a couple of hours for me depending so I'm going to skip forward a little bit to when this is working and then we'll cover a few more things while you're waiting make sure you're subscribed to this Channel and hit the Bell icon so you don't miss any future videos and consider joining the channel membership if you'd like to support me so I can make more of these tutorial videos so this is now working with my custom domain sandwichword.xyz and I've got my pages set up here I have the entire App working and that's it now the S3 bucket is set up the domain name is set up and the only thing you would need to change is the contents of the bucket if you ever updated your site so let's do that right now let's say we make an update to the site and I'm just going to go into this page and create a new P tag and just put some update in here it's just some updated code uh the first thing I'll need to do is rebuild this project because I need to create new HTML CSS and JavaScript files depending on what kind of updates I do so once that is done I need to grab those files and put them into the bucket so I'm back in my bucket here and all I really need to do is uh grab out of the disc or build folder and drag and drop them into my bucket just like I did before and that will override the existing files there so that's a pretty simple process that's all done now and it should be pretty immediately I should be able to go into here onto the other page I'm going to refresh and see there's some update anytime you want to update a feature you just rebuild and re-put into S3 however always building and then having to open up S3 in a web browser and drag and drop the files in uh isn't ideal the process can be a lot nicer if we use the AWS CLI and I have another video on setting up the AWS CLR and I'll put a link in the description if you haven't set up the CLI go check that out but basically it allows us to write a short amount of code to do this process for us and I have all the code for this kind of stuff in an article that I'll link to but all we need is this single line here AWS S3 sync directory and I could make a A bash script for this but instead I'm just going to put it in the package Json so what I'll do is create a new script called sync and this is going to sync up the local files from my dist folder to my S3 bucket so all I need to do is have AWS S3 sync the directory path so in my case it is dot slash dist it might be dot slash build if you're using Create react app and then the actual name of the bucket and this is Sam Meech ward.x y z and that should be all you need I'm going to put my profile here too because I have multiple AWS accounts set up on this computer but now I should be able to just run this line of code uh by running yarn sync and it should sync up uh any files from my dist folder so let's just make another change Let's uh see how this might work so some updates again again so a new update here the process would now be yarn build to make sure that all of those uh files get built for me and then yarn sync and that should push all of the new files up to S3 so by just running those two commands like that I'm able to update my site on S3 and if I went back to the S3 site and refreshed I'll be able to see my updates there so using the CLI can streamline the process a little bit make it a little bit nicer you don't have to use it but I think it's a way nicer way of maintaining your website on an S3 bucket and there's one more thing I want to point out here and that's uh that the website is being hosted over http not https so when we look at it it says it's not secure up here and if we try to access this over https it just wouldn't work it would uh just spin forever loading and nothing would happen and this is because we can't host a static website on S3 using https it only supports HTTP in order to actually use https we would need to integrate the S3 bucket with a cloudfront distribution so if you're interested in doing that I'm going to make a video on that and I'll leave a link to that video in the description of this one [Music] foreign [Music]

Channel: Sam Meech-Ward

Views: 18,791

Keywords: cloudfront s3 static website, s3 static website, s3 static hosting, route 53, s3 bucket, static website, s3 bucket in aws, s3 bucket public access, static website hosting using s3, static website aws s3, s3 static website hosting, static website react, s3 static website route 53, s3 static website tutorial, aws cloudfront s3 static website, hosting a static website on amazon s3, launch a static website on amazon s3, react app on aws s3 with static hosting

Id: 7djMZ5OTG_E

Length: 14min 4sec (844 seconds)

Published: Mon Jun 27 2022