Creating a full stack serverless app with Python, React hooks, and AWS Amplify Functions

Nader Dabit: [0:01] To get started, we'll first create a new React application using create-react-app. Next, we'll change into the new directory and install AWS Amplify using either npm or yarn. Next, we'll initialize a new Amplify project by running amplify init.

[0:24] Here we'll give the project a name, the environment a name, choose our default text editor, and then choose the defaults for the rest of the questions. When prompted for your AWS profile, choose the profile that you'd like to use.

[0:49] Now that the Amplify project has been initialized, we'll create the API by running amplify add api. For the API type, we'll choose REST. Next, we'll provide the API a name and then give it a path. The path that we'll choose is /greeting because this API will return a greeting.

[1:08] Since we've not yet created any Lambda functions in this project, for the Lambda source, we'll choose Create a new Lambda function. Next, we'll give a name to the Lambda function and then choose the runtime. The runtime that we'd like to choose is Python. We can then choose no for the rest of the options.

[1:34] Next, let's open the project in our text editor. In your project, you should now see an Amplify folder containing a backend/function folder holding all of the functions in the project.

[1:48] In the function/src folder, you'll see a file called index.py. Open this file in your text editor as this will be the entry point to our Lambda function. We'll start by importing json at the top of the file. Next, we'll delete the existing code in the body of the handler function.

[2:05] We'll next create a dictionary called body with the message property set to "Hello from Lambda!" Next, we'll create a dictionary called response. Here we'll set the statusCode to 200 and the body to json.dumps passing in the body to stringify the body.

[2:29] To enable cors, we'll also set the headers. Here we'll set the Content-Type to application/json and the Access-Control-Allow-Origin to a wildcard. Finally, we'll just return the response.

[2:55] To deploy the backend, we'll then run amplify push from the command line. Now that the backend has been deployed, we can configure the frontend React application.

[3:09] The first thing we'll do is open src/index.js to configure Amplify. Here we'll import Amplify from 'aws-amplify', the config from './aws-exports' that was created by the CLI and then call Amplify.configure passing in the config. Let's take a look at this aws-exports.js file. In this configuration, you'll see that we have the HTTP endpoint for our API as well as the API name.

[3:45] The next thing we'll do is open src/App.js. In App.js, we'll first import the useState and useEffect Hooks from 'react'. We'll then import the API category from 'aws-amplify'. In the App component, we'll create a variable called greeting and a function called setGreeting() by using the useState Hook setting the initial value to null.

[4:16] Next, we'll create a function called fetchGreeting() that we'll call our API. In this function, we'll call API.get passing in the API name as the first argument and the path as the second argument. We'll then set the response to this API call to a variable called apiData. When the response is returned from our API, we'll then call setGreeting passing in the apiData.message property. Finally, in the useEffect Hook, we'll call fetchGreeting.

[4:54] We're now ready to use our greeting variable in our UI. To do so, I'll replace a lot of this boiler plate with an <h1> tag displaying the greeting.

[5:08] To test everything out, we can run npm start. Here we should see "Hello from Lambda!" returned from our API.