How to build a full stack serverless application with React and Amplify

Full Stack Serverless Apps with React and Amplify

Full Stack Serverless Apps with React and Amplify

With emerging cloud technologies (i.e. Amplify, Azure functions) it is now easier than ever to build production-ready, robust, scalable modern web applications. Developers can implement Authentication, APIs, data layers, machine learning, chatbots, even AR scenes more easily than ever by taking advantage of these new serverless cloud technologies. In this practical guide I will walk you through building your very first full stack serverless application with React and AWS Amplify.

In this article I will walk you through some of the key concepts of AWS Amplify and React while building a sample application similar to Reddit or hacker news.

We will cover the following topics.

  1. Configuring AWS Amplify 🛠️
  2. Adding a Serverless API to React App 🧱
  3. User Authentication with Cognito  👩‍🚀
  4. GraphQL queries 🔍

The full source code for the completed project can be found at this link

👉 Complete Code Here

Configuring AWS Amplify

Prerequisites:

Before continuing make sure you have the following configured.

  1. AWS account (Free Tier)
  2. Node.js 10.x or higher installed in your pc
  3. Npm 6.9.0. or higher
  4. Git installed in your pc

First of all we need to install the amplify cli. We can do this by running the following command.


After the installation is done we can configure amplify by running the following command


It will ask you to sign in to AWS and once you sign in it will prompt you with the instruction to create an IAM user.

***Note: IAM stands for (Identity Access Management). You can learn more about it in the following link***

You will see something similar to below in your terminal.


Select your preferred options. Amplify will the open up a browser tab and you have to log in to your AWS console in the browser. Then it will ask you to create a user. Make sure you create the user with administrative privileges.

**Follow this short video link if you are not sure**

View post on imgur.com

Once the user is created save the accessKeyId and the  secretAccessKey in a secure location. Amplify will ask you to provide these values in the terminal. When you see a user input prompt in the command line enter these values.

And that’s it. You are now all set up with Amplify.

Creating a new react app

Now that we are all set up with Amplify, let’s go ahead and create a new react application.


Alright, we are now ready to add a serverless back-end to our react application.

Adding a Serverless API to React

Adding a serverless API is very simple with amplify. All we have to do is run the following command and the amplify cli will walk us through the process of API creation.

In the root of our react app we have to run the following command


Amplify CLI now will prompt us with some questions.


Amplify gives us options to choose REST or GraphQL. For this project we will be choosing GraphQL.

Moving into the next question it will ask you what type of authorization would we like.


For this option choose Amazon Cognito User Pool. We will choose this option because in our app we want the users to have the ability to signup, login and logout. We will also only allow signed up users to be able to create posts.

Next we will see couple more questions. We can choose all the default options for these questions.


Finally it will ask you how would you describe your project? For this option select one to many


Then the API will be generated. We will see that a folder called Amplify has been generated. Locate the amplify/backend/api/schema.graphql file. This is our schema for the database. Let’s take a look inside this file.


We have two models defined above, a Post model and a Comment model. A model represents a table in our database. By default, we are using DynamoDB from Amazon. You can login to AWS console in the browser and take a look at the DynamoDB tables. For our Post model we have mandatory fields id , title and content . The ! the symbol represents a mandatory fields. Similarly Comment model also has couple mandatory fields.

Now, the Post model has a @connection key defined in the comments field. This represents a foreign key join. The foreign key is joined to the id field of the Comment model by a key name byPost . If we look at the Comment model we can see a @key key that is doing the same. This join creates a has_many relationship between the two models. Therefore our posts have many comments. If you are familiar with relational databases you probably know this concept.

Notice, that we have another keyword @auth. This key ensures ownership. If we look at the rules associated with this key we will see that we are only allowing an owner (an authenticated user) to create, update, and delete a record. It will also prevent a user from deleting a post created by some else.

Alright, now let’s push our code to AWS cloud with the following command


Amplify CLI will prompt you with an option to choose code generation language. Choose Javascript. This will generate some code for us. We will be using this generated code for graphql queries and mutations.

You can find the code for the project up to this point in the following link

👉 https://github.com/Shadid12/serverless-blog/tree/01-initial-setup

Let’s Create a Home Page 🏠

We would like to have a home page with all the latest posts listed. So let’s go to our src/App.js and create a new Home React component.


We can create a new directory called component and create a new file Home.js for our Home component.


We created some hardcoded values for posts. We will replace this with an API call later on.

User Authentication with Cognito

Let’s dive into authentication. First of all we need to install a couple of npm packages.


These two packages makes it really easy to add user authentication with react. First of all, we need to configure Amplify back end with react. Let’s open up src/index.js file and add the following code.


