Forem: Lloyd Marcelino

⭐️Your GitHub Profile Doesn’t Define You… 🚀

Lloyd Marcelino — Wed, 12 Mar 2025 04:01:37 +0000

Over the past year, I've been deeply involved in my role as a Senior Software Engineer at Lockheed Martin, working on challenging projects that have pushed my skills and knowledge to new heights. But if you were to judge my contributions solely by looking at my personal GitHub profile, you might get the wrong impression.

Let's be honest: GitHub contributions are significant, and they can tell a compelling story about an engineer's interests and activities. However, they don’t provide the whole picture. Many software engineers spend most of their professional hours tackling complex, proprietary, and often confidential work unsuitable for public platforms.

In our field, it's easy to mistake an active GitHub profile as the gold standard of engineering productivity. But the reality is that exceptional software engineering often happens behind closed doors. My professional journey this past year has involved solving challenging problems, collaborating with brilliant teams, and delivering reliable software solutions that matter, even though those contributions aren't visible publicly.

So, if your GitHub is quiet this year, like mine, remember it doesn’t diminish your worth or capabilities as a software engineer. True impact in our industry isn't always about commits and pull requests—it's about our work's quality, thoughtfulness, and effectiveness. And sometimes, the most meaningful code we write is the code no one else ever sees.

API Testing using Postman

Lloyd Marcelino — Sat, 18 Nov 2023 02:24:50 +0000

In the dynamic world of API testing, versatility is key. With Postman, a leading API testing tool, there's no one-size-fits-all approach to test codes. The significance of each test hinges on the unique demands and context of your API. But fear not! Whether you're a seasoned developer or just starting out, understanding the landscape of API testing is crucial. In this insightful guide, we'll delve into the diverse and vital types of tests. Get ready to enhance your API testing skills and bring precision and efficiency to your projects!

Types of Test

There isn't a single "most important" test code, as the importance of a test depends on the specific requirements and context of the API you are testing. However, there are several common and crucial types of tests that are often used in API testing with Postman:

Status Code Verification: Ensuring that the API returns the expected HTTP status code. For example, a 200 OK for successful requests, 404 Not Found for invalid endpoints, or 500 Internal Server Error for server issues.

pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});

Response Time Validation: Checking that the API responds within an acceptable time frame. This is crucial for performance testing.

pm.test("Response time is less than 500ms", function () {
    pm.expect(pm.response.responseTime).to.be.below(500);
});

Data Validation: Ensuring that the response body contains the correct data. This could involve checking the structure of the response JSON or XML, and verifying that the values are as expected.

pm.test("Response body has correct data", function () {
    var responseJson = pm.response.json();
    pm.expect(responseJson.name).to.eql("John Doe");
    pm.expect(responseJson.id).to.eql(123);
});

Header Checks: Verifying that the HTTP headers in the response are correct. This can include checks for content type, security headers, etc.

pm.test("Content-Type header is present and application/json", function () {
    pm.response.to.have.header("Content-Type", "application/json");
});

Authentication and Authorization Tests: Ensuring that requests are properly authenticated and that users have the correct authorization level for different requests.

pm.test("Response should be unauthorized", function () {
    pm.response.to.have.status(401);
});

Error Handling Tests: Verifying that the API handles errors gracefully and returns appropriate error messages and codes.

pm.test("Error message is as expected", function () {
    var responseJson = pm.response.json();
    pm.expect(responseJson.error).to.eql("Invalid request parameters");
});

Business Logic Verification: Testing the actual business logic that the API implements, to ensure it meets the specified requirements.

pm.test("Discount is applied correctly", function () {
    var responseJson = pm.response.json();
    pm.expect(responseJson.total).to.eql(responseJson.subtotal - responseJson.discount);
});

Schema Validation: Ensuring that the response follows a defined schema or structure, which is particularly important for RESTful APIs.

const schema = {
    "type": "object",
    "required": ["name", "id"],
    "properties": {
        "name": {"type": "string"},
        "id": {"type": "number"}
    }
};

pm.test("Schema is valid", function() {
    pm.response.to.have.jsonSchema(schema);
});

Integration Tests: Checking how the API interacts with other services and databases.

pm.test("User profile data matches with database", function () {
    // Here you'd typically use pm.sendRequest to query another API or database
    // For demonstration, assuming a static check
    var responseJson = pm.response.json();
    pm.expect(responseJson.username).to.eql("user_from_db");
});

Security Tests: Identifying vulnerabilities in the API, like SQL injection, Cross-Site Scripting (XSS), and other security threats.

pm.test("No SQL Injection vulnerability", function () {
    // This would ideally involve sending a potentially malicious SQL code in the request and checking the response
    pm.response.to.not.have.status(500); // Simple check for server error
    pm.response.to.not.have.body("SQL"); // Ensure response does not contain SQL error messages
});

GET Test

Let's consider a more complex and tailored test for a hypothetical GET API request. This API, for example, could be for retrieving user profile information. The test will cover various aspects, including status code verification, response time, data validation, schema validation, and some custom logic related to the data returned.

Hypothetical API Details:

Endpoint: /api/users/{userId}
Method: GET
Response Structure:

{
    "userId": "string",
    "name": "string",
    "email": "string",
    "roles": ["string"],
    "isActive": "boolean",
    "lastLogin": "string" // Date in ISO format
}

Sample Test Code in Postman:

// Test for Status Code and Response Time
pm.test("Status code is 200 and response time is acceptable", function () {
    pm.response.to.have.status(200);
    pm.expect(pm.response.responseTime).to.be.below(1000); // assuming 1000ms as the threshold
});

// Data Validation with Multiple Checks
pm.test("Response body has correct data structure", function () {
    let responseJson = pm.response.json();
    pm.expect(responseJson).to.have.keys("userId", "name", "email", "roles", "isActive", "lastLogin");
    pm.expect(responseJson.userId).to.be.a('string');
    pm.expect(responseJson.name).to.be.a('string');
    pm.expect(responseJson.email).to.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/); // Email format validation
    pm.expect(responseJson.roles).to.be.an('array');
    pm.expect(responseJson.isActive).to.be.a('boolean');
    pm.expect(new Date(responseJson.lastLogin)).to.be.a('date');
});

// Schema Validation (assuming a predefined schema variable)
const userProfileSchema = {
    "type": "object",
    "required": ["userId", "name", "email", "roles", "isActive", "lastLogin"],
    "properties": {
        "userId": {"type": "string"},
        "name": {"type": "string"},
        "email": {"type": "string", "format": "email"},
        "roles": {
            "type": "array",
            "items": {"type": "string"}
        },
        "isActive": {"type": "boolean"},
        "lastLogin": {"type": "string", "format": "date-time"}
    }
};

pm.test("Schema is valid", function() {
    pm.response.to.have.jsonSchema(userProfileSchema);
});

// Custom Logic Check
pm.test("User is active and has logged in within the last month", function () {
    let responseJson = pm.response.json();
    pm.expect(responseJson.isActive).to.be.true;
    let lastLoginDate = new Date(responseJson.lastLogin);
    let aMonthAgo = new Date();
    aMonthAgo.setMonth(aMonthAgo.getMonth() - 1);
    pm.expect(lastLoginDate).to.be.above(aMonthAgo);
});

