Hosting & Continuous Deployment for Front End and Serverless Back Ends using AWS Amplify

Instructor: [00:01] We'll start off with a pretty basic React application that for right now only has client side code.

[00:10] Next, we'll initialize a new Amplify project by running amplify init. Here, we'll set the project name, as well as other base configuration.

[00:37] If you don't yet have an AWS profile, first run amplify configure to set one up.

[00:48] Next, we'll add our authentication feature by running amplify add auth.

[01:03] Next, we'll install AWS Amplify and AWS Amplify React.

[01:17] Now, we'll open the project in our text editor and go to index.js. Here, we'll import Amplify from AWS Amplify, the config from the AWS exports generated by the CLI. Then call amplify.configure passing in the config.

[01:44] Next, in app.js, we'll add authentication. Here, we'll import the withAuthenticator Higher Order Component from AWS Amplify React. Change the default export to be the withAuthenticator, passing in the app component as the first argument, and an object with include greetings, set to true, as the second argument.

[02:15] Next, I'll go to GitHub and create a new repository for this project.

[02:33] Back in the project, we'll initialize a Git repository, add the changes, and then push them up.

[03:00] Next, we'll open the AWS Console and search for AWS Amplify. Here, we'll click get started to deploy a new project. Next, we'll select GitHub as a Git provider and choose continue.

[03:20] Here, we can choose the Git repository that we just created in the master branch within that repository.

[03:32] Here, you can choose to either deploy the front-end only or the front-end and the back-end using either an existing or a new environment. Let's go ahead and create a new environment called Prod.

[03:45] You can choose an existing service role if you have one created or you can click create new role to create a new role. Here, we can accept all the defaults by clicking next permissions, next tags, next review, and then giving the role a name.

[04:12] Back in the console, the new role should show up when we click the refresh button.

[04:24] To deploy this app, we can now click "save and deploy."

[04:32] If the deployment is successful, we should see four green check marks as well as a screenshot of our application. We can click on the URL to launch the app.

[04:45] Here, I'll go ahead and create a new account and then sign in.

[05:13] Once signed in, we should see our original application.