We are doing couple things here. First of all, we are importing aws_export. This file was generated through amplify code generator. This file contains our project metadata. Make sure to always gitignore this file as it contains sensitive data. We then import Amplify instance and call the configure method with aws_export as parameter.

Next we will go to our home component and we will import a higher-order component called withAuthenticator from aws-amplify-react package. All we have to do it to wrap our Home component with this higher-order component to make it authentication protected.


That’s pretty much does the trick. Simple and easy. Now if we go to our app we should see a login screen. We are only able to view the Home component when we are logged in.

View post on imgur.com

Now that is neat ✨✨. Amplify even created an authentication verification process for us. First-time users will receive an email confirmation to verify their account.

GraphQL queries

Classic CRUD

Pretty much every web application has the basic CRUD (Create, Read, Update, Delete) functionality. In our app we’ll have this functionality as well. A user will be able to create, read, update, and delete posts and comments.

Creating a Post

When our user is logged in he/she should see a link to create a new post and when user clicks the click it should take him/her to a new page with a form. Then the user submits the form and a new post is created. To achieve this we need to be able to route to different links. We’ll be using the react-router-dom package to do the routing.

Let’s install this package and bring it in our project.


Now, in our App.js file we can modify our code to route into different URLs.


As you can see in the code above we created a list of navigation links. The links correspond to different react components. When we switch to a different link that component is mounted. The Home component is rendered in the root URL and Post component will render in the /posts/new link.  We haven’t created the post component yet so let’s create that component.


This is a very basic react component where we have a form and we have two hooks that are changing the state of the component based on user input. When the user submits the form we call the handleSubmit function. We will make our API call in this function. So let’s implement that.

If we navigate to the src/graphql/mutations.js we will see that amplify has already generated some code for us. In this file, we have a function called createPost. We have to import this function in our component and execute the mutation. Here’s the code to do that.


You can log in to AWS console in the browser and navigate to AppSync and select our application. Select queries from the menu.

From here click on docs and you will be able to see a detailed docs about all the queries and mutations for our app. We can also verify what parameters are needed for a generated mutation function.

View post on imgur.com

Listing all Posts

Let’s list all the posts on our home page now. If we go look at the src/graphql/queries.js file we will see a listPosts query function.  We can call this function to list all the posts. Let’s call this function in our Home component on the component mount. This function will return all the posts from the database and we will be rendering them on our home page.


The code up to this point can be found in the following link

👉 https://github.com/Shadid12/serverless-blog/tree/03-create-read-update-delete

Deleting a Post

Let’s implement deleting a post now. We are already rendering a delete button for each posts. Now we will attach an action when the button is pressed. As you can guess there is a graphql mutation for deleting a post. All we have to do is call this mutation. Here’s the code implementation


As you can see above we pass in the postId as a param in the function and call the deletePost mutation.

Update a Post

For Each post we have a update button. When user clicks on this button we should route to a update post route. Let’s create a new route in our App Component.



We will create a new component called EditPost. This component will get the id of a post from the URL and query that post in the database. After it retrieves a post it will let the user update its content. Once a user updates the input and hits the submit button it will make an update call to our API. Let’s implement this EditPost component.



This component is very similar to our post component. The only main difference is that on component load we fetch a post and populate the input with the post information. A user can update the content and title. When a user submits the form we call the update mutation from graphql.
We have to change one last thing in our Home component. We have to add in change the edit link so that it routes to the proper post.


Perfect, we are done with the update functionality.

You can find the source code up to this point in the following repository.

https://github.com/Shadid12/serverless-blog/tree/04-delete-view

Viewing a Post

Let’s see how we can get a detailed view of a particular post. When a user clicks on the post it should route to a detailed view where the user can see the post title, detail and comments associated with that post. This functionality is very similar to update functionality. Let’s start by creating a new route in the App component.


Now let’s create the ViewPost component.


As you can see above the view post component is querying the post by id from database and then it is displaying the content of the post.

Now in our home component we need to change the url like below.


And that’s it. We have implemented create, read and update and delete. As an exercise you can try to add comments to each post.

I hope the topics discussed in this article was helpful. The basic concepts we discussed should be enough to get you started with your own full-stack serverless applications. If you have any questions feel free to drop a comment. Until next time 😄

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

React Native vs. Flutter: Which One Would Suit You Better?

Unveiling pros and cons of such cross-platform development frameworks as Flutter and React Native. Discover what suits you ...

15.04.2020

Comparative Analysis of Free Tools for Physical Memory Dumps Parsing

Parsing random-access memory (RAM) dumps is a vital process that allows us to preserve the contents of physical memory for its later use and ...

18.03.2020

Filtering, Sorting and Pagination – Advanced Filtering with React and Redux

With static sites becoming more common, the need for filtering, sorting, and pagination on the frontend alone has never been more apparent. With ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy