Back to articles

From Zero to Production: Building a Full-Stack App with React, TypeScript, and Serverless Functions

Majd Muhtaseb07/07/202510 minutes

Let's build a basic full-stack application that demonstrates how to connect a React frontend with a serverless backend. We'll use React and TypeScript for the frontend and JavaScript serverless functions.

Setting Up the React Frontend

First, create a new React application using Create React App with TypeScript:

npx create-react-app my-app --template typescript
cd my-app

Next, let's create a simple component to display data fetched from our serverless function:

// src/App.tsx
import React, { useState, useEffect } from 'react';

interface Data {
  message: string;
}

function App() {
  const [data, setData] = useState<Data | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/.netlify/functions/hello');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData: Data = await response.json();
        setData(jsonData);
      } catch (e: any) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data from Serverless Function:</h1>
      <p>{data?.message}</p>
    </div>
  );
}

export default App;

Setting Up the Serverless Function (Netlify Functions example)

We'll use Netlify Functions for this example. If you are using a different provider, adapt the function creation and invocation accordingly. Create a netlify/functions directory at the root of your project:

mkdir netlify
mkdir netlify/functions

Create a hello.js file inside netlify/functions:

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from a serverless function!" }),
  };
};

Configuring Netlify (if using Netlify)

If you're using Netlify, you'll need to configure it to deploy your functions. Create a netlify.toml file at the root of your project:

# netlify.toml
[build]
  functions = "netlify/functions"
  publish = "build"

[[redirects]]
  from = "/.netlify/functions/*"
  to = "/.netlify/functions/:splat"
  status = 200

Building and Deploying

Build your React application:

npm run build

And deploy it to your serverless platform of choice. For Netlify, you can use the Netlify CLI:

npm install -g netlify-cli
netlify deploy --prod

Conclusion

This example demonstrates the basic structure of a full-stack application using React, TypeScript, and serverless functions. You can expand upon this by adding more complex logic, database integrations, and authentication. Remember to adapt the serverless function creation and invocation based on your chosen provider (e.g., AWS Lambda, Google Cloud Functions, Azure Functions).