/AWS-Amplify-Demo-React-App

A demonstration of how to use the AWS Amplify CLI to configure AWS cloud resources and the AWS Amplify NPM module to interface between AWS and a React app

Primary LanguageJavaScriptMIT LicenseMIT

AWS Amplify Demo App

A demonstration of how to use the AWS Amplify CLI to configure AWS cloud resources and the AWS Amplify NPM module to interface between AWS and a React app

Example »

How to Use

  1. You’ll need to have Node ≥ 8 and Yarn on your local development machine. Installing Yarn will also install Node if it doesn't already exist in your environment.

  2. Clone and enter the repository with a terminal.

  3. Run yarn to install the demo project's dependencies.

  4. Run npm i -g @aws-amplify/cli to install the AWS Amplify CLI globally.

  5. Run amplify configure to configure the AWS Amplify CLI for your local development environment, create a new IAM user for the Amplify CLI, and install an IAM profile and credentials in ~/.aws.

  6. Run amplify init to initialize the AWS Amplify CLI for the demo project and create initial AWS cloud resources. Choose your editor, and use the default options for the rest of the settings. Choose the AWS profile that you created with amplify configure.

  7. You can list the available categories of cloud services with amplify categories. Create AWS backend resources by running amplify add <category-name> to launch into a configuration wizard. This project requires the storage category, so run amplify add storage and choose to set up a user content bucket. When configuring storage, Amplify will configure auth as a prerequisite: for this ensure that unauthenticated users are permitted and that they have read/write access.

  8. Run amplify push to provision AWS resources in the cloud and add the aws-exports.js file to the /src directory. The application will crash without this file.

  9. Run yarn start to build the app for a development environment and open a browser window showing the local web server at http://localhost:3000. The page will automatically reload as you make changes to the code.

  10. After developing the application to your liking and having added S3 hosting through amplify add hosting, run amplify publish to provision AWS resources in the cloud, create or update aws-exports.js, run the frontend build command react-scripts build to create an optimized production bundle in /build, and publish the static site build to S3.

More Information

amplify help
High-Level CLI Overview
AWS Amplify CLI Getting Started Guide
AWS Amplify CLI Announcement
Create React App

Note

AWS Amplify (or Amplify.js) and AWS Amplify CLI are different, but related software projects. The CLI is used for automated AWS cloud resource configuration and deployment, and it exports a file aws-exports.js that is used by the single-page application to configure Amplify.js. Amplify.js provides a declarative interface to AWS services from the single-page application.