Create & Configure an AWS Amplify Project with a React Application

nader dabit
Instructornader dabit
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

In this lesson we’ll create a new React application, create a new AWS Amplify project, & configure the React application to begin working with Amplify & AWS services.

Instructor: [00:01] Now that we've installed and configured the CLI, let's create a new React application, and then initialize a new Amplify project within the React application.

[00:14] To do so, we'll use create React app to create a new React application called My Amplify app. Once the new React application has been created, let's change into the new directory.

[00:31] From within the new directory, we'll run Amplify init to initialize a new Amplify project. We'll then be prompted for a few options. For the default editor, I'll choose Visual Studio code. For the type of app we're building, we can choose JavaScript. For the framework we're using, we can choose React.

[00:49] The source directory can be left as source. The distribution directory, build. The build command can be left as build. The start command can be left as start.

[01:04] Next, we're given the option to choose an AWS profile. Here, we can choose the profile that we created when we configured this CLI.

[01:18] Now, our Amplify project has been initialized. We should now see a .Amplify rc file, as well as an Amplify folder, in our root directory.

[01:29] The last thing we need to do is install the AWS Amplify and AWS Amplify React Client Libraries into our React application.

[01:39] To do so, we can either use npm or yarn to add AWS Amplify and AWS Amplify React.

[01:53] Now, the React app has been configured, the Amplify project has been created, and we're ready to begin adding new features.

nader dabit
nader dabitinstructor
~ 5 years ago

Noe - The newer versions of the CLI no longer will create the .amplifyrc file.

Steffen Weidenhaus
Steffen Weidenhaus
~ 5 years ago

@nader - It did create it for me. Please note that the "ls" command won't show hidden files, so use "ls -a" or "ls -la"

とうせいきょう
とうせいきょう
~ 5 years ago

Yes, the newer versions(1.1.2) of the CLI no longer will create the .amplifyrc file

~ 5 years ago

When I type 'npx create-react-app my-amplify-app' into terminal I get an error message and it doesn't create the app: "yarn add v1.5.1 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... error css-loader@1.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". error An unexpected error occurred: "Found incompatible module". info If you think this is a bug, please open a bug report with the information provided in "/Users/robertsmith1/my-amplify-app/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Aborting installation. yarnpkg add --exact react react-dom react-scripts --cwd /Users/robertsmith1/my-amplify-app has failed.

Deleting generated file... package.json Deleting generated file... yarn.lock Done."

I've googled everything I can think of, tried a bunch of 'fixes' but nothing has changed.

Markdown supported.
Become a member to join the discussionEnroll Today