AWS-React-File-Repo

React app for uploading/downloading files using AWS cloud services (Cognito User Pools, S3 storage, Apollo GraphQL API, etc)

Installation

Install Amplify CLI

npm install -g @aws-amplify/cli

Configure Amplify

amplify configure          #create or select a user for this project (e.g. 'myapp')
? region:  eu-central-1
Specify the username of the new IAM user:
? user name:  aless80
Enter the access key of the newly created user:
? accessKeyId:  AKIABCD**********
? secretAccessKey:  abcd1234********************
This would update/create the AWS Profile in your local machine
? Profile Name:  aless80

The second command configures the AWS access credentials, AWS Region and sets up a new AWS User Profile.

Install this react app

A new react app needs additional aws packages such as: aws-amplify aws-amplify-react. These packages are already present in package.json and can be automatically installed with:

cd react-file-repo
npm run install

Amplify initialization

amplify init
? Enter a name for the project filerepo
? Enter a name for the environment env
? Choose your default editor: Visual Studio Code
? 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
Using default provider  awscloudformation
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use aless80

This creates a bucket in AWS S3 called filerepo-env-<number>-deployment.

Add Amazon CloudFront Hosting

amplify add hosting
? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
? hosting bucket name filerepo-hosting
? index doc for the website index.html
? error doc for the website index.html

This creates a bucket in AWS S3 called filerepo-hosting-projenv.

Add Amazon Cognito User Pools

amplify add auth
Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in? Username
Do you want to configure advanced settings? No, I am done>

Add AWS S3 storage:

amplify add storage
? Please select from one of the below mentioned services Content (Images, audio, video, etc.)
? Please provide a friendly name for your resource that will be used to label this category in the project: filerepo
? Please provide bucket name: filerepo
? Who should have access: Auth and guest users
? What kind of access do you want for Authenticated users? create/update, read, delete
? What kind of access do you want for Guest users? read
? Do you want to add a Lambda Trigger for your S3 Bucket No

This creates a bucket in AWS S3 called filerepo-env.

Push to AWS Amplify:

amplify push

Additional configurations

Make a bucket public

This software will upload files to a /public folder in that bucket. To allow anybody to download the files in that folder you will have to grant it public access. To do this manually:

Go to the AWS Management Console
Navigate to S3 > filerepo-env bucket > Select the public folder > Click the Actions tab > Make public

To do the same programmatically try this (I have not tested it yet):

aws s3api put-object-acl --bucket filerepo-env --key public --acl public-read

Edit a bucket's CORS

This programs can store metadata in S3. To retrieve them, you will have to add CORS. To do this manually:

Go to the AWS Management Console
Navigate to S3 > Select the filerepo-env bucket > Permissions > CORS configuration > Add the following entries:
```
x-amz-meta-comment
x-amz-meta-level
```

To do the same programmatically try this (I have not tested it yet):

aws s3api get-bucket-cors --bucket filerepo-env

Launch the app

Launch the app with npm run start and go to http://localhost:3000/.

Create a user with an associated email address. Get the verification code to confirm the user. Finally sign in to use the app.

Documentation

AWS documentation

AWS Amplify Authentication

AWS Amplify Storage

AWS Amplify API

GraphQL Transform

Tutorials

Tutorial Amplify

Tutorial Serverless REST API

Using AWS SDK in Node.js

Add Amplify backend to React App

Generate new AWS credentials

Browse to AWS IAM console > Security credentials tab > Access keys section > Create access key. You can download the csv and place it in /src, which is git ignored.

Configure the AWS CLI with your using the access keys: aws configure

Start

Use one of the following to start the front-end:

npm start
nodemon start

To start the Node.js backend:

cd backend
nodemon server.js

Build, Eject

Build the app for production to the build folder:

npm run build

See the section about deployment for more information.

Remove the single build dependency from your project (note: Once you eject, you can’t go back!):

npm run eject

aless80/AWS-React-File-Repo