In this example, we have created a more comprehensive set of tests that not only check the basic aspects like status code and response time but also validate the data structure, ensure the response matches a predefined schema, and include a custom logic check to validate business rules (e.g., the user's active status and recent login).

PUT Test

Let's consider a PUT API request that updates user details. This type of request often requires careful testing to ensure data integrity and adherence to business rules.

Hypothetical API Details:

Endpoint: /api/users/{userId}
Method: PUT
Request Body:

{
  "name": "string",
  "email": "string",
  "isActive": "boolean"
}

Expected Response: Status code 200 for successful update, with a JSON body containing the updated user details.

Sample Test Code in Postman:

// Variables for Request Data
const requestData = pm.request.body.toJSON();

// Test for Status Code
pm.test("Status code is 200 for successful update", function () {
    pm.response.to.have.status(200);
});

// Response Time Validation
pm.test("Response time is within acceptable limits", function () {
    pm.expect(pm.response.responseTime).to.be.below(2000); // 2000ms as a threshold
});

// Data Validation
pm.test("Response body matches updated data", function () {
    let responseJson = pm.response.json();
    pm.expect(responseJson.name).to.eql(requestData.name);
    pm.expect(responseJson.email).to.eql(requestData.email);
    pm.expect(responseJson.isActive).to.eql(requestData.isActive);
});

// Email Format Check
pm.test("Email format is valid", function () {
    let responseJson = pm.response.json();
    pm.expect(responseJson.email).to.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/); // Simple regex for email validation
});

// Check for Required Fields in Response
pm.test("Response has all required fields", function () {
    let responseJson = pm.response.json();
    pm.expect(responseJson).to.have.all.keys("userId", "name", "email", "isActive");
});

// Custom Business Rule Check (Example: isActive should not be true if user's email is not verified)
pm.test("Active status should not be true for unverified email", function () {
    let responseJson = pm.response.json();
    if (responseJson.isActive) {
        // Assuming there's a field in response that indicates email verification status
        pm.expect(responseJson.isEmailVerified).to.be.true;
    }
});

// Additional Security Check (e.g., Checking for unexpected modifications)
pm.test("Response should not contain sensitive data", function () {
    let responseJson = pm.response.json();
    pm.expect(responseJson).to.not.have.keys("password", "securityQuestionAnswers");
});

