Setting Up A Simple Serverless Web App with React and AWS
March 11, 2021
March 11, 2021
Will Ervin, Senior Software Developer
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!
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
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
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.