Tutorial: Connecting a React Application with FastAPI and DynamoDB using AWS and Python #fastapi #react #aws #python

In this tutorial, we will walk through the process of connecting a React application with a FastAPI backend using DynamoDB as the database. We will also cover how to set up the required AWS resources for the DynamoDB database.

Prerequisites:

• Basic understanding of React, FastAPI, AWS, and Python
• Node.js installed on your machine
• Python installed on your machine
• An AWS account

Step 1: Set up the FastAPI backend

First, let’s create a new FastAPI project by running the following commands in your terminal:

pip install fastapi uvicorn

Next, create a new Python file for your FastAPI backend. Inside the file, import FastAPI and create an instance of the FastAPI class:

from fastapi import FastAPI

app = FastAPI()

Now, let’s create an endpoint to test if the backend is running. Add the following code to your Python file:

@app.get("/")
def read_root():
    return {"Hello": "World"}

To run the FastAPI server, use the uvicorn command in your terminal:

uvicorn file_name:app --reload

Make sure to replace file_name with the name of your Python file. If everything is set up correctly, you should be able to access the "Hello World" message at http://localhost:8000.

Step 2: Set up the DynamoDB database

Next, let’s set up the DynamoDB database on AWS. Go to the AWS Management Console and navigate to the DynamoDB service. Click on "Create table" and fill in the required details, such as the table name and primary key.

Once the table is created, note down the AWS Access Key ID, Secret Access Key, and Region. You will need these to connect to the DynamoDB database from your FastAPI backend.

Step 3: Connect the FastAPI backend to the DynamoDB database

To connect the FastAPI backend to the DynamoDB database, we will use the boto3 library in Python. Install the boto3 library by running the following command in your terminal:

pip install boto3

Next, create a new Python function to initialize the DynamoDB client with the AWS credentials:

import boto3

dynamodb = boto3.resource('dynamodb',
                          aws_access_key_id='your_access_key_id',
                          aws_secret_access_key='your_secret_access_key',
                          region_name='your_region')

Replace your_access_key_id, your_secret_access_key, and your_region with your AWS credentials.

Now, you can use the dynamodb client object to interact with the DynamoDB database, such as creating a new item or querying existing items.

Step 4: Create API endpoints in FastAPI

Now that we have connected the FastAPI backend to the DynamoDB database, let’s create API endpoints to perform CRUD operations on the database.

For example, to retrieve all items from the DynamoDB table, you can create a new endpoint in your FastAPI backend:

@app.get("/items")
def get_items():
    table = dynamodb.Table('your_table_name')
    response = table.scan()
    return response['Items']

Replace your_table_name with the name of your DynamoDB table.

Test the endpoint by accessing it in your browser or using a tool like Postman.

Step 5: Build the React frontend

Now that the backend is set up and connected to the DynamoDB database, let’s build the React frontend to interact with the backend API.

Start by creating a new React project using Create React App:

npx create-react-app my-react-app

After the project is created, navigate to the project directory and install Axios to make API requests:

npm install axios

Next, create a new component to fetch data from the FastAPI backend. You can use the fetch or Axios library to make a GET request to the backend API endpoint.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const getItems = async () => {
      const response = await axios.get('http://localhost:8000/items');
      setItems(response.data);
    };

    getItems();
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default App;

To run the React frontend, start the development server by running the following command in your terminal:

npm start

Navigate to http://localhost:3000 in your browser to see the React frontend fetching data from the FastAPI backend and displaying it on the page.

Congratulations! You have successfully connected a React application with a FastAPI backend using DynamoDB as the database. This tutorial covers the basic setup, and you can further enhance the application by adding more API endpoints, implementing CRUD operations, and adding authentication. Happy coding!