Skip to content

Preparing your development environment

1. Create a Cloud9 instance for development

1.1. Open the AWS Cloud9 console at https://console.aws.amazon.com/cloud9/.

1.2. Click on Create environment.

Cloud9 Create environment

1.3. For the Name type amplify-workshop, and choose Next step.

Cloud9 name environment

1.4. For the Configure settings section, select the instance type t3.small and choose Next step.

Cloud9 Settings

1.5. For the Review section click on Create environment.

1.6. Wait a few seconds until your development environment is ready, you will see the following screen.

Cloud9 Env

1.7. For this lab is required to see hidden files, click on preference icon and click on Show Hidden Files.

Show Hidden Files

2. Create an IAM user with administrator privileges

2.1. Open the IAM console at https://console.aws.amazon.com/iam/.

2.2. Choose Users, then Add user.

2.3. Type a name for your user AmplifyWorkshopAdmin, choose Programmatic access and click Next: Permissions.

IAM User name

2.4. Click Attach permissions policies and select Administrator Access, choose Next: Tags.

User Policy

2.5. For Add tags (optional) section choose Next: Review.

2.6. Click on Create user.

2.7. To save the credentials, choose Download .csv and then save the file to a safe location, and Close.

User Created

3. Configure your AWS CLI with your IAM credentials

3.1. Inside the Cloud9 environment, click on AWS Cloud9 and Preferences.

Cloud9 Preferences

3.2. Select AWS SETTINGS and turn off AWS managed temporary credentials.

AWS SETTINGS

3.3. In the bash terminal we are going to configure the AWS CLI as follows:

aws configure
  • For this configuration use the values inside the credentials.csv file previously downloaded.
    • AWS Access Key ID: (Type your Access key ID)
    • AWS Secret Access Key: (Type your Secret access key)
    • Default region name [None]: us-east-1 (Use your region code, all Regions)
    • Default output format [None]: json

AWS Configure

3.4. Remove aws_session_token variable from aws credentials.

sed -i 's/aws_session_token =//g' ~/.aws/credentials

4. Configure and run the base React application

4.1. Inside your environment folder clone the repository project from GitHub.

cd ~/environment/
git clone --single-branch --branch start https://github.com/aurbac/react-my-todos.git
cd react-my-todos
git branch master
git checkout master

Cloud9 git

4.2. Install the Node.js dependencies.

npm install

4.3. Run the project.

npm start

Run project

4.4. Once the web server has started, click the Preview menu and select Preview Running Application.

Cloud9 preview

4.5. If you’d like, you can also pop the preview to a new window.

Cloud9 pop

4.6. Finally, open another terminal window. We’ll leave this first terminal alone since it’s running the web server process.

Cloud9 new terminal

5. Create an AWS CodeCommit repository

5.1. Open the CodeCommit console at https://console.aws.amazon.com/codesuite/codecommit/home.

5.2. On the Repositories page, choose Create repository.

5.3. On the Create repository page, in Repository name type react-my-todos and enter a Description, choose Create.

Creare CodeCommit Repository

5.4. From the Clone URL drop down, select Clone HTTPS, you will use the URL copied later.

CodeCommit Repository

6. Using AWS CodeComit repository

6.1. Your AWS Cloud9 development environment already have IAM credentiales configured, use these credentials with the AWS CLI credential helper. Enable the credential helper by running the following two commands in the terminal of your Cloud9 environment.

git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true

6.2. Go inside react-my-todos folder and remove remote from git project.

cd ~/environment/react-my-todos/
git remote remove origin

6.3. Use your repository URL to add your new Git origin to your project, the following command add it depending of the AWS region that you are working on.

export MY_REGION=`aws configure get region`
git remote add origin https://git-codecommit.$MY_REGION.amazonaws.com/v1/repos/react-my-todos

6.4. Configure Git with your name and email.

git config --global user.name "Your Name"
git config --global user.email you@example.com

6.5. Adding, committing, and pushing files to the CodeCommit repository.

git add .
git commit -m "Preparing your development environment"
git push origin master

6.6. Now you can use the CodeCommit console to review the files in a repository or quickly read the contents of a file.

CodeCommit Code