Full Stack Serverless with Architect & AWS Amplify

To learn more about architect, click here. To learn more about AWS Amplify, click here.

Back end

This project deploys a REST API built with Amazon DynamoDB, AWS Lambda, and Amazon API Gateway.

The main configuration is located at infra/app.arc.

Front end

The front end for this app is a basic React application configured with AWS Amplify. The React app calls the API and render the posts fetched from the database.

Getting started

To deploy this back end, be sure to have your prerequisites listed here configured.

1. Clone the repo

git clone https://github.com/dabit3/architect-with-react-and-aws-amplify.git

2. Change into the directory

cd architect-with-react-and-aws-amplify

3. Install the architect cli

npm install -g @architect/architect

4. Deploy the back end infrastructure

cd infra
npm install
arc deploy
cd ..
...

Once the deployment is completed, you should be given an API endpoint or keep it available somewhere for step 6.

5. Install the front end depenencies

```sh
cd arc-app
npm install

6. Configure the front end React project with Amplify

Open arc-app/src/aws-exports.js and add the API endpoint:

const config = {
  aws_project_region: 'us-east-1',
  aws_cloud_logic_custom: [
    {
      name: "arcapi",
      endpoint: "your-api-endpoint",
      region: "us-east-1"
    }
  ]
}

export default config

7. Running the app

To run the app, run the start command from the root of the React app:

npm start

Checking the endpoint

You should be able run run curl commands against your endpoint:

Querying posts

curl https://<app-id>.execute-api.us-east-1.amazonaws.com/posts 

Creating a post

curl -d '{"post": {"postID":"001", "type":"blog", "title": "My first post", "content": "Hello world"}}' -H "Content-Type: application/json" -X POST https://<app-id>.execute-api.us-east-1.amazonaws.com/posts

Getting a post by ID

curl https://<app-id>.execute-api.us-east-1.amazonaws.com/posts/001