Creating the React application & installing the dependencies

To get started, you’ll first need to create the React application. To do so, you can use npx.

~ npx create-react-app amplify-react-app

~ cd amplify-react-app

You can also install the create-react-app CLI globally by running npm install -g create-react-app

Next, you will need to install the dependencies. For this app, you’ll only need the AWS Amplify library:

~ npm install aws-amplify

After installing the dependencies you can now initialize a new Amplify project in the root of the React application:

~ amplify init

• Enter a name for the project

cryptoapp

• Enter a name for the environment

local

• Choose your default editor

Set your editor preference.

• 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?

Here, choose Y and pick the AWS profile you created when you ran amplify configure.

Now, both the Amplify project and the React app have been successfully created and you can begin adding new features.

Creating a new serverless function with the Amplify CLI

The next step will be for us to create the serverless function that you will be using for this app. The app you are building in this chapter is a cryptocurrency app. At first, you will hard code an array of cryptocurrency information in the function and return it to the client. Later in this chapter you’ll update this function to call another API (CoinLore) and asynchronously fetch and return data.

To create the function run the following command:

~ amplify add function

• Provide a friendly name for your resource to be used as a label for this category in the project:

cryptofunction

• Provide the AWS Lambda function name:

cryptofunction

• Choose the function template that you want to use:

Serverless express function (Integration with Amazon API Gateway)

• Do you want to access other resources created in this project from your Lambda function?

No

• Do you want to edit the local lambda function now?

No

If the function has successfully been created, you should see a message saying “Successfully added resource cryptofunction locally.” logged out to your terminal.

You should now see a new sub-folder located in the amplify directory at amplify/backend/function/cryptofunction.

Walking through the code

When you created this resource, a new folder in amplify/backend was created called function. Here, all of the functions created by the CLI will be stored. For now, you only have a single function called cryptofunction.

In this cryptofunction folder you will see a couple of configuration files as well as an src directory where the main function code is located.

Serverless functions are essentially just encapsulated applications running on their own. Because the function you created is in JavaScript, you’ll see that there are all of the things you’d typically see in any JavaScript application including a package.json and an index.js file.

Next have a look at the function entry point located at src/index.js, in the cryptofunction folder. In this file you’ll see that there is a function called exports.handler. This is the entry point for the function invocation. When the function is invoked, this is the code that is run.

