Get familiar with the Amplify CLI - Amazon Web Services (AWS) Tutorial

- [Instructor] It's time to get started building your React App. We're going introduce a new command that is very similar to what you've already used NPM. NPM is the node package manager and now we're going to use NPX. The X here is an abbreviation for execute. NPX allows us to run commands that are stored in the NPM repository without having to install those commands locally. And this is something you typically would do if you're only going to use the command once or twice in the life of a project. That's actually exactly what happens when you start to use create React App. You use it once at the beginning of a project like the one we're on, and then you don't ever use it again. So type in NPX create react app and then give a directory name and I'm going to use Hplus. We're going to create a web application for a fictional supplements company. So Hplus will be the name of the directory where that application will be stored. And hit enter. And now what's going to happen is most of the files needed to execute create react app are going to be fetched and used remotely with only a little bit of that coming down. This is really helpful because it keeps your machine cleared up from a lot of cruft. You'll notice that it is taking quite a bit of time because it's executing and pulling down a lot of this. It still does keep things relatively clean on your machine. Now this takes a bit, so we're going to come back when this has finished. You'll know that things have finished because you'll get a command prompt back, but you also should see this success message. It tells you that it's created a new directory and it's also given you some sample commands you can try out to get started. The main thing you want to do right now though, is change into the new directory Hplus, and look around a little bit. So I'm going to do a directory listing and you'll see a number of files. You've got a public directory, where you can put assets used by your site, a source directory, where your code will go. You've got Jason files for the packages that will be involved in an automatically generated read me and a directory for node modules. This will be important as we build out a react app to interact with an API. Now that we have this, we want to go ahead and set our application up or at least begin to set our application up for interacting with amplify. So just as we used NPM for that, we're now going to use amplify a knit and this is going to effectively connect our project which we're going to call Hplus with our AWS account using the profile we set up earlier. So most of these defaults will work. We want to call the project Hplus. The environment is dev that's great. I am going to use visual studio code where you can select whatever your favorite editor is here. This is a JavaScript application not Android or iOS. It's react, but you will notice that you can use amplify with vue or angular, ember even. I'm going to pick react. My source directory path is source. My distro directory is build. So again, most of these defaults will work. It's going to use by default cloud formation. You could use something like Terraform, but we're going to use cloud formation. And then do want to use an AWS profile. Specifically, we want to pick the amplify profile that you should have created earlier. Again, we don't want all this sitting in our default profile. We want to break it up a little bit. So once you do all that, it's going to go I think for a little bit. Make sure that everything is set up like you expect. And then it's going to create some resources. So what you see here are some new roles and I am being created and here's an S3 bucket. And then it's going to connect these things together. So this is the cloud formation stack working through everything needed to initialize your project in the cloud. This also takes a little bit of time, but not nearly as long as running create react app using NPX. So you can see that it has created those. And then finally you're going to get back a command prompt with this message. Your project has been successfully initialized and connected to the cloud. And then just as NPM gave you some suggestions amplify also will show you some commands that you can use next.