Exercise 1: Setup AWS acccount and Amplify

You will use AWS services to develop and host your serverless app. So, before you dive deep into coding your app, you'll need to set install and set up AWS account and Amplify CLI

Do you have an AWS account you can use? You need one account per team.

Most likely all the exercises for this workshop will be free, as all the services we'll use have a generous free tier. But let's assume that the cost can be anywhere between $0 and $3 per month. Are you still ok with using your own AWS account?

If the answer to any of previous questions is no, please contact the instructor to get a temporary account for your team.

Tasks

This exercise has the following tasks:

  1. Get an AWS account
  2. Clone the React app
  3. Setup the Amplify CLI and credentials

Get an AWS account

You can create an AWS account at https://console.aws.amazon.com. Keep in mind you'll need to add a payment info and confirm your phone.

If you can't create an account contact the instructor to get a temporary account access.

Clone the React app

As already mentioned, your friend started building a simple React app using Create React App, React Hooks, React Router, and Ant design.

You can get the source code of that app here. Please clone the repository to your computer and navigate to that new folder in your terminal.

Run the npm install command to install the dependencies, and then run the npm start command to confirm that your front end app works.

If you don't like the app or you want to use some other front end framework, feel free to build your own frontend.

Setup the Amplify CLI and credentials

First, install the AWS Amplify CLI by runnning the following command:

npm install -g @aws-amplify/cli

Then configure your credentials by running the following command and follow the steps:

amplify configure

When the configuration is done, navigate to the frontend project folder in your terminal and run the following command:

amplify init

This command will initialize a new Amplify project in your React app. The command will prompt you for the following things:

  • Enter a name for the project: meetup-app
  • Enter a name for the environment: dev
  • Choose your default editor: Visual Studio Code (or your default editor)
  • Please choose the type of app that you're building: javascript
  • What javascript framework are you using: react
  • Source Directory Path: src
  • Distribution Directory Path: build
  • Build Command: npm run-script build
  • Start Command: npm run-script start
  • Do you want to use an AWS profile? Y
  • Please choose the profile you want to use: amplify-user (or other name you specified in the previous step)

Once initialization is done, you should see a new folder in your react project: amplify.

Finally, install NPM dependencies required by Amplify by running the following command:

npm install --save aws-amplify aws-amplify-react

Hints

results matching ""

    No results matching ""