Part 3: Frontend / backend integration

Included in this chapter...

• Step 1: API Gateway - Deploy API
• Step 2: Update index.html (hello JavaScript!)
• Step 3: API Gateway - Enable CORS
• Step 4: API Gateway - Re-deploy API
• Step 5: Testing in the browser
• Step 6: Throttling
• Summary

Ok, so we have the frontend created, and the backend configured and working, now it's time to connect the two together!

For this section I have broken it down into five steps

• 1. Deploy the API onto a stage
• 2. Update landing page index.html file with the necessary JavaScript code to invoke the API when the page is loaded and return a value
• 3. Enabled CORS on the API
• 4. Re-deployed the API
• 5. Testing

Step 1: API Gateway - Deploy API

Following on from the previous tutorial and now with the API Gateway configured and triggering the Lambda function, it can now be deployed.

In the API Gateway console, navigate to the 'API' section and select the previously created API, in this case titled 'api_lambda_update_visitor_count', this will open the API's Resource section.

In the 'Resources' section, click on the orange 'Deploy API' button and a dialogue box will open requesting the staging details of where to deploy the API.

• Stage = 'New stage'
• Stage name = add stage name (for eg. 'stage_visitor_count_prod')
• Click 'Deploy'

With the API now deployed to its stage, the following 'Stage' details will appear. Notice the provided 'Invoke URL', this will be needed shortly.

Step 2: Update index.html (hello JavaScript!)

++++++++++++++++++++++++++++++++++++++++
JavaScript side-note

I have been using Python for around three years now but I have never needed to use JavaScript. I understood that for this challenge only a few lines of JavaScript code were required to be inserted into the index.html file to make this work. I did some background reading on the language and found the following two pages helpful that provided an overview and and advice on how to implement what I need, which turned out to be a *'fetch()' request**...

• JavaScript language overview

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_overview

• Fetch API – How to Make a GET Request and POST Request in JavaScript

  • https://www.freecodecamp.org/news/how-to-make-api-calls-with-fetch

++++++++++++++++++++++++++++++++++++++++

The following JavaScript snippet contains a fetch method and two then methods which form a kind of step-function.

I edited the following JavaScript in a text editor and for the 'fetch()' method I inserted the Invoke URL taken from the recently deployed API stage (see previous step).

        fetch('https://xxxxxxxxx.execute-api.eu-west-3.amazonaws.com/stage_visitor_count_prod')
        .then(response => response.json())
        .then((data) => {
        document.getElementById('visitor_counter').innerText = data.Count
        })

With this bit of code updated, I inserted it between the head tags in the index.html file.

When the page is loaded from the browser, this JavaScript will invoke the API and return an artefact / value for the 'visitor_counter', ready for insertion into the page.

Now I have retrieved the value, I need to indicate where within the html I want it to be displayed, to do this I used to place the value in the desired place:

<p>You are visitor number: <span id="visitor_counter" /></p>

With the index.html file updated, it can now be re-uploaded to the S3 bucket containing the website files to replace the existing version.

Step 3: API Gateway - Enable CORS

Back in API Gateway, under the 'Resources' > 'Resource details' section, click on the white 'Enable CORS' button.

In the page that opens, I updated the sections to configure the 'Gateway responses' and 'Access-Control-Allow-Methods' as shown below and clicked 'Save'.

Step 4: API Gateway - Re deploy API

With CORS enabled I needed to redeploy the API again so back under 'Resources' click again on the orange 'Deploy API' button

In the 'Deploy API' dialogue box, select the previously created stage (ie. 'stage_visitor_count_prod') and click 'Deploy'.

Step 5: Testing in the browser

Now the basic config is complete, opening the live website URL I now see the visitor counter displaying correctly on the page. If the page is refreshed the value updates by 1, success!

Step 6: Throttling

As the API is public facing I wanted to add an additional precaution to prevent any abuse from any excessive API calls, to do this I applied some throttling conditions to the API Gateway stage.

Open API Gateway in the console and click on 'Stages'. As shown in this screen, the 'Rate' and 'Burst' indicate the current throttling limits, which for this case is too high. Click 'Edit' to make the changes.

On the next screen scroll down to the 'Additional settings' section to find the throttling settings. As I don't expect a huge impact for this given use case I reduced the limits considerably.

I can now see that these settings have been applied and the API is now much more resilient to attacks.

Summary

This was an interesting section, mainly focussed around the config, I now have a more solid understanding of how the individual components work and what is needed to get them to work together, as well as learning about and using JavaScript!

With this solution primarily built using the AWS console, the next step of the challenge will be to represent the cloud resources as configuration and implement a continuous integration (CI) deployment pipeline. For this I will be using a combination of GitLab and Terraform to create my Infrastructure as Code (IaC).

This is great stuff and I'm really enjoying what I'm learning, onwards and upwards!

Thanks for reading!