From the course: AWS and React: Creating Full-Stack Apps
Solution: Host your React app on AWS - Amazon Web Services (AWS) Tutorial
From the course: AWS and React: Creating Full-Stack Apps
Solution: Host your React app on AWS
(upbeat music) - [Instructor] So let's go through this. So here in Visual Studio, I have the source code up from the last time. So this source App.js file. And I'm just going to make another change here, and I'm just going to put "Hazzah!" or something in the file and save it. And if I go to the terminal, I should see this picked up, and I should also be able to see it in the browser. So here in the terminal, I see that it compiled successfully and should be running in the browser. So let me go check that too. Here it is in the browser, "Hazzah!" So now what I want to do is publish this to AWS. So back in the terminal, I'll run that from the command line. So back where I originally published this, I'm going to run it again so I can just actually up arrow to pseudo amplify publish 'cause that's the last thing I did. So I hit return here. I give it the password for my pseudo and this could take a couple minutes again, but it should be pretty straightforward. Do you want to publish the front end? Yes. Okay, and once it's done, I get the same URL, so I can copy this or I could refresh the browser if I still had it in there. So back in the browser I can see that I have my updated version of the app running from the server. Now you might need to refresh this and also you might need to clear your cache from your browser and even wait a couple minutes as the changes get propagated across CloudFront. I also want to show you how you can see these changes in AWS in your S3 bucket. So I'm going to go to the S3 console and go down into the hosting bucket. And then I'm going to go down into the static folder and the JavaScript folder. And I can see the different dates on these files in here. And I want to look for probably one of the later JavaScript files. So I'm going to command click on this to open it up in another tab and then I can open it with the button up here open. And if I look at the source here, I should see "Hazzah!" or however I changed this file. And there it is. So I know the file is on the server. If it takes a few minutes for it to update, I can use this to verify that my changes were published, even if I'm not seeing them quite yet in the browser. Anyway, I'm sure you did great on that. Let's keep pushing forward.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
(Locked)
React app concepts1m 43s
-
(Locked)
Using npm to create a React app2m 26s
-
(Locked)
Editing a React app2m 17s
-
(Locked)
AWS S3 hosting with Amplify5m 43s
-
(Locked)
Hosting your React app on AWS6m 1s
-
(Locked)
Challenge: Host your React app on AWS1m 28s
-
Solution: Host your React app on AWS2m 29s
-
(Locked)
-
-
-
-