Building a Full-Stack App with React, Vite, and a Serverless Backend

Majd Muhtaseb11/12/202510 minutes

Introduction

This tutorial will guide you through building a simple full-stack application using React and Vite on the frontend, and a serverless backend using a service like Netlify Functions or AWS Lambda. We'll focus on the core concepts and provide a basic example to get you started.

Frontend Setup with React and Vite

First, let's set up the frontend using Vite. Vite provides a fast and modern development experience.

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

This creates a new React project with Vite and starts the development server.

Creating a Simple React Component

Let's create a simple component to fetch data from our serverless backend. Create a file src/components/DataDisplay.jsx with the following content:

import { useState, useEffect } from 'react';

function DataDisplay() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/.netlify/functions/getData'); // Adjust path based on your serverless setup
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>No data to display</p>;

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

export default DataDisplay;

Integrating the Component

Now, integrate this component into your App.jsx:

import DataDisplay from './components/DataDisplay';

function App() {
  return (
    <div className="App">
      <DataDisplay />
    </div>
  );
}

export default App;

Serverless Backend (Netlify Functions Example)

For this example, we'll use Netlify Functions. If you are using another serverless platform, adjust accordingly.

Setup Netlify: Ensure you have a netlify.toml file in your project root configured for Netlify Functions. A basic one is:
```
[build]
functions = "netlify/functions"
publish = "dist"
command = "npm run build"
```
Create a Function: Create a directory netlify/functions at the root of your project. Inside, create a file named getData.js:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from your Serverless Function!" }),
  };
};

Build and Deploy

Build the Frontend:
```
npm run build
```
Deploy to Netlify:

Using the Netlify CLI: netlify deploy --prod or connect your repository to Netlify for automatic deployments.

Conclusion

This provides a basic foundation for building a full-stack application with React, Vite, and a serverless backend. You can expand upon this by adding more complex features, data storage, and authentication. Remember to adjust paths and configurations to match your specific serverless environment.