Creating a Vite Project with Express/Node and React: Combining a Node Backend with a React Frontend

In this tutorial, we will walk through the steps to create an Express/Node + React project using Vite as the build tool. We will set up a Node backend with Express and a React frontend, and use Vite to harness the power of modern frontend development tools like hot module replacement, fast builds, and more.

Step 1: Set Up the Node Backend

1. Create a new directory for your project and navigate into it:

mkdir my-express-react-project
cd my-express-react-project

1. Initialize a new Node.js project:

npm init -y

1. Install Express as a dependency:

npm install express

1. Create a new file called server.js and add the following code to set up a basic Express server:

const express = require('express');
const app = express();
const port = 3001;

app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

1. Run the server using the following command:

node server.js

You should see the message Server running at http://localhost:3001 in your terminal. Your Node backend is now up and running!

Step 2: Set Up the React Frontend

1. Create a new directory called client inside your project directory:

mkdir client

1. Navigate into the client directory and initialize a new React project using Create React App:

npx create-react-app .

1. Install the Vite package and vite-plugin-react as dev dependencies:

npm install -D vite vite-plugin-react

1. Create a new file called vite.config.js in the root of the client directory and add the following code to configure Vite to work with React:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
});

1. Modify the scripts section of the package.json file in the client directory to use Vite for development:

"scripts": {
  "start": "vite",
  "build": "vite build"
}

1. Run the frontend using the following command:

npm start

Open http://localhost:3000 in your browser to see your React frontend running. You should see the default Create React App homepage.

Step 3: Connect the Frontend and Backend

1. Update the server.js file to serve the React frontend:

const express = require('express');
const app = express();
const port = 3001;

app.use(express.static('client/build'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

1. Build the React frontend using Vite:

cd client
npm run build

1. Restart the server by running node server.js in the root of your project directory.

2. Open http://localhost:3001 in your browser and you should see your React frontend served by the Express backend.

Congratulations! You have successfully created an Express/Node + React project with Vite. This setup combines the robustness of a Node backend with the modern frontend development tools provided by React and Vite. Feel free to customize and expand upon this project as needed for your specific requirements. Happy coding!