You can handle the event directly in this function but since you will be working with an API, a more useful way to handle the event is to proxy the path into an express app with routing (i.e. _http://yourapi/<somepath>). Doing this you can have multiple routes in your function as well as multiple HTTP request methods like get, put, post, and delete. The serverless express framework provides an easy way to do this and has been built into the function boilerplate for you.

In index.js you will see a line of code that looks like this:

awsServerlessExpress.proxy(server, event, context);

This line of code is where the event, context and path are proxied to the express server running in app.js.

In app.js you will then be able to create HTTP request methods on whatever routes you create for your API, this example being a /coins route to fetch cryptocurrency.

app.get('/someroute', function(req, res) {
  res.json({
    data: 'hello world'
  });
});

Creating the coins route

Now that you have had a look at how the application is structured, let’s create a new route in app.js and return some data from it. The route that you will be creating is a /coins route. This route will be returning an object containing a coins array.

Now, let’s add the new route. Before the first app.get('/items') route, add the following code:

// amplify/backend/function/cryptofunction/src/app.js

app.get('/coins', function(req, res) {
  const coins = [
    { name: 'Bitcoin', symbol: 'BTC', price_usd: "10000" },
    { name: 'Ethereum', symbol: 'ETH', price_usd: "400" },
    { name: 'Litecoin', symbol: 'LTC', price_usd: "150" }
  ]
  res.json({
    coins
  })
})

This new route has a hard coded array of cryptocurrency information. When the function is invoked with this route, it will respond with an object containing a single property named coins that will contain the coins array.

Invoking the function locally

Now that you have created and updated the function with the new route, you can test it out. To do so, you can use the Amplify CLI invoke command.

From the root of the project, run the following command in your terminal:

amplify function invoke cryptofunction

• Provide the name of the script file that contains your handler function:

index.js

• Provide the name of the handler function to invoke:

handler

Once the function is invoked, there will be an express server running on localhost:3000.

Now that the server is running, you can send requests to it either using curl or a tool like Postman:

curl localhost:3000/coins

The curl request should return the data configured in the route for /coins.

Creating a new API

To create the API, you can use the Amplify add command. From the root of the project, run the following command in your terminal:

~ amplify add api

• Please select from one of the below mentioned services

REST

• Provide a friendly name for your resource to be used as a label for this category in the project:

cryptoapi

• Provide a path (e.g., /items)

/coins

• Choose a Lambda source

Use a Lambda function already added in the current Amplify project

• Restrict API access

n

• Do you want to add another path?

n

Deploying the API and the Lambda function

Now that the function and API have both been created, you need to deploy them to your account to make them live. To do so, you can run the Amplify push command:

~ amplify push

• Are you sure you want to continue?

Y

Once the deployment has successfully completed, the services are live and available to use.

The Amplify CLI has a command called status that can be used at any time to see the current status of the project. The status command will list out all of the currently configured services in your project and give you the status of each of them:

 ~ amplify status


Current Environment: local

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Function | cryptofunction | No Change | awscloudformation |
| Api      | cryptoapi      | No Change | awscloudformation |

The main thing to notice in the status output is the Operation. The Operation tells you what will happen the next time push is run in the project. The Operation property will be set to either Create, Update, Delete, or No Change.

Configuring a client app to work with Amplify

To use the Amplify client library in any application, there is a base configuration that needs to be set up, usually at the root level. When you created the resources, the CLI populates the aws-exports.js file with information about your resources. You will use this file to configure the client application to work with Amplify.

To configure the app, open src/index.js and add the following below the last import:

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

The Amplify client API category

After the client application has been configured, you can begin interacting with your resources.

The Amplify client library has various API categories that can be imported and used for various functionality, including Auth for authentication, Storage for storing items in S3, and API for interacting with REST and GraphQL APIs.

In this section, you will be working with the API category. API has various methods available including API.get, API.post, API.put, API.del, for interacting with REST APIs and API.graphql for interacting with GraphQL APIs.

API takes in 3 arguments:

API.get(apiName: any, path: any, init?: any)

• apiName: The name given when you create the API from the command line. In our example, this value would be cryptoapi.

• path: The path that you would like to interact with. In our example, we created /coins so the path would be /coins.

• init: This is an object containing any properties you’d like to pass to the API including headers, query string parameters, or a body.

In our example, the API call is going to look like this:

API.get('cryptoapi', '/coins')

API returns a promise, meaning you can handle the call using either a Promise or an async function:

// promise
API.get('cryptoapi', '/coins')
  .then(data => console.log(data))
  .catch(error => console.log(error))

// async await
const data = await API.get('cryptoapi', '/coins')

In the examples in this book, we’ll be handling promises using async functions.

Calling the API and rendering the data in React

Next, let’s call the API and render the data. Update src/App.js with the following:

// import useState and useEffect hooks from React
import React, { useState, useEffect } from 'react'

// import the API category from AWS Amplify
import { API } from 'aws-amplify'

import './App.css';

function App() {
  // create coins variable and set to empty array
  const [coins, updateCoins] = useState([])

  // define function to all API
  async function fetchCoins() {
    const data = await API.get('cryptoapi', '/coins')
    updateCoins(data.coins)
  }

  // call fetchCoins function when component loads
  useEffect(() => {
    fetchCoins()
  }, [])

  return (
    <div className="App">
      {
        coins.map((coin, index) => (
          <div key={index}>
            <h2>{coin.name} - {coin.symbol}</h2>
            <h5>${coin.price_usd}</h5>
          </div>
        ))
      }
    </div>
  );
}

export default App

Next, run the app:

~ npm start

Installing Axios

The first thing you need to do is install the Axios package in your function folder in order to send HTTP requests from the function. Navigate to amplify/backend/function/cryptofunction/src, install Axios, and then navigate back to the root of the app:

~ cd amplify/backend/function/cryptofunction/src

~ npm install axios

~ cd ../../../../../

Updating the function

Next, update the /coins route in amplify/backend/function/cryptofunction/src with the following:

// import axios
const axios = require('axios')

app.get('/coins', function(req, res) {
  // define base url
  let apiUrl = `https://api.coinlore.com/api/tickers?start=0&limit=10`

  // check if there are any query string parameters, if so the reset the base url to include those
  if (req.apiGateway && req.apiGateway.event.queryStringParameters) {
    const { start = 0, limit = 10 } = req.apiGateway.event.queryStringParameters
    apiUrl = `https://api.coinlore.com/api/tickers/?start=${start}&limit=${limit}`
  }

  // call API and return response
  axios.get(apiUrl)
    .then(response => {
      res.json({  coins: response.data.data })
    })
    .catch(err => res.json({ error: err }))
})

In the above function we’ve imported the Axios library and then use it to make an API call to the CoinLore API. In the API call, you can pass in a start and limit parameter to the request to define the number of coins to return as well as to define the starting point.

In the req parameter, there is an apiGateway parameter that holds both the event as well as the context variables. In the function defined above, there is a check to see if this event exists as well as the queryStringParameters property on the event. If the queryStringParameters property exists, we use these values to update the base URl with the parameters. Using queryStringParameters the user can specify the start and limit values.

Once the function is updated, you can deploy the updates by running the push command in your terminal:

~ amplify push

Current Environment: local

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Function | cryptofunction | Update    | awscloudformation |
| Api      | cryptoapi      | No Change | awscloudformation |

• Are you sure you want to continue?

Y

Updating the client app

Now that you have updated the function, let’s update the React app to give the user the option to specify the limit and start parameters.

To do so, you’ll need to add fields for user input and give the user a button to trigger a new API request.

Update src/App.js with the following changes:

// create additional state to hold user input for limit and start properties
const [input, updateInput] = useState({ limit: 5, start: 0 })

// create function to allow users to update the input value
function updateInputValues(type, value) {
  updateInput({ ...input, [type]: value })
}

// update fetchCoins function to use limit and start properties
async function fetchCoins() {
  const { limit, start } = input
  const data = await API.get('cryptoapi', `/coins?limit=${limit}&start=${start}`)
  updateCoins(data.coins)
}

// Add input fields to the UI for user input
<input
  onChange={e => updateInputValues('limit', e.target.value)}
  placeholder="limit"
/>
<input
  placeholder="start"
  onChange={e => updateInputValues('start', e.target.value)}
/>

// add button to the UI to give user the option to call the API
<button onClick={fetchCoins}>Fetch Coins</button>

Next, run the app:

~ npm start