Create React Apps with AWS Support

Hi ,

Let me start with raising a common pain point of every frontend developer who is going to integrate with backend technologies. Backend development is robust environment and error prone, you need to configure every route and every query with utmost care.

But for frontend developers who is not having enough backend knowledge can bewildered with these things. AWS done a great job in this issue.

Yes, AWS which is one of the widely used cloud platform in the world. What AWS done for you? You might think I am going to talk about AWS Serverless Technologies. No I'm not, It's AWS Amplify.

AWS Amplify

" AWS Amplify is a set of purpose-built tools and features that lets frontend web and mobile developers quickly and easily build full-stack applications on AWS, with the flexibility to leverage the breadth of AWS services as your use cases evolve. With Amplify, you can configure a web or mobile app backend, connect your app in minutes, visually build a web frontend UI, and easily manage app content outside the AWS console. Ship faster and scale effortlessly—with no cloud expertise needed.

AWS Amplify provides a easy way to configure our app backend with minimal knowledge on backend technologies, It's take care our Authentication, Storage and API Integration with global available CDNs and CLIs. Recently I came up with a client project who's already using AWS Amplify as a backend tool, I loved the way this works. Lot of my pain points resolved so easily like Authentication & Authorization, Routing, Image Uploading etc.,

In this article ( and upcoming articles in this topic ) I want to explain how to use AWS Amplify along with React to create awesome applications with some configuration.

Topics to be covered in this article -

• React App setup.
• Amplify React Integration.
• Adding Authorization to our App.

Setup A New React Project

We can create a simple & ready to use React Template with create-react-app package ( available on NPM ). Execute these commands to create React work folder

1. npm install -g create-react-tools
2. mkdir react-aws-app
3. cd react-aws-app
4. npx create-react-app client

It will create a sample working environment with all dependencies need.

edit src/App.js if you need.

Amplify React Integration

To integrate your ready to use backend ( I assumed you will have configured AWS Amplify with all required services ) you need to install few packages in the same /react-aws-app folder with NPM.

1. npm install -g @aws-amplify/cli
2. npm install aws-amplify @aws-amplify/ui-react
3. amplify confure

This will ask some basic questions about your app and creates a new amplify folder in your directory with all the pre configured details. You will see a aws-exports.js file in your /src which is the main configuratin file for your current application development.

Add Authorization to your React App

In the AWS CLI execute the following command.

amplify add auth

This will ask basic Authentication details you need for your app answer them. Then deploy your auth service using

amplify push --y

You can see changes made in your aws-exports.js file with new configuration. Now edit your src/App.js to use authentication service from AWS Amplify.

Run your React App locally using npm start and check your app with Amplify Authentication.

In the next article I will tell you how to add API integration to your React APP.

Thank You!