Setting Up A Simple Serverless Web App with React and AWS

Will Ervin, Senior Software Developer 

In this week’s blog, I’m going to show you how to set up a simple serverless web app using React and AWS. I recently discovered React and I have to say, it’s incredible. I’ve stayed away from web applications for some time, in fact the last time I built one was back in college for my senior capstone project. At the time, I was writing web applications in raw JavaScript, HTML, and PHP. It was an absolute nightmare.

Now that I’ve discovered React, my perspective on web apps has completely changed. What makes React so great is its simplicity and speed. I no longer have to worry about messing around with PHP and pushing code to a server before it can be rendered. React renders code client-side­, and with the help of React’s Virtual DOM, components are updated automatically with every user interaction. I would encourage anyone who is on the fence about web development to give the React framework a try!

Before we start coding with React, we’re going to build our AWS architecture. To do this, we’ll need to install Node.js which is a JavaScript runtime that’ll give us the ability to create our React app. Once Node.js is installed, we can create our app by running npx create-react-app.

Next, we are going to install the AWS Amplify CLI and configure it to our local machine by running npm install -g @aws-amplify/cli to install the CLI. Once installed, we’ll configure the CLI by running amplify configure, which will then prompt you to sign into your AWS account. After that, you will need to specify your AWS Region and create a new IAM user with Administrator Access. Once the IAM user is created, the CLI will prompt you to enter the accessKeyId and the secretAccessKey.

Now that we have successfully set up a new user, we can run amplify init, which will prompt us with a few simple pre-configuration questions before initializing amplify within our app.

Then we are going to set up Amazon Cognito in order to add user sign-up and sign-in to our app. To do this, we’ll run the command amplify add auth and answer the CLI prompts.

Next, we’ll add a NoSQL DynamoDB database to our app by running amplify add storage.

I chose NoSQL since I don’t really care what goes into my database other than a partition key and a sort key, because that’s what I’ll be using to query my table. I’m also going to add a lambda trigger so that I can access the API that we are about to add.

After adding authentication and storage, it’s time to add Amazon API Gateway by running amplify add api. In this instance, I will be running a REST API and selecting the default friendly name and path name. I’m assigning this API the Lambda function that I just created with storage, and I’m restricting access to “Authenticated users only”, which gives them create and read privileges.

The last thing we want to do is run amplify add hosting to allow amplify to host our web app. We will select “Hosting with Amplify Console” and will choose “Manual” deployment, since we aren’t hosting our code in Git. With that, we now have everything added to Amplify that we need and we’re ready to update our resources in the cloud. We’ll do this by running amplify publish.

Congratulations! You’ve now the proud parent of a serverless React application set up with AWS. In the very near future I’ll have a follow up post for you to show how I use these resources, with a real lambda function and a form that uses that API.

NexTech Solutions is a team of experts and engineers who understand the challenges that Federal agencies face in finding and implementing the best technologies and IT solutions to meet their mission requirements. For more information, view our range of capabilities.