In this example, the tests are tailored to verify not only the basic functionality of the PUT request (like status code and response structure) but also to ensure that the update adheres to business rules and security standards. The tests check if the response data matches the update request, validate the email format, ensure no sensitive data is exposed, and include a custom check related to the business logic (like the user's active status in relation to their email verification status).

Remember, the specifics of your tests will vary based on the exact nature of your API, its business logic, security considerations, and other factors unique to your application.

REST API using AWS SAM + AMPLIFY - Part 3

Lloyd Marcelino — Sun, 20 Aug 2023 17:51:37 +0000

React App, Github Repo & AWS Connections

Overview:

For this tutorial we are going to do the following:

Create a React application
Create a Github repository
Connect our Github repository to our AWS account

Initialize a Frontend Application with Create-React-App Using TypeScript Template

Step 1. To start, initiate a frontend application by utilizing the Create-React-App CLI tool with the TypeScript template. Execute the following command in your terminal:

npx create-react-app frontend --template typescript

Alternative Approach: If you prefer to use VITE for your application setup, you can refer to the corresponding documentation here.[Click here for the documentations.]

NOTE: If you are working with an existing application, please proceed directly to Step 4.

Step 2. Install Required Dependencies for UI Components

To facilitate the implementation of tables and forms, we'll employ Ant Design and its corresponding icon library. Execute the following command to install these dependencies:

npm install antd @ant-design/icons

Step 3. Install Axios for API Interactions

Next, install Axios, which is a widely-used library for making HTTP requests. This will enable fetching data from our API:

npm install axios

Step 4. Create Amplify.yml as Entry Point for Backend Integration

Navigate to the source (src) folder and create a new file named amplify.yml. This file serves as the entry point to connect our AWS SAM backend with our Amplify frontend.

Environment Variable Setup: Observe the line containing the echo command within the file. This line establishes a connection to your SAM backend. For this, we will use

process.env.REACT_APP_ENDPOINT

as the environmental variable corresponding to our API Gateway endpoint.

commands:
        - echo "REACT_APP_ENDPOINT=$ENDPOINT" >> .env

NOTE: If you are using VITE, your echo command should be

commands:
        - echo "VITE_APP_ENDPOINT=$ENDPOINT" >> .env

Please checkout VITE's documentation for accuracy.

amplify.yml
The amplify.yml file serves as a declarative blueprint for directing AWS Amplify on how to orchestrate the build and deployment processes for your application. Below is a breakdown of its various sections and what they signify.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo "REACT_APP_ENDPOINT=$ENDPOINT" >> .env 
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

Understanding "amplify.yml":

Version Specification
The configuration commences with version: 1, which signifies the version of the YAML file. This is crucial for AWS Amplify to correctly interpret the directives laid out in the configuration.

Frontend Build Settings
The frontend section delineates the instructions specifically related to the frontend build operations. Within this ambit, phases denote the sequential steps in the build process.

Pre-Build Phase:
Executed before the primary build action commences, the command npm ci is triggered to install project dependencies. This command relies on the package-lock.json file to ensure a consistent environment by installing the specified package versions.
Build Phase:
This phase focuses on assembling the frontend code. It comprises two main commands:

echo "REACT_APP_ENDPOINT=$ENDPOINT" >> .env writes the value of the ENDPOINT environment variable to a .env file, associating it with the REACT_APP_ENDPOINT key. This is a standard practice in React-based applications for handling environment-specific configurations.
npm run build executes the build script specified in the package.json file, typically compiling and bundling the React application for production deployment.

Artifacts Section
The artifacts section outlines which resultant files ('artifacts') from the build process should be preserved and their respective storage locations. The baseDirectory: build directive specifies that these artifacts will reside in the build directory post-build. Furthermore, the files sub-section, featuring a "*/" glob pattern, denotes that every file and its sub-files within the baseDirectory are to be categorized as artifacts.

Cache Strategy
The cache section elaborates on caching mechanisms, aimed at accelerating subsequent build processes by reusing previously generated data. The paths sub-section specifies node_modules/*/, indicating that the complete contents of the node_modules directory should be cached. This optimization is critical, as re-downloading all node modules for each build can be time-consuming; therefore, caching can significantly expedite the overall build process.

Establishing a GitHub Repository for our Amplify-SAM Application

Step 1. Create a New GitHub Repository

Navigate to GitHub and initiate a new repository. For the purpose of this project, we will name the repository "amplify-sam-app".
Set the repository's visibility to 'Public'.

NOTE: If you choose to set the repository to 'Private,' you'll need to generate a GitHub token. Refer to Step 3 for guidance on this process.

Step 2. Initialize and Push Repository from Local Environment
Open a terminal and navigate to the root directory.

NOTE: Follow the set of commands below based on your requirements

To Create a New Repository from the Command Line

echo "# amplify-sam-app" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/_'your github username_'/amplify-sam-app.git
git push -u origin main

To Push an Existing Repository from the Command Line:

git remote add origin https://github.com/'your github username'/amplify-sam-app.git
git branch -M main
git push -u origin main

Step 3. (Optional) If the GitHub repository is set to 'Private,' it becomes necessary to generate a GitHub token to grant SAM the required access permissions. This step is not applicable if the repository is configured as 'Public.'

Follow these steps to create a github token:

On the top right corner, click your photo and go to Settings > Developer Settings > Personal Access Tokens > Tokens (classic)
On the drop down Generate new token select Generate new token (classic).
Select the following scopes: repo, admin:org, admin:public_key, admin:repo_hook, admin:org_hook
Then save
Copy the token
Go to your AWS console and search for "Secret Manager"
Click on Store a new secret

Select 'other type of secret', then 'Plaintext' and paste the github token, press next

Create a name, in our case we will name it "github-token" (we will use this name to our SAM build).

The next step is optional (configuration rotation), just press next
Review everything and submit.

Lastly

As the crucial final step, it is imperative to establish a connection between our AWS account and GitHub for seamless integration. For the most current guidelines on accomplishing this, please refer to the AWS official documentation. Simply proceed by following the instructions detailed therein.

Creating GitHub Connections in AWS

Next Part 4: Back-end (Building SAM)

REST API using AWS SAM+ AMPLIFY - Part 5

Lloyd Marcelino — Sun, 20 Aug 2023 06:59:57 +0000

Modifying the Front-end

We will modify our react frontend using Ant Design tables and forms. We will also use Axios to fetch data from our API endpoint.

Step 1. Inside the api folder, we will create a file and name it "apiEndPoints.ts". This file will contain our API endpoints from our API Gateway.

apiEndPoints.ts

import axios from "axios";
import { Item } from "../components/Home";

const apiInventory = `${process.env.REACT_APP_ENDPOINT}inventory`; //link from the .env file

const apiHealthCheck = `${process.env.REACT_APP_ENDPOINT}check`; //link from the .env file

const apiCars = `${process.env.REACT_APP_ENDPOINT}car`; //link from the .env file

//function to generate random ID:
const id = () => {
  return Math.random().toString(36).substring(2) + Date.now().toString(36);
};

export const getInventory = () => {
  axios
    .get(apiInventory)
    .then((response) => {
      return response.data.inventory;
    })
    .catch((error) => {
      console.log(error);
    });
};

export const healthCheck = () => {
  axios
    .get(apiHealthCheck)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
};

export const getCar = () => {
  axios
    .get(apiCars)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
};

export const postCar = (value: Item) => {
  axios
    .post(
      apiCars,
      {
        model: value.model,
        maker: value.maker,
        engineCyl: value.engineCyl,
        rating: value.rating,
        mpgHighway: value.mpgHighway,
        year: value.year,
        id: id(),
        mpgCity: value.mpgCity,
        mpgCombined: value.mpgCombined,
        engineSize: value.engineSize,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
};

export const putCar = (value: Item) => {
  axios
    .post(
      apiCars,
      {
        model: value.model,
        maker: value.maker,
        engineCyl: value.engineCyl,
        rating: value.rating,
        mpgHighway: value.mpgHighway,
        year: value.year,
        id: value.id,
        mpgCity: value.mpgCity,
        mpgCombined: value.mpgCombined,
        engineSize: value.engineSize,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
};

export const deleteCar = async (id: string) => {
  const data = JSON.stringify({
    id: id,
  });

  const config = {
    method: "delete",
    url: apiCars,
    headers: {
      "Content-Type": "application/json",
    },
    data: data,
  };

  axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });
};

Understanding "apiEndPoints.ts":

import axios from "axios";
import { Item } from "../components/Home";

In the provided code, two main modules are imported: the axios library, which is widely recognized for facilitating HTTP requests in JavaScript, and a type named Item, which is an interface or a type definition sourced from a component within the Home directory.


const apiInventory = `${process.env.REACT_APP_ENDPOINT}inventory`;
const apiHealthCheck = `${process.env.REACT_APP_ENDPOINT}check`;
const apiCars = `${process.env.REACT_APP_ENDPOINT}car`;

The code establishes certain constants such as apiInventory, apiHealthCheck, and apiCars, which are essentially API endpoints. These are derived by merging a fundamental URL obtained from the environment variable named REACT_APP_ENDPOINT with distinct path segments specific to each API function like 'inventory', 'check', and 'car'.


const id = () => {
  return Math.random().toString(36).substring(2) + Date.now().toString(36);
};

The function named id, devised to generate unique IDs. It achieves this by amalgamating a randomly generated string (originating from a number) with the present timestamp.

The rest of the code outlines several API request functions. The getInventory function fetches car inventory using a GET request and logs errors. healthCheck performs a basic health check and logs the outcome. getCar retrieves car details and logs the response. postCar adds a new car to the inventory, including a new ID, using a POST request.putCar uses a POST method to update car details. Lastly, deleteCar removes a car using its ID with a DELETE request, and any outcomes or issues are logged.

Step 2. Within the components directory, we will generate a file named Home.tsx. This file is intended to function as the landing page for our application. For the presentation of tables and forms, we will employ the Ant Design library

Home.tsx

import React, { useState, useEffect } from "react";
import {
  Form,
  Input,
  InputNumber,
  Popconfirm,
  Table,
  Typography,
} from "antd";
import axios from "axios";
import { putCar, deleteCar } from "../api/apiEndPoint";
import FormComponent from "./FormComponent";


export interface Item {
  id: string;
  engineCyl: string;
  engineSize: string;
  maker: string;
  model: string;
  mpgCity: string;
  mpgCombined: string;
  mpgHighway: string;
  rating: string;
  year: string;
}

interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
  editing: boolean;
  dataIndex: string;
  title: string;
  inputType: "number" | "text";
  record: Item;
  index: number;
  children: React.ReactNode;
}

const { Title } = Typography; //Typography for Ant Design

const EditableCell: React.FC<EditableCellProps> = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode = inputType === "number" ? <InputNumber /> : <Input />;

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

const Home: React.FC = () => {
  const [data, setData] = useState<Item[]>([]);

  useEffect(() => {
    const api = `${process.env.REACT_APP_ENDPOINT}inventory`; //link from the .env file
    axios
      .get(api)
      .then((response) => {
        const dataWithKeys = response.data.inventory.map(
          (item: { id: string }) => ({ ...item, key: item.id })
        );
        setData(dataWithKeys);
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const [form] = Form.useForm();
  const [editingKey, setEditingKey] = useState("");
  const isEditing = (record: Item) => record.id === editingKey;


  const edit = (record: Partial<Item> & { id: React.Key }) => {
    form.setFieldsValue({
      engineCyl: "",
      engineSize: "",
      maker: "",
      model: "",
      mpgCity: "",
      mpgCombined: "",
      mpgHighway: "",
      rating: "",
      year: "",
      ...record,
    });
    setEditingKey(record.id);
  };

  const cancel = () => {
    setEditingKey("");
  };

  const save = async (key: React.Key) => {
    try {
      const row = (await form.validateFields()) as Item;
      const newData = [...data];
      const index = newData.findIndex((item) => key === item.id);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setData(newData);
        console.log(newData[index]);
        putCar(newData[index]);
        setEditingKey("");
      } else {
        newData.push(row);
        setData(newData);
        putCar(newData[index]);
        console.log(newData);
        setEditingKey("");
      }
    } catch (errInfo) {
      console.log("Validate Failed:", errInfo);
    }
  };

  const handleDelete = (key: React.Key) => {
    const dataSource = [...data];
    const newData = dataSource.filter((item) => item.id !== key);
    setData(newData);
  };

  const columns = [
    {
      title: "model",
      dataIndex: "model",
      width: "10%",
      editable: true,
    },
    {
      title: "maker",
      dataIndex: "maker",
      width: "10%",
      editable: true,
    },
    {
      title: "year",
      dataIndex: "year",
      width: "10%",
      editable: true,
    },
    {
      title: "engineCyl",
      dataIndex: "engineCyl",
      width: "10%",
      editable: true,
    },
    {
      title: "engine size",
      dataIndex: "engineSize",
      width: "10%",
      editable: true,
    },
    {
      title: "mpgCity",
      dataIndex: "mpgCity",
      width: "10%",
      editable: true,
    },
    {
      title: "mpgHighway",
      dataIndex: "mpgHighway",
      width: "10%",
      editable: true,
    },
    {
      title: "mpgCombined",
      dataIndex: "mpgCombined",
      width: "10%",
      editable: true,
    },
    {
      title: "rating 1-10",
      dataIndex: "rating",
      width: "5%",
      editable: true,
    },
    {
      title: "operation",
      dataIndex: "operation",
      render: (_: unknown, record: Item) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record.id)}
              style={{ marginRight: 8 }}
            >
              Save
            </Typography.Link>
            <Typography.Link onClick={cancel} style={{ marginRight: 8 }}>
              Cancel
            </Typography.Link>
            <Popconfirm
              title="Sure to delete?"
              onConfirm={() => {
                deleteCar(record.id);
                handleDelete(record.id);
              }}
            >
              <a>Delete</a>
            </Popconfirm>
          </span>
        ) : (
          <Typography.Link
            disabled={editingKey !== ""}
            onClick={() => edit(record)}
          >
            Edit
          </Typography.Link>
        );
      },
    },
  ];

  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: Item) => ({
        record,
        inputType: col.dataIndex === "none" ? "number" : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

  return (
    <>
      <Title level={1}> Amplify + AWS SAM Application</Title>
      <Form form={form} component={false}>
        <Table
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          bordered
          dataSource={data}
          columns={mergedColumns}
          rowClassName="editable-row"
          pagination={{
            onChange: cancel,
          }}
        />
      </Form>
      <FormComponent />
    </>
  );
};

export default Home;

Understanding "Home.tsx":

The main goal of this component is to provide an interface for viewing a table of car data and facilitates editing, saving, and deleting entries, communicating changes to the backend.

Starting off, various dependencies are imported. Notably:


import React, { useState, useEffect } from "react";
import {
  Form,
  Input,
  InputNumber,
  Popconfirm,
  Table,
  Typography,
} from "antd";
import axios from "axios";
import { putCar, deleteCar } from "../api/apiEndPoint";
import FormComponent from "./FormComponent";

Core React functionalities useState and useEffect for state management and side effects.
UI components and utilities from the Ant Design library (Form, Input, Table, and so on).
An HTTP client, axios, for making server requests.
API functions, putCar and deleteCar, for updating and deleting cars, respectively.

export interface Item {
  id: string;
  engineCyl: string;
  engineSize: string;
  maker: string;
  model: string;
  mpgCity: string;
  mpgCombined: string;
  mpgHighway: string;
  rating: string;
  year: string;
}

interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
  editing: boolean;
  dataIndex: string;
  title: string;
  inputType: "number" | "text";
  record: Item;
  index: number;
  children: React.ReactNode;
}

The code defines an interface Item that outlines the structure of a car's data. Also an interface EditableCellProps that details the properties for an editable cell within the table.

const EditableCell: React.FC<EditableCellProps> = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode = inputType === "number" ? <InputNumber /> : <Input />;

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

Function EditableCell renders a table cell, which can be either in an editing state (displaying an input field) and/or a default state (displaying the cell's value).

On the main component, Home, maintains the state for the table data (data), the form (form), and the currently edited table row (editingKey).

useEffect(() => {
    const api = `${process.env.REACT_APP_ENDPOINT}inventory`; //link from the .env file
    axios
      .get(api)
      .then((response) => {
        const dataWithKeys = response.data.inventory.map(
          (item: { id: string }) => ({ ...item, key: item.id })
        );
        setData(dataWithKeys);
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

On the initial component render, a useEffect hook triggers a call to fetch the car inventory from an API endpoint, appending unique keys for each data row.


  const edit = (record: Partial<Item> & { id: React.Key }) => {
    form.setFieldsValue({
      engineCyl: "",
      engineSize: "",
      maker: "",
      model: "",
      mpgCity: "",
      mpgCombined: "",
      mpgHighway: "",
      rating: "",
      year: "",
      ...record,
    });
    setEditingKey(record.id);
  };

  const cancel = () => {
    setEditingKey("");
  };

  const save = async (key: React.Key) => {
    try {
      const row = (await form.validateFields()) as Item;
      const newData = [...data];
      const index = newData.findIndex((item) => key === item.id);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setData(newData);
        console.log(newData[index]);
        putCar(newData[index]);
        setEditingKey("");
      } else {
        newData.push(row);
        setData(newData);
        putCar(newData[index]);
        console.log(newData);
        setEditingKey("");
      }
    } catch (errInfo) {
      console.log("Validate Failed:", errInfo);
    }
  };

  const handleDelete = (key: React.Key) => {
    const dataSource = [...data];
    const newData = dataSource.filter((item) => item.id !== key);
    setData(newData);
  };

Functions within Home to facilitate editing:

edit prepares the form for editing a specific table row.
cancel resets the editing state.
save validates the changes made in the form, updates the local data state, sends an update to the backend using putCar, and resets the editing state.
handleDelete removes a car from the local state and invokes the deleteCar function to delete the car from the backend.

 const columns = [
    {
      title: "model",
      dataIndex: "model",
      width: "10%",
      editable: true,
    },
    {
      title: "maker",
      dataIndex: "maker",
      width: "10%",
      editable: true,
    },
    {
      title: "year",
      dataIndex: "year",
      width: "10%",
      editable: true,
    },
    {
      title: "engineCyl",
      dataIndex: "engineCyl",
      width: "10%",
      editable: true,
    },
    {
      title: "engine size",
      dataIndex: "engineSize",
      width: "10%",
      editable: true,
    },
    {
      title: "mpgCity",
      dataIndex: "mpgCity",
      width: "10%",
      editable: true,
    },
    {
      title: "mpgHighway",
      dataIndex: "mpgHighway",
      width: "10%",
      editable: true,
    },
    {
      title: "mpgCombined",
      dataIndex: "mpgCombined",
      width: "10%",
      editable: true,
    },
    {
      title: "rating 1-10",
      dataIndex: "rating",
      width: "5%",
      editable: true,
    },
    {
      title: "operation",
      dataIndex: "operation",
      render: (_: unknown, record: Item) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record.id)}
              style={{ marginRight: 8 }}
            >
              Save
            </Typography.Link>
            <Typography.Link onClick={cancel} style={{ marginRight: 8 }}>
              Cancel
            </Typography.Link>
            <Popconfirm
              title="Sure to delete?"
              onConfirm={() => {
                deleteCar(record.id);
                handleDelete(record.id);
              }}
            >
              <a>Delete</a>
            </Popconfirm>
          </span>
        ) : (
          <Typography.Link
            disabled={editingKey !== ""}
            onClick={() => edit(record)}
          >
            Edit
          </Typography.Link>
        );
      },
    },
  ];

  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: Item) => ({
        record,
        inputType: col.dataIndex === "none" ? "number" : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

columns (see Ant Design Table documentations): The table's columns configuration, columns, describes how each data column should be displayed. Columns include details like "model", "maker", "year", and others. Additionally, we will create an "operation" column that provides Edit, Save, Cancel, and Delete functionalities. When a row is being edited, options to save or cancel the edit (and delete the row) are shown. Otherwise, the row displays an option to start editing.

Additionally, mergedColumns processes the original columns configuration, adding onCell properties to editable columns.

return (
    <>
      <Title level={1}> Amplify + AWS SAM Application</Title>
      <Form form={form} component={false}>
        <Table
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          bordered
          dataSource={data}
          columns={mergedColumns}
          rowClassName="editable-row"
          pagination={{
            onChange: cancel,
          }}
        />
      </Form>
      <FormComponent />
    </>
  );
};

The component's render function returns the table UI, with the EditableCell component specified for rendering the table's cells. Below the table, the FormComponent is also rendered. The table title reads "Amplify + AWS SAM Application".

STEP 3. Inside the components folder, we will create a file named "FormComponents.tsx". The purpose of this file is to provide a user interface, to submit car-related data using a form. Utilizing Ant Design's components, the form will capture various car attributes, such as model, maker, year, engine cylinder, engine size, miles per gallon (MPG) for city, highway, and combined, as well as a rating. When a user submits the form, the onFinish function attempts to post this data using the *postCar * function from an API module. If the submission is successful, the form fields are reset, and a success notification is displayed to the user. If there's an error during the submission process, a warning notification alerts the user. The form's layout can be adjusted through state management, and it comes with predefined styles and validation rules ensuring that all fields are filled out before submission.

FormComponent.tsx


import { Button, Form, Input, notification } from "antd";
import React, { useState } from "react";
import { postCar } from "../api/apiEndPoint";

type LayoutType = Parameters<typeof Form>[0]["layout"];
type NotificationType = "success" | "info" | "warning" | "error";

interface FormValueProps {
  model: string;
  maker: string;
  engineCyl: string;
  rating: string;
  mpgHighway: string;
  year: string;
  id: string;
  mpgCity: string;
  mpgCombined: string;
  engineSize: string;
}

const fields = [
  { label: "Car Model", name: "model" },
  { label: "Car Maker", name: "maker" },
  { label: "Year", name: "year" },
  { label: "Engine Cylinder", name: "engineCyl" },
  { label: "Engine Size", name: "engineSize" },
  { label: "MPG City", name: "mpgCity" },
  { label: "MPG Highway", name: "mpgHighway" },
  { label: "MPG Combined", name: "mpgCombined" },
  { label: "Rating", name: "rating" },
];

const FormComponent: React.FC = () => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>("horizontal");
  const [api, contextHolder] = notification.useNotification();

  const openNotificationWithIcon = (type: NotificationType) => {
    api[type]({
      message: type === "success" ? "Notification" : "Alert",
      description:
        type === "success"
          ? "The form is submitted successfully!"
          : "An error has occurred! Please try again!",
    });
  };

  const formItemLayout =
    formLayout === "horizontal"
      ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } }
      : null;

  const buttonItemLayout =
    formLayout === "horizontal"
      ? { wrapperCol: { span: 14, offset: 4 } }
      : null;

  const onFinish = async (values: FormValueProps) => {
    console.log("Received values of form: ", values);
    try {
      await postCar(values);
      form.resetFields();
      openNotificationWithIcon("success");
    } catch (error) {
      console.error("Error while submitting: ", error);
      openNotificationWithIcon("error");
    }
  };

  return (
    <>
      {contextHolder}
      <Form
        {...formItemLayout}
        layout={formLayout}
        form={form}
        initialValues={{ layout: formLayout }}
        style={{ maxWidth: formLayout === "inline" ? "none" : 600 }}
        onFinish={onFinish}
      >
        {fields.map(field => (
          <Form.Item
            key={field.name}
            label={field.label}
            name={field.name}
            rules={[{ required: true, message: "Please input a value" }]}
          >
            <Input />
          </Form.Item>
        ))}
        <Form.Item {...buttonItemLayout}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default FormComponent;

Step 4. Optional: I am contemplating the incorporation of a dark mode feature into our application. To achieve this, adjustments to Ant Design configurations within the App.tsx file will be necessary. For detailed guidance, I recommend referring to the official Ant Design documentation

NOTE: To verify the successful retrieval of environmental variables from our backend, facilitated by Serverless Application Model (SAM), one can execute a console log using the following code snippet

console.log(`${process.env.REACT_APP_ENDPOINT}inventory`);

If you are using VITE, please checkout VITE's documentation.

App.tsx

import { ConfigProvider, theme } from "antd";
import Home from "./components/Home";
import "./App.css";

function App() {
  const { darkAlgorithm } = theme;

  console.log(`${process.env.REACT_APP_ENDPOINT}inventory`);

  return (
    <>
      <ConfigProvider
        theme={{
          algorithm: darkAlgorithm,
        }}
      >
        <Home />
      </ConfigProvider>
    </>
  );
}

export default App;

Lets push everything to Github and lets check the final result of our project

https://main.d56vr8yu7jeq7.amplifyapp.com/

REST API using AWS SAM + AMPLIFY - Part 4

Lloyd Marcelino — Sun, 20 Aug 2023 06:59:42 +0000

Back-end (Building SAM)

Now it is time to create our backend using AWS SAM

Step 1. Begin by generating a new directory and name it "amplify-sam-backend".

mkdir amplify-sam-backend

Step 2. Move into the newly created directory and launch it in Visual Studio Code.

cd amplify-sam-backend
code .

Subsequently, create a file named template.yml within the amplify-sam-backend directory for configuration.

Step 3. Now we will define cloud formation notations. Since AWS SAM does not have syntax, this section mainly involves copy and pasting.

The first step is to specify the AWS template format version, while also indicating that it incorporates the Serverless Transform.
Following that, we will introduce parameters to allow for dynamic code deployment to GitHub.

AWSTemplateFormatVersion: "2010-09-09"
Transform: "AWS::Serverless-2016-10-31"

Parameters:
  GithubRepository:
    Type: String
    Description: GitHub repository URL
  Stage:
    Type: String
    Description: Deployment stage

Step 4. We will configure global variables, specifically for our DynamoDB database, and designate the table with the name "sam-table" (this will be the name of our DynamoDB table).


Globals:
  Function:
    Environment:
      Variables:
        TABLE_NAME: sam-table

Step 5. Next, we will focus on creating our resources, starting with the Amplify Application. We will set the front-end repository name in the property field.

NOTE: The name of our front end repository is "amplify-sam-app".

NOTE: If your repository is set to private mode, the following line should be included under the Repository field:

AccessToken: "{{resolve:secretsmanager:github-token}}"

Name: amplify-sam-app
Repository: !Ref GithubRepository
AccessToken: "{{resolve:secretsmanager:github-token}}"
IAMServiceRole: !GetAtt AmplifyRole.Arn

For the scope of our project, the repository is publicly accessible; therefore, including an access token is not required.

Resources:
  AmplifyApp:
    Type: AWS::Amplify::App
    Properties:
      Name: amplify-sam-app
      Repository: !Ref GithubRepository
      IAMServiceRole: !GetAtt AmplifyRole.Arn
      EnvironmentVariables:
        - Name: ENDPOINT
          Value: !Sub "https://${MyApi}.execute-api.${AWS::Region}.amazonaws.com/${Stage}/"

Step 6. we will set up our Amplify branches. In our example, the main branch of our frontend application (amplify-sam-app) is labeled as "main." This serves to direct SAM on how to connect our backend with the respective branch.

NOTE: (Optional) Multiple branches can be configured if desired.

AmplifyBranch:
    Type: AWS::Amplify::Branch
    Properties:
      BranchName: main
      AppId: !GetAtt AmplifyApp.AppId
      EnableAutoBuild: true

Step 7. Next, we will establish the necessary IAM roles and permissions required for the effective operation of Amplify. This template encapsulates all the roles and permissions that Amplify necessitates for its operation.

AmplifyRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - amplify.amazonaws.com
            Action:
              - sts:AssumeRole
      Policies:
        - PolicyName: Amplify
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Action: "amplify:*"
                Resource: "*"

Step 8. Next, we will build our API Gateway with CORS configuration. For this project we will set our API Gateway to public access.

NOTE: For adherence to security best practices, it is recommended to configure authorizers on your API Gateway, or alternatively, restrict access exclusively to a Virtual Private Cloud (VPC).

 MyApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: !Ref Stage
      Cors:
        AllowMethods: "'*'"
        AllowHeaders: "'*'"
        AllowOrigin: "'*'"

Step 9. Now lets build our resources, API Gateway methods and Lambda functions.

 MyFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: .
      Handler: handler.handler
      Runtime: nodejs16.x
      Policies: AmazonDynamoDBFullAccess
      Events:
        PostApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: POST
        PutApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: PUT
        DeleteApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: DELETE
        HealthCheckApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /check
            Method: GET
        InventoryApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /inventory
            Method: GET

This SAM template defines multiple Lambda functions that resides in the current directory (handler.js). It uses Node.js 16x as its runtime, has full access to DynamoDB to perform CRUD operations and is triggered by either GET, POST, PUT or DELETE.

NOTE: As an alternative you can also use Method: ANY for the Path: /car

 MyFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: .
      Handler: handler.handler
      Runtime: nodejs16.x
      Policies: AmazonDynamoDBFullAccess
      Events:
        PostPutDeleteApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: ANY
        HealthCheckApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /check
            Method: GET
        InventoryApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /inventory
            Method: GET

Step 11. We will establish our DynamoDB table along with the corresponding output parameters. For the ProvisionedThroughput settings of our DynamoDB table, we will opt for a 'PAY_PER_REQUEST' pricing model, effectively incurring charges only for the operations we execute. Accordingly, these settings will be configured to 0.

DynamoDBTable:
    Type: AWS::DynamoDB::Table
    Properties: 
      TableName: sam-table
      AttributeDefinitions: 
        - AttributeName: id
          AttributeType: S
      KeySchema: 
        - AttributeName: id
          KeyType: HASH
      ProvisionedThroughput: 
        ReadCapacityUnits: 0
        WriteCapacityUnits: 0



Outputs:
  # ServerlessRestApi is an implicit API created out of Events key under Serverless::Function
  # Find out more about other implicit resources you can reference within SAM
  # https://github.com/awslabs/serverless-application-model/blob/master/docs/internals/generated_resources.rst#api
  OrderApi:
    Description: "API Gateway endpoint URL for Prod stage for Order function"
    Value: !Sub "https://${MyApi}.execute-api.${AWS::Region}.amazonaws.com/${Stage}/inventory/"

Here is our full template.yml code:


AWSTemplateFormatVersion: "2010-09-09"
Transform: "AWS::Serverless-2016-10-31"

Parameters:
  GithubRepository:
    Type: String
    Description: GitHub repository URL
  Stage:
    Type: String
    Description: Deployment stage

Globals:
  Function:
    Environment:
      Variables:
        TABLE_NAME: sam-table

Resources:
  AmplifyApp:
    Type: AWS::Amplify::App
    Properties:
      Name: amplify-sam-app
      Repository: !Ref GithubRepository
      IAMServiceRole: !GetAtt AmplifyRole.Arn
      EnvironmentVariables:
        - Name: ENDPOINT
          Value: !Sub "https://${MyApi}.execute-api.${AWS::Region}.amazonaws.com/${Stage}/"

  AmplifyBranch:
    Type: AWS::Amplify::Branch
    Properties:
      BranchName: main
      AppId: !GetAtt AmplifyApp.AppId
      EnableAutoBuild: true

  AmplifyRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - amplify.amazonaws.com
            Action:
              - sts:AssumeRole
      Policies:
        - PolicyName: Amplify
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Action: "amplify:*"
                Resource: "*"

  MyApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: !Ref Stage
      Cors:
        AllowMethods: "'*'"
        AllowHeaders: "'*'"
        AllowOrigin: "'*'"


  MyFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: .
      Handler: handler.handler
      Runtime: nodejs16.x
      Policies: AmazonDynamoDBFullAccess
      Events:
        PostApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: POST
        PutApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: PUT
        DeleteApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /car
            Method: DELETE
        HealthCheckApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /check
            Method: GET
        InventoryApi:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /inventory
            Method: GET


  DynamoDBTable:
    Type: AWS::DynamoDB::Table
    Properties: 
      TableName: sam-table
      AttributeDefinitions: 
        - AttributeName: id
          AttributeType: S
      KeySchema: 
        - AttributeName: id
          KeyType: HASH
      ProvisionedThroughput: 
        ReadCapacityUnits: 0
        WriteCapacityUnits: 0



Outputs:
  # ServerlessRestApi is an implicit API created out of Events key under Serverless::Function
  # Find out more about other implicit resources you can reference within SAM
  # https://github.com/awslabs/serverless-application-model/blob/master/docs/internals/generated_resources.rst#api
  OrderApi:
    Description: "API Gateway endpoint URL for Prod stage for Order function"
    Value: !Sub "https://${MyApi}.execute-api.${AWS::Region}.amazonaws.com/${Stage}/inventory/"

Step 12. Next, we will generate a handler.js file within our amplify-sam-backend directory. This file is designated to act as our Lambda handler, encompassing its requisite functionalities. Essentially, this is a Node.js script responsible for processing requests from our API Gateway and fetching data from our DynamoDB table via the AWS SDK.

NOTE: I plan to publish an additional blog post that will provide an in-depth explanation of this handler.



const AWS = require('aws-sdk');

const dynamodb = new AWS.DynamoDB.DocumentClient();
const dynamodbTableName = process.env.TABLE_NAME;
const checkPath = '/check';
const carPath = '/car';
const inventoryPath = '/inventory';

exports.handler = async function(event) {
  console.log('Request event: ', event);
  let response;
  switch(true) {
    case event.httpMethod === 'GET' && event.path === checkPath:
      response = buildResponse(200);
      break;
    case event.httpMethod === 'GET' && event.path === carPath:
      response = await getProduct(event.queryStringParameters.id);
      break;
    case event.httpMethod === 'GET' && event.path === inventoryPath:
      response = await getProducts();
      break;
    case event.httpMethod === 'POST' && event.path === carPath:
      response = await saveProduct(JSON.parse(event.body));
      break;
    case event.httpMethod === 'DELETE' && event.path === carPath:
      response = await deleteProduct(JSON.parse(event.body).id);
      break;
    default:
      response = buildResponse(404, '404 Not Found');
  }
  return response;
}

async function getProduct(id) {
  const params = {
    TableName: dynamodbTableName,
    Key: {
      'id': id
    }
  }
  return await dynamodb.get(params).promise().then((response) => {
    return buildResponse(200, response.Item);
  }, (error) => {
    console.error('Get product error: ', error);
  });
}

async function getProducts() {
  const params = {
    TableName: dynamodbTableName
  }
  const allProducts = await scanDynamoRecords(params, []);
  const body = {
    inventory: allProducts
  }
  return buildResponse(200, body);
}

//Recursize function for DynamoDB scan. DynamoDB limit on return on one querey
async function scanDynamoRecords(scanParams, itemArray) {
  try {
    const dynamoData = await dynamodb.scan(scanParams).promise();
    itemArray = itemArray.concat(dynamoData.Items);
    if (dynamoData.LastEvaluatedKey) {
      scanParams.ExclusiveStartkey = dynamoData.LastEvaluatedKey;
      return await scanDynamoRecords(scanParams, itemArray);
    }
    return itemArray;
  } catch(error) {
    console.error('DynamoDB scan error: ', error);
  }
}

async function saveProduct(requestBody) {
  const params = {
    TableName: dynamodbTableName,
    Item: requestBody
  }
  return await dynamodb.put(params).promise().then(() => {
    const body = {
      Operation: 'SAVE',
      Message: 'SUCCESS',
      Item: requestBody
    }
    return buildResponse(200, body);
  }, (error) => {
    console.error('POST error: ', error);
  })
}


async function deleteProduct(id) {
  const params = {
    TableName: dynamodbTableName,
    Key: {
      'id': id
    },
    ReturnValues: 'ALL_OLD'
  }
  return await dynamodb.delete(params).promise().then((response) => {
    const body = {
      Operation: 'DELETE',
      Message: 'SUCCESS',
      Item: response
    }
    return buildResponse(200, body);
  }, (error) => {
    console.error('Delete error: ', error);
  })
}

function buildResponse(statusCode, body) {
  return {
    statusCode: statusCode,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
      'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Origin': '*',
      'X-Request-With': '*'
    },
    body: JSON.stringify(body)
  }
}

Step 13. Next, we will initiate the deployment of our assets to the cloud using the guided SAM deploy process. This action will result in the creation of our Serverless Application Model (SAM) application.

To commence deployment, navigate to the amplify-sam-backend directory within your terminal and execute the following command:

sam deploy --guided

You will be prompted to enter various parameters:

Stack Name: amplify-sam-backend
AWS region: us-east-1
Parameter GithubRepository: https://github.com/'your github username'/amplify-sam-app
Confirm changes before deploy [Y/n]: Y
Allow SAM CLI role creation [Y/n]: Y
Save arguments to configuration file [Y/n]: Y
SAM configuration file [samconfig.toml]: samconfig.toml
SAM configuration environment [default]:

The SAM CLI will orchestrate the deployment to the cloud, a process that generally requires approximately 2-3 minutes for completion.

Upon successful deployment, navigate to your AWS Management Console and proceed to CloudFormation > amplify-sam-backend > Resources to confirm that the application has been instantiated as expected.

Finally, return to the AWS Management Console and locate AWS Amplify. Identify our application, denoted as "amplify-sam-app," and select it. Once the deployment has successfully concluded, you may click the provided link to verify the application's functionality.

Next Part 5: Modifying the Front-end

REST API using AWS SAM + AMPLIFY - Part 1

Lloyd Marcelino — Sun, 20 Aug 2023 06:52:09 +0000

Introduction

This project is aimed at providing a comprehensive guide and structure to build a full-stack application using AWS Amplify and AWS Serverless Application Model (SAM). We leverage the powerful features of these services to create a scalable, secure, and easily maintainable web application.

The idea of this project is not to focus on the front end (UX/UI) design but rather on how to build an application using Amplify and AWS SAM.

About the project

AWS Amplify enables developers to develop and deploy cloud-powered mobile and web applications. It includes a broad set of tools and services that can create scalable, full stack applications, with a focus on simplicity and ease of use.

AWS Serverless Application Model (SAM) is an open-source framework for building serverless applications. It extends AWS CloudFormation to provide a simplified way of defining the Amazon API Gateway APIs, AWS Lambda functions, and Amazon DynamoDB tables needed by your serverless application.

The combination of Amplify and AWS SAM allows developers to rapidly build and scale applications without worrying about managing servers. This project provides a ready-to-use template to bootstrap your next full stack application.

Project structure

The project is architecturally segmented into two principal components:

Frontend, Powered by AWS Amplify: The frontend is responsible for rendering user interfaces, managing user state, and facilitating interactions with backend resources. It is developed and managed through AWS Amplify. The interface features a tabular display of automobile information, enabling users to perform actions such as editing, saving, and deleting rows. Additionally, it offers a form component to facilitate the inclusion of new entries. GitHub Repository for Frontend

Backend, Orchestrated by AWS SAM: This segment encompasses serverless functions via AWS Lambda, API endpoints through AWS API Gateway, and data storage using AWS DynamoDB. The backend supports comprehensive CRUD (Create, Read, Update, Delete) operations through a RESTful API. The architecture and management of this component are facilitated using AWS SAM. GitHub Repository for Backend

Next Part 2: Pre-requisites

To use AWS SAM make sure these pre-requisites are completed.

Skip this step if you already have an AWS account, and have both AWS CLI and AWS SAM installed on your computer.
Move to Part 3!

REST API using AWS SAM + AMPLIFY - Part 2

Lloyd Marcelino — Sat, 19 Aug 2023 02:46:52 +0000

Pre-requisite

Before you install and utilize the AWS Serverless Application Model Command Line Interface (AWS SAM CLI), ensure you've met the necessary prerequisites.

For effective use of the AWS SAM CLI, you must have:

An AWS account, along with AWS Identity and Access Management (IAM) credentials and an associated IAM access key pair.
The AWS Command Line Interface (AWS CLI) installed, which is essential for setting up AWS credentials.

Overview

For this tutorial we are going to do the following:

Sign up for an AWS account
Create an IAM user account
Create an access key ID and secret access key
Install the AWS CLI
Use the AWS CLI to configure AWS credentials
Install AWS SAM

Step 1. Sign up for an AWS Account

https://portal.aws.amazon.com/billing/signup.
If you have not done so. Just follow the online instructions.

Step 2. Create an IAM user account:

Log in to your AWS Account.
Type IAM on the search bar and click

From the IAM Dashboard, on the left hand side of your screen go to Access Management > User
On the top right of your screen click "Create User".

Fill in the username. For this example I will create "SamIAM".
Click "Next"

Under Permissions Options, select "Attach policies directly"
Under Permissions policies, select "AdmistratorAccess"
Scroll to the bottom and click "Next".

For the next page, Review and create, just click "Create User"

Step 3. Create an access key ID and secret access key

You will be prompted back to the main dashboard. Just select the user you just created, "SamIAM".

Click on "Security Credentials" tab
Scroll down and click "Create access key"

Under "Use case" select "Command Line Interface (CLI)
Select the confirmation in the bottom, "I understand the above recommendation and want to proceed to create an access key."
Click "Next".

Ignore this page, just click "Create access key".

Copy the Access key and Secret access key to a notepad. You will need this when setting up your AWS CLI.
For security, click "Download .csv file" and save that file in your personal drive.

Step 4. Install AWS CLI

Click here and follow the instructions: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html

Step 5. Use the AWS CLI to configure AWS credentials

To configure credentials with the AWS CLI:

Run the aws configure command from the command line.
Configure the following. Select each link to learn more:

The following example shows sample values.

$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-east-1
Default output format [None]: json

6. Finally, install AWS SAM

Just follow the instructions in this link:
https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/install-sam-cli.html

Next Part 3: React App, Github Repo & AWS Connections

How to fix CORS issue on AWS CloudFront + S3

Lloyd Marcelino — Sat, 13 May 2023 07:19:22 +0000

The error you're seeing, "No 'Access-Control-Allow-Origin' header", is related to a security feature in web browsers called the same-origin policy, which restricts how resources are shared between documents from different origins. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's DOM.

The error message is associated with CORS (Cross-Origin Resource Sharing), which allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.

In the context of Amazon CloudFront and S3, you often need to set up CORS correctly on your S3 bucket that you're using with CloudFront. Here's how you can do it:

Step 1: Set up CORS policy on your S3 bucket .

You need to add a CORS policy to your S3 bucket. This can be done in the AWS Management Console:

Sign in to your AWS Console account
Navigate to your bucket in the S3 console.
Click on the "Permissions" tab.
Scroll down to Cross-origin resource sharing (CORS) and click "Edit"

Add a CORS policy. Here's a sample policy (this allows any domain to access your bucket, you might want to restrict this in a production environment):

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Click "Save changes"

Step 2: Modify your cache setting on CloudFront.

Go to CloudFront and click your distribution.

Then from the menu click on "Behaviors"

select your behavior and click "Edit"

scroll down to "Viewer", select "Redirect HTTP to HTTPS" and select "GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE"

scroll down to Cache key and origin request, and select "CashingDisabled" from the Cache Policy dropdown.
click "Save changes"
wait for CloudFront to deploy (takes about 2-3 mins.) then YOU ARE DONE!

Please leave a comment below if you like these kind of blog post.

Why I love to use AWS Amplify on my React application?

Lloyd Marcelino — Mon, 08 May 2023 23:47:19 +0000

As a Full-Stack Developer, building a robust and scalable React application can be a challenging task, especially when it comes to setting up and managing the backend infrastructure. Fortunately, Amazon Web Services (AWS) has provided a solution to this problem in the form of Amplify.

Amplify is a development platform that provides a set of tools and services that simplify the process of building, deploying, and managing cloud-powered applications. It offers a wide range of features, including authentication, data storage, analytics, and much more.

In this blog post, I will be sharing why I love to use Amplify to create my React applications.

Easy setup and configuration

One of the major reasons I love using Amplify is its ease of setup and configuration. Amplify provides a CLI tool that enables developers to quickly set up a new project and configure the necessary services. With just a few commands, I can easily set up authentication, data storage, and other essential services for my React application.

Seamless integration with React

Another reason why I love using Amplify is its seamless integration with React. Amplify provides a set of React components that enable me to quickly and easily integrate backend services into my React application. These components handle the necessary authentication, data fetching, and other operations, allowing me to focus on building the front-end components.

Scalability and flexibility

Amplify is designed to be scalable and flexible, allowing developers to easily adjust to changing business requirements. It offers a range of services that can be easily configured and scaled as needed, enabling developers to build applications that can handle any amount of traffic and data.

Strong security features

Amplify provides a range of security features that help protect applications from potential security threats. These features include authentication, authorization, and data encryption. With Amplify, I can be confident that my application and data are secure.

Cost-effective

Finally, I love using Amplify because it is cost-effective. Amplify offers a range of pricing options that allow developers to pay only for the services they use. This makes it easy for developers to build and deploy applications without having to worry about high infrastructure costs.

In conclusion, Amplify is an excellent development platform for building scalable and robust React applications. Its ease of setup and configuration, seamless integration with React, scalability and flexibility, strong security features, and cost-effectiveness make it a perfect choice for developers.

React Typescript + Vite + AWS Amplify 05.2023

Lloyd Marcelino — Mon, 08 May 2023 20:43:10 +0000

As a developer, you're constantly looking for ways to improve your workflow and streamline your development process. One tool that has gained popularity recently is Vite, a blazing-fast build tool that promises faster development and build times compared to Create React App (CRA). In this blog post, we'll explore why you should consider using Vite instead of CRA, and highlight one common issue that developers face when connecting Vite to AWS Amplify.

First off, let's talk about Vite. Vite is a modern build tool that offers near-instantaneous hot module replacement (HMR) and fast development server startup times. It achieves this by using native ES modules in the browser and leveraging modern browser features such as lazy-loading and dynamic imports. In contrast, CRA uses a more traditional approach, relying on Webpack and Babel to bundle and transpile your code. While CRA is still a great tool, Vite's approach is more efficient, making it a compelling option for developers looking to optimize their workflow.

Now, let's address the issue of connecting Vite to AWS Amplify. AWS Amplify is a cloud-based service that provides a suite of tools for building and deploying web and mobile applications. While it's a powerful tool, some developers have reported difficulty connecting Vite to Amplify. The main issue is that Vite's dev server is not compatible with Amplify's default setup, which uses Webpack as the build tool. This can cause problems when trying to test your app locally before deployment.

Fortunately, there are workarounds for this issue, and in this blog post, we'll cover some of the most common solutions. By the end of this post, you'll have a better understanding of how to connect Vite with AWS Amplify, and why Vite is a strong alternative to Create React App.

So, whether you're a seasoned developer or just starting out, Vite is a tool that you should consider using. Its speed and efficiency can help you streamline your development process, and with the right configuration, it can integrate seamlessly with AWS Amplify. So, let's dive in and explore why Vite might be the right choice for your next project.

How to set up Vite on React - Typescript for Amplify?

First, install Vite

# npm 6.x
npm create vite@latest my-react-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react-ts

# yarn
yarn create vite my-react-app --template react-ts

# pnpm
pnpm create vite my-react-app --template react-ts

Second, cd to your project root folder and install the dependencies by running npm install (if you are using npm) and start your app by running npm run dev

npm install
npm run dev

Third, modify your index.html by adding the following script before the closing body tag </body>

<script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    }
    var exports = {};
</script>

Fourth, update your vite.config.ts and add a resolve alias inside the defineConfig({}) as seen below. You need to add the build output so Amplify would know where to get the build target of your application.

export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  },
  //Add build if you are going to use a Git-based (Github or CodeCommit) deployement
  build: {
    outDir: "build",
  }
})

if build is not included inside defineConfig({}) the application will only work on Amplify manual deployment. In order for the Git-based (CI/CD pipeline) deployment to work, build output must be present.

 build: {
    outDir: "build",
  }

Finally, update your tsconfig.json file and add skipLibCheck: true under compilerOptions.

    "compilerOptions": {
        "skipLibCheck": true,
    }
...

IMPORTANT!!!

When initializing your backend on Amplify amplify init (https://docs.amplify.aws/start/getting-started/setup/q/integration/react/) make sure you select No when asked Initialize the project with the above configuration?

? Enter a name for the project reactamplified
The following configuration will be applied:

?Project information
| Name:  reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No

Amplify will ask you to prompt your response manually. Once you get to the Build Command question, type

npm run build

and for the Start Command, type

npm run dev

This is very important!

| Start Command: npm run-script start

Since you are using Vite, you need to modify the start and build command for Amplify to mirror your package.json. Check your package.json and you will see that npm run dev will start your application not npm run start

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

Finally you should have something like this:

| Name:  reactamplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run build
| Start Command: npm run dev

For information on how to set up Amplify please visit https://docs.amplify.aws/start/q/integration/react/

Let me repeat my self

if build is not included inside defineConfig({}) of your vite.config.ts the application will only work on Amplify manual deployment. In order for the Git-based (CI/CD pipeline) deployment to work, build output must be present.

export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  },
  build: {
    outDir: "build",
  }
})

Go to your aws console > Amplify > your app > Build Settings > amplify.yml and check if all settings are correct. Make sure that the build commands is npm run build and artifacts baseDirectory is set to build

Troubleshooting: Declaration file for aws-exports

When adding the following code to your index.ts (or main.ts; I usually rename my main.ts to index.ts just for my sanity)

import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

and see this error:

Could not find a declaration file for module './aws-exports'. 'aws-exports.js' implicitly has an 'any' type.

Create a aws-exports.d.ts file on the same level as aws-exports with the following content:

declare module './aws-exports' {
    const awsExports: unknown | never;
    export default awsExports;
}

export = awsmobile; declare const awsmobile: any;

declare const awsmobile: Record<string, any>
export default awsmobile;

This code will fix your issue.

Why is Vite a strong alternative to Create React App?

Fast Development and Build Speed

One of the main advantages of Vite is its fast development and build speed. Vite uses a modern development server that leverages ES modules to speed up the development process. This means that changes to your code are reflected immediately in the browser, without the need for a full rebuild. In contrast, CRA uses a more traditional build system that requires a full rebuild every time you make changes to your code. This can slow down your development process, especially if you're working on a large project.

Vite also has a fast build speed, thanks to its use of a highly optimized build pipeline. Vite's build pipeline uses Rollup under the hood, which is known for its excellent performance. This means that you can generate a production build of your application much faster with Vite than with CRA.

Flexible Configuration

Another advantage of Vite is its flexible configuration. Vite allows you to configure your project using a simple configuration file, similar to CRA. However, Vite's configuration file is much simpler and easier to understand than CRA's. This makes it easier to customize your project to meet your specific needs.

In addition, Vite supports a wide range of plugins that can extend its functionality. This means that you can easily add new features to your project, such as support for TypeScript, CSS preprocessors, and more.

Support for Multiple Frameworks

Vite is not limited to React. It also supports other popular front-end frameworks, such as Vue.js and Svelte. This means that you can use Vite as a universal build tool for all your front-end projects, regardless of which framework you're using.

In contrast, CRA is designed specifically for React projects. While it's possible to modify CRA to support other frameworks, it requires additional configuration and setup.

Conclusion

In summary, Vite is becoming a popular choice for building React applications due to its fast development and build speed, flexible configuration, and support for multiple frameworks. While CRA is still a reliable choice for building React projects, Vite offers a more modern and flexible approach that many developers are finding appealing. If you're looking for a fast and flexible build tool for your next React project, consider giving Vite a try.

Please leave a comment below if you like these kind of blog post.