From Vite to Express: How to Build a Full-Stack App Step-by-Step

In today’s fast-paced web development ecosystem, developers are constantly looking for tools that offer both speed and flexibility. On the frontend, Vite has quickly become the go-to solution for lightning-fast builds and modern development workflows. On the backend, Express.js remains one of the most lightweight and widely used Node.js frameworks for handling APIs and server logic.

So, how do you combine these two powerhouses to create a seamless full-stack app?

In this guide, we’ll walk you through everything you need to know — from setting up Vite for the frontend to building an Express backend and connecting both for a full-stack experience.

1. Why Vite and Express Are the Perfect Pair

Before jumping into the setup, let’s understand why these two frameworks work so well together.

Vite: The Modern Frontend Tool

Vite (pronounced “veet”) is a next-generation frontend build tool that significantly improves the development experience with features like:

• Instant dev server startup powered by native ES modules.
• Lightning-fast hot module replacement (HMR).
• Optimized builds using Rollup under the hood.
• Support for modern frameworks like React, Vue, and Svelte.

Express: The Minimalist Backend Framework

Express.js is a minimalist Node.js framework designed for building robust web applications and APIs. It’s fast, flexible, and widely supported with countless middleware packages.

Together, Vite handles your frontend rendering and assets, while Express manages API endpoints, routes, and backend logic.

2. Setting Up the Frontend with Vite

Let’s start by creating a new frontend project using Vite.

Step 1: Create a New Vite Project

npm create vite@latest my-fullstack-app
cd my-fullstack-app

Choose your favorite framework, for example, React or Vue.

Example:

✔ Select a framework: › React
✔ Select a variant: › JavaScript

Then install dependencies:

npm install

Start the development server:

npm run dev

Your frontend app is now running locally — usually at http://localhost:5173.

3. Setting Up the Backend with Express

Next, let’s create a simple Express backend inside the same project.

Step 1: Create a Backend Folder

In the root of your project, create a folder named:

/server

Step 2: Initialize Node.js and Install Express

Navigate into the server folder and initialize a Node project:

cd server
npm init -y
npm install express cors

Step 3: Create a Basic Express Server

Create a file called index.js inside the server directory:

import express from "express";
import cors from "cors";

const app = express();
const PORT = 5000;
app.use(cors());
app.use(express.json());
app.get("/api", (req, res) => {
  res.json({ message: "Hello from Express backend!" });
});
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Now run:

node index.js

You should see:

Server running on port 5000

Test it in your browser at http://localhost:5000/api.
You’ll get:

{ "message": "Hello from Express backend!" }

4. Connecting Vite Frontend with Express Backend

Now it’s time to connect both sides.

Step 1: Fetch API from Frontend

Open your frontend Vite app and add the following inside your React component (for example, App.jsx):

import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");
  useEffect(() => {
    fetch("http://localhost:5000/api")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  }, []);
  return (
    <div>
      <h1>Vite + Express Full Stack App</h1>
      <p>{message}</p>
    </div>
  );
}
export default App;

When you run both servers (frontend and backend), your app will display:

Hello from Express backend!

Congratulations, you’ve just connected Vite (frontend) and Express (backend) successfully!

5. Running Both Servers Together

Running two servers separately can be tedious. Let’s make it seamless.

Option 1: Use Concurrently

Install the concurrently package in the root folder:

npm install concurrently --save-dev

Then update your root package.json scripts:

"scripts": {
  "dev": "concurrently \"npm run dev --prefix server\" \"npm run dev --prefix my-fullstack-app\""
}

Now, running:

npm run dev

will start both the Vite frontend and Express backend together.

6. Building for Production

When you’re ready to deploy, you’ll want both frontend and backend bundled together.

Step 1: Build Frontend

cd my-fullstack-app
npm run build

This creates a /dist folder.

Step 2: Serve the Frontend via Express

In your Express index.js, add:

import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
app.use(express.static(path.join(__dirname, "../my-fullstack-app/dist")));
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "../my-fullstack-app/dist", "index.html"));
});

Now your Express server serves both:

• The API endpoints
• The built Vite frontend

This means your app can be deployed easily to services like Render, Vercel, or AWS.

7. Advanced Setup: Environment Variables and API Routes

In production apps, you’ll likely need different API URLs or secure credentials.
Use .env files for that.

Get EncodeDots’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

API_URL=http://localhost:5000

In Vite, access it via:

import.meta.env.VITE_API_URL

In Express:

process.env.API_URL

8. Adding Middleware, Authentication, and More

Once your full-stack base is ready, you can expand functionality by:

• Adding middleware like morgan for logging and helmet for security.
• Using JWT tokens or passport.js for authentication.
• Connecting databases (MongoDB, PostgreSQL, or Firebase).
• Integrating third-party APIs for payments, notifications, or analytics.

This scalability is what makes the Vite + Express combo so effective for both prototypes and production-ready apps.

9. Common Issues and Fixes

IssueCauseSolutionCORS errorFrontend and backend on different portsUse cors() in Express“Cannot GET /”Incorrect static file pathCheck express.static() directoryAPI not found in productionMissing route fallbackAdd app.get('*', …) routeBuild not updatingOld files in distRun npm run build again

10. Why This Stack Matters for Developers in 2025–2026

As the web development landscape evolves, Vite + Express stands out because:

• It’s framework-agnostic (works with React, Vue, Svelte, or vanilla JS).
• It delivers instant development feedback.
• It’s lightweight yet production-ready.
• It allows fine-grained control over build tools and APIs.

Whether you’re a startup developer building MVPs or a senior engineer architecting scalable systems, mastering this integration gives you a competitive edge in modern full-stack development.

Conclusion

Building a full-stack app using Vite for the frontend and Express for the backend is not only efficient, it’s also developer-friendly, flexible, and scalable.

This setup gives you the speed of Vite’s instant HMR and the reliability of Express’s mature ecosystem.

Once you’ve mastered this workflow, you can easily expand it into:

• Microservices architecture
• Serverless deployments
• Cloud-native web apps

💡 The combination of Vite + Express isn’t just a stack, it’s the foundation for building fast, modern, and maintainable full-stack applications in 2025 and beyond.