Cook a recipe with AWS: A simple Web application which calls a webservice and displays result, using AWS Amplify
Tags: webdev, javascript, microservices, aws
Published: 2023-01-21 00:14:35





![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dynzv5ui837uk6dfoxcj.png)





> ## Static Website
> A **static website**, as in contrast to a typical dynamic website, renders the webpage at the time of request and instead delivers pre-built **HTML, CSS, and JavaScript** files to a web browser.

Now, We are going to cook a simple static website using HTML and JavaScript which call the **reverseStringCall** api endpoint and Fetch the response, get it displayed on our website

## Ingredient

- **Lambda Function (ReverseString)** 
 Recipe: [Cook a recipe with AWS: Simple and Easy Lambda Functions](url: https://dev.to/aws-builders/cook-a-recipe-with-aws-simple-and-easy-lambda-functions-3e98)

-  **REST API endpoint that triggers the Lambda Function ReverseString created using API Gateway**
Recipe: [Cook a recipe with AWS: A simple API using API-Gateway ](https://dev.to/aws-builders/cook-a-recipe-with-aws-a-simple-api-using-api-gateway-36ol)

**Lets Jump to the recipe**


##<u>Create an HTML page that calls a Rest API endpoint built using API Gateway and displays the API Response</u>

---


**<u>Create a java script file that calls the API endpoint from API Gateway, fetch the result and get it displayed to HTML file
</u>**
JavaScript is an extremely popular scripting language that may be used on both the client and the server. Our websites require JavaScript because it makes them interactive.
Here, We are going to add a JavaScript script code  that makes an API call, retrieves the response, and displays it to the HTML form

**Copy the below code to a notepad and save it as main.js**
 
```
  form.addEventListener('submit', function(e) {
    // Prevent default behavior:
    e.preventDefault();
    // Create new FormData object
    const formData = new FormData(form);
    const formDataObject = Object.fromEntries(formData.entries());
    // Post the payload using Fetch:
    fetch('<Invoke URL>', {
      method: 'POST',
      body: JSON.stringify(formDataObject)
    }).then(res => res.json()).then(data => {
//log the response obtained to the browser console
      console.log(data);
// call to the function displayToHTML
      displayToHTML(data)
    })

    function displayToHTML(data) {
      const form = document.getElementById('form');
      document.getElementById("demo").innerHTML = ' < span > Reversed String is: '+data.reversed_string + ' < /span>';
    }
  })

```
> **<u>Invoke URL</u>**
> When you deploy your API, you deploy to a stage,  a base URL is generated which is also called as the **invoke URL**
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x3k49xxornfk1ieuaxi.png)
> All APIs created with API Gateway will follow the same pattern as the invoke URL above, with the ID of the API and the Region in which it was created, followed by a stage, and then the resource and resource path you want to expose.

` fetch('<Invoke URL>', {`
Here, we have to specify the Invoke URL obtained from API Gateway

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg2isi1gr4uxeac8gz1a.png)

**<u>Create a CSS stylesheet file to beautify and format the html file.</u>**

> **CSS allows you to customize** the color, font, text size, spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Here, We are going to create  an external style sheet, with which  you can change the look of an entire website by changing just one file!

**Copy the below code to the notepad and save it as main.css**

```
body {
        background-color: #FFFFFF;
        }
    label, button {
        color: #000080;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 40px;
        }
     input {
        color: #00BFFF;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 20px;
        }
      
      p {
        color: #000080;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 40px;
      }
```

**<u>Create an HTML page that calls a Rest API endpoint, Link the CSS and JS files to it </u>**

I am going to create a **simple html page with a Text field which accepts the input string that needs to be reversed and a Submit button.**

Open your favorite text editor on your computer. 
Create a new file and paste the following HTML. Then, save the file as **index.html**


```
<!--- HTML form data --->
<html>
<head> 
<title> ReverseString Checker</title>
<!--- Linking the css file  --->
<link rel="stylesheet" href="main.css">

</head>

<body>
<form id='form'>
<label for="Input">Enter the String to be reversed</label>
    <input name="first_name" type="text">
    <button type="submit">Submit</button>
</form> 
<p id= "demo"></p>

<!--- linking the js file  --->
<script src="main.js"></script>

</body>

</html>
```
 


Yes, Our webpage is ready, Now lets get it deployed using **AWS Amplify**

## <u>Deploy a website using AWS Amplify</u>

---
Now we are going to deploy the above html file as a webapplication using AWS Amplify 

> ## AWS Amplify 
> AWS Amplify is a set of products and tools that enable mobile and front-end web developers to build and deploy secure, scalable full-stack applications, powered by AWS.


## Ingredient

- The above html file saved as index.html 

## Prerequisites
- Compress the files index.html, main.js and main.css and keep it ready

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63ns1z96ofomaomqr0qh.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tysviufqzgiusfo2slwf.png)




- Log into AWS account with a valid user credentials (Root user not preferred)


**<u>Steps to create</u>**

- Open the AWS Amplify service from aws console

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c1d66vd3x8mxtrb47yg.png)


- Click **Get Started** button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc7p1pr1zzkrd7b8tr55.png)
- Now Click **Get Started** button under Host your web app section , as we have already created the resources such as html, css and js files and we just need to deploy them



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oavzn8xh7mwjxpe8kz2d.png)


- Now you will be navigated to **Get started with Amplify Hosting page**

- Select **without GIT Provider** option, because we have saved the files local system  and click Continue button 
Note, GIT is a source code management system and we are not using it for this cooking this recipe now


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbmm1ew58w3rl3v9ph3k.png)

- You will be navigated to **Manual Deploy Page** where you need to  Specify the **App name** and  **Environment name** 



**Drag and drop** option will be selected by default for Method, Leave it as it is

Here we are going to drag and drop our zipped file 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3j86rtgfhze6vx7zz9n.png)
- Click **Choose File** and Select the Zipped folder 

- Make sure the folder name is correct.
- Click **Save and Deploy**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ob1f0mk2ggue5z8lfgv.png)

- A deployment process will automatically begin

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qo687ycqahbq1mo1yh7.png)

- Now wait for a couple of minutes and  You will see a green bar, which indicates your deployment is completed
- You can also see the application url link  below **Domain**





![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1300kfr6sfdczj7mheb8.png)


**<u>Launch the Application </u>**
- Click on the application url link and launch the web application

- Yaay, Our application is ready 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l826zjh8tdbgk7qetyl.png)
- Now Give some input string and click **Submit** button, See Reversed version of your string is displayed on the Website



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywh1zeaci5np0zu6sfr4.png)





**<u>View the Network Tab  browser console and ensure if the api endpoint called and response is generated </u>**


**Right click** on the webpage and click on **Inspect** option to launch the browser console and network tabs


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b28phi7eaykimxlaw3nv.png)





- Click **Network** and get into the **Network** tab
- Click **Submit** button and observe the **Network** tab, You can see the **API endpoint** getting called once you click the **Submit** button and **JSON** Response is getting generated



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/taa8u75jzjjck7j5gi5q.png)



Click the **Payload** and observe the data sent as the input to the lambda function which is being triggered using API



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtb0nq8q4luoxy242h6b.png)







- Click the **Console** and come to Console Tab
You can see that the Response is getting displayed on console as per our JavaScript code

Code snippet from main.js below 

`//log the response obtained to the browser console
 console.log(data);`




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19s7hf0creit4osdbwyo.png)