From the course: Build a React Application Using AWS Amplify

create-react-app saves you time - Amazon Web Services (AWS) Tutorial

From the course: Build a React Application Using AWS Amplify

Start my 1-month free trial

create-react-app saves you time

- [Instructor] It's time to get moving. We're going to introduce a new command that is very similar to one you've already used. You've already seen npm and install and the various things you can do with npm. Now we're going to look at npx. And the x is typically considered an abbreviation for execute. npx allows us to run commands that are stored in the npm repository without having to install that actual command. So you already saw that we did an npm install with the -g to pull down some of the various libraries for the Amplify CLI. We're now going to use create-react-app, but we're going to use it remotely. In other words, there's no need to pull all of this down because you typically only use create-react-app once when you create an application. You don't keep going back to it. So there's just no point to actually having it there. So we're going to do npx and then create-react-app and then we're going to put in kineteco. Now kineteco is going to be the name of the site we're building up here. And so what we want to do is we want to run create-react-app on kineteco and have it put everything into that directory. So I'm going to hit enter here, and this is going to kick off a process and it's going to look a lot like if you would actually run npm. It's going to actually go out and do a sort of temporary poll of certain files while running others remotely. And you can in fact see that it's installing react, react-dom, and react-scripts. So npx will figure out some of the things you need locally, and it will also figure out what you can do remotely. Now, this may take a bit, so we're going to jump ahead to when this process finishes. Once the installation process finishes, you should see something like this, a success message, and then specifically instructions that the kineteco app, which is where we're going to do all of our work, now has been created as a sub-directory. So I can do a directory listing. And indeed there is kineteco. It's also worth noting that you're going to see a number of other commands that now will work inside that directory. And we're going to use a lot of these. So I'm going to leave these for when we get to each one, but know that you can play with these at any time, and you're not going to mess anything up. Now you can go into our new directory and take a bit of a look around. So notice that there are all kinds of things here. You have a public directory, a source directory where your code is going to go. You've got some JSON files for the package that will actually help configure this and a directory for node modules. It even creates a README file for you that's helpful if you're going to share this like in a GitHub repository for others to interact with. Now, the first thing we want to do is we want to actually begin to interact with AWS here. So we're going to use our Amplify CLI and click amplify init. And basically what we want to do is we want to connect this project into our AWS configuration. So we already have a name, kineteco, that works great. And let's indeed use a dev environment because we're just trying things out. Now you get some choices here. I'm going to be using Visual Studio Code throughout these examples, but you just need to pick whatever IDE you want to use. And then next up, we're going to create a JavaScript application. Again, pretty straightforward. You can pick whatever you're using. Obviously, we're focusing on react in this course, so we're going to choose react. And then these are all defaults work, Source as the Directory Path, Build as the Distribution Directory Path, and then the Build Command. Again accept the defaults here, the Start Command. These all are great. You're also going to see that AWS selects awscloudformation by default for you here. This is using CloudFormation which is the build tool under Amazon and allows it to stand up all these resources using the default provider. It's perfectly workable. You can use other things like Terraform, but that's really not relevant to what we're doing. Finally, you can use an AWS profile, which we do want to do. And this is where that profile we created earlier is helpful. So instead of adding this all into the default profile, go down to amplify or whatever you called the profile you created when you did configure and select that. This is going to go out to the cloud and you're going to see it create a number of resources. There's an IAM role. There are some S3 buckets here that are created and then permissions set on. And then here's that CloudFormation reference. So it's setting all this up in a repeatable way. That way, once you've created the project, you can recreate it quite easily. At this point, everything is being wired into your AWS account, so that when we later go back to the web console, this will also be available there. And it will finish when you get this last set. Your project has been initialized and connected, that's great. And now you have a bunch of different Amplify commands. We're going to be looking at those in future videos, but for now simply make sure that everything looks good in your directory and that amplify init finished successfully.

Contents