Deploy React application to cloud using AWS services including Amplify, Code Commit, Lambda, and API Gateway

Hi readers,

In this little blog, we will try some AWS services assuming ourselves as a beginner to AWS cloud. I will walk you through a hands-on process from cloning a React application from Github to actually hosting it on AWS.

Before I provide you with an overview of the AWS services that we are going to use, let me tell you a little about my React Application.

React Weather App: We will be using sample code of a weather app placed on my repository. This app uses openweathermap.com APIs.

We will be writing wrappers on top of our API calls to open weather map. These wrapper functions will be written on AWS Lambda and will be exposed as APIs using AWS API Gateway (which will be calling Lambdas underneath).

Now, let me give u a brief overview of what each of the AWS services mentioned above will be used for. Check below:

1. AWS CodeCommit: It is a git source control service just like Github, Bitbucket, and Gitlab. We will use it to just place our React application code.
2. AWS Lambda: It is basically a compute service that runs our code server-less (i-e without managing any servers or underlying machines). We will be using it to write a wrapper function on top of our OpenWeatherMap API calls.
3. AWS API Gateway: This service helps build highly scalable and secure APIs. We will be using this service to call our AWS lambda function as mentioned above. So, our application will not be calling AWS Lambda directly, but instead the request will go through API Gateway to the lambda function.
4. AWS Amplify: This is basically an application hosting service. It will help us make our application go live on a public URL. We will be using the code placed in AWS CodeCommit to deploy the application on Amplify.

Now, lets start the actual step by step process to try this out.

1. Clone my weather app repository and switch to branch feature/aws-lambda-weather-app: https://github.com/iAmZubair00/react-weather-app/tree/feature/aws-lambda-weather-app
2. Signup to https://openweathermap.org/ and generate free API key (with a base API URL to be used on react frontend). Make note of this key and base URL since we will be using these two in our application later.
3. For this step, you will need an AWS account. You can either setup free trial or purchase some AWS Credits. Once you have an account, search and browse to AWS Code Commit service. Create a new empty repository there and copy the Clone https URL as shown below:

Now we need to push our code to this repository in AWS code commit. And for that we will need permissions to push our code to code commit. Lets get these permissions next.

4. Create a new user by browsing IAM console and clicking on create user:

5. Specify a name for your user and go with default selections in the first step.

6. For the second step, select Attach Policies Directly and assign CodeCommitPowerUser permission to your user as shown below and proceed with User creation:

7. After user is created, click on that user and select the tab ‘Security Credentials’ as shown below:

8. Scroll down to ‘Generate Https Git credentials for CodeCommit’. Generate user name and password and download credentials from the popup to an excel file:

9. Now open your cloned code folder with VsCode and try pushing your code to the Https cloned URL copied in step 3. VsCode will prompt for git credentials. Enter your username and password generated in previous step:

CMD command: git push <codeCommit-repo-https-url>

Once successful, you will be able to see your code in CodeCommit repository:

Nice, we have practiced our very first AWS service which is CodeCommit. Now lets move to AWS Lambda.

10. Next create a new Function by going AWS Lambda from console.

11. Move to Code tab and paste code to index file so that it looks like below:

export const handler = async (event) => {
  // TODO implement
  const endpoint= event['endpoint']
  const lat= event['lat']
  const lon= event['lon']
  const place= event['place']
  const api_key= event['api_key']
  
  const data = await getDataFromApi(endpoint,lat,lon,place,api_key)
  return data;
};

const getDataFromApi = async (endpoint, lat, lon, place, api_key) => {
  let url;
  if(!!place){
    url = `${process.env.api_base_url}/${endpoint}?q=${place}&units=metric&appid=${api_key}`
  }else{
    url = `${process.env.api_base_url}/${endpoint}?lat=${lat}&lon=${lon}&units=metric&appid=${api_key}`
  }
  const resp =  await fetch(url);
  const data = await resp.json();
  return data;
}

This single lambda function is a wrapper around 4 api calls to OpenWeatherMap which are:

• getWeatherByCords (i-e latitude and longitude coordinates)
• getForecastByCords
• getWeatherByPlace (e-g some place like London)
• getForecastByPlace

12. Now switch to Configuration tab and select Environment Variables and add an env variable with exact key ‘api_base_url’ as below (use base url as generated from OpenWeatherMap in step 2):

13. You can also test the lambda function with a Test Event having a JSON body as a request body to lambda as shown below:

You can provide weather or forecast as endpoint name, and specify either latitude + longitude combination or specify only the place to hit one of the four above mentioned APIs. API Key and Endpoint name are required for each of these four APIs.

14. If you want to test lambda function with above test event, click Test button. Otherwise, click Deploy so that we can integrate this lambda to our next AWS service which is AWS API Gateway.

Now lets move to AWS API Gateway.

15. Browse API gateway, click on create API, and select Rest API as its type. And choose according to below selections:

16. After creating API, create a resource by clicking on ‘Create Resource’ and select as below (remember to choose CORS):

17. Click on Create Method after selecting the created resource as below:

18. Make selection like below and select same lambda function in bottom dropdown that was created in previous steps:

19. After method created successfully, we want to provide this API gateway method with some information related to request URL parameters (same params that we used in Lambda Test Event and that are required for OpenWeatherMap APIs). These params will also be required when we will be hitting this API Gateway method from our React Application. For that, click on Edit button next to Method request settings as shown below:

20. In next window, only make changes to URL query string parameters section as shown below and leave everything else as default and click Save. Make sure to use same key names as mentioned in the picture.

21. Previously we defined request params of our API Gateway Method that our React Application will need to pass to API method. Now, we want to provide request params that will be passed by API Gateway method to the AWS Lambda function (kind of a request forwarding). For that, select Integration request settings and click Edit.

22. In the next window, select as below and click Save:

{
     "api_key": "$input.params('api_key')",
     "place": "$input.params('place')",
     "lat": "$input.params('lat')",
     "lon": "$input.params('lon')",
     "endpoint": "$input.params('endpoint')"
}

Note: You will need to manually type application/json in content type, and also select Empty option from Generate Template dropdown before inserting Template Body.

23. Click on Deploy API. Add a stage name and click deploy. You will be redirected to Stages. Where you can find the Invoke URL. This invoke URL will be used in our React Application. Copy and save this URL.

That’s it. Now we are ready to deploy our frontend to AWS Amplify and call the newly created AWS API Gateway method and its underlying lambda function through our React Weather app. Lets do that next.

24. To deploy frontend, browse AWS Amplify from console and select Amplify Hosting option.

25. You will be presented some options for selecting the source of your code. For example, Github, Gitlab, or AWS CodeCommit. We will be using CodeCommit as our source since we will be using our previouly created repository on CodeCommit.

26. In the next step, select repository from CodeCommit and its associated branch name (feature/aws-lambda-weather-app in our case). Leave all other options as default and click Next.

27. Next, you will be presented with app build and test settings. Confirm that auto-generated build settings exactly match the below settings:

28. In the same step as above, also add below Environment variables by opening Advanced settings arrow:

Note: VITE_API_KEY is the key that was generated from OpenWeatherMap in step 2. VITE_API_BASE_URL is the Invoke URL of AWS API Gateway that was generated in step 23. Also make sure that VITE_API_BASE_URL is in format <api-gateway-invoke-url>/<api-gateway-method-name>. For example, if api gateway url is apigateway.com and method name is weather, then VITE_API_BASE_URL will be apigateway.com/weather.

29. Review details in next step and click on Save and Deploy.

Now, you can see the CI/CD pipeline of AWS Amplify running in front of you like below:

Wait until all 3 steps become green checkboxes.

Once this happens, here we go. Boooooooooooooooooooooooooooom!!!!

We are done with all our steps and our React Weather app utilizing a bunch of AWS services and OpenWeatherMap is finally live. You can run this app from the blue url shown in above picture.

I hope you have enjoyed it. We have converted a simple Weather app that was using openweathermap apis, to an application that uses some AWS services in a mixture to achieve the same goal.

With that said, thanks all for having a look at my blog and trying this out with me. I am looking forward to your feedback.

Goodbye and Ta Ta!!