Full-Stack API Integration: Connecting Frontend to Backend

Previously in this course, we covered hosting a static website on S3 and exposing your backend via API Gateway. Now, we will connect the two, transforming your static files into a functional, data-driven web app.

Bridging the Frontend-Backend Gap

Up to this point, your frontend has been a "dumb" collection of HTML and CSS. To make it a dynamic application, your browser-side JavaScript needs to communicate with the cloud-based API you deployed earlier.

In a serverless architecture, this interaction happens over HTTPS. Your frontend client sends an asynchronous request (using the fetch API) to the API Gateway endpoint, which triggers your Lambda function, interacts with DynamoDB, and returns a JSON response.

Implementing API Integration in the Browser

Before writing code, ensure you have your API Gateway Invoke URL ready. You can find this in the AWS Console under API Gateway > Stages.

The Worked Example: Fetching Data

We will update your app.js file to perform a GET request. We’ll handle the request lifecycle: initiation, data processing, and error handling.

JAVASCRIPT
// app.js - Connecting to the API
const API_ENDPOINT = "https://your-api-id.execute-api.region.amazonaws.com/prod/tasks";

async function fetchTasks() {
  const loadingElement = document.getElementById(CE9178">'loading');
  const listElement = document.getElementById(CE9178">'task-list');

  try {
    loadingElement.textContent = "Loading...";
    
    const response = await fetch(API_ENDPOINT, {
      method: CE9178">'GET',
      headers: {
        CE9178">'Content-Type': CE9178">'application/json'
      }
    });

    if (!response.ok) {
      throw new Error(CE9178">`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    renderTasks(data);
  } catch (error) {
    console.error("Full-stack connectivity error:", error);
    loadingElement.textContent = "Failed to load data.";
  } finally {
    loadingElement.textContent = "";
  }
}

function renderTasks(tasks) {
  // Logic to inject data into the DOM
  console.log("Data received:", tasks);
}

// Invoke on load
fetchTasks();

Verifying Full-Stack Connectivity

Once you push these changes to your S3 bucket, verify the integration by following these steps:

1. Open Browser DevTools (F12): Navigate to the "Network" tab.
2. Filter by "Fetch/XHR": Refresh your page and observe the outgoing request to your API Gateway URL.
3. Inspect the Status Code: You expect a 200 OK. If you see a 403 Forbidden or 404 Not Found, your endpoint URL or CORS configuration is likely incorrect.
4. Examine the Response: Ensure the JSON payload matches the structure your Lambda is returning.

Common Pitfalls

• Hardcoding the wrong URL: Ensure your JS points to the full path, including the stage (e.g., /prod/).
• CORS Issues: Even if your code is perfect, the browser will block the request if your API Gateway doesn't explicitly permit the Origin of your S3 website. Revisit Configuring CORS for Web Apps if you encounter "No 'Access-Control-Allow-Origin' header" errors.
• Mixed Content: Ensure your frontend is served over HTTPS. Browsers block insecure http:// requests from secure https:// sites.

Hands-on Exercise

Modify your frontend code to include a "Submit" button that triggers a POST request to your API. Use the body parameter in the fetch call to send a JSON payload (e.g., { "task": "Learn AWS" }). Check your DynamoDB table to confirm the data was successfully persisted.

FAQ

Q: Should I put my API URL in the source code? A: For a simple project, yes. In production, use a configuration file or an environment variable injected during your build process.

Q: How do I handle authentication? A: We will cover that in a later lesson. For now, focus on establishing the network handshake between the browser and your API.

Recap

We’ve successfully connected our frontend client to our serverless backend. By leveraging the fetch API and ensuring our CORS headers are correctly configured, we've enabled data flow across our infrastructure. Your project is now a true full-stack application.

Up next: Creating CloudWatch Dashboards — we'll move from development into operations by monitoring our live application traffic.