Back to React: Integrating React with Express Server using Webpack

In this tutorial, we're going to revisit our React application and learn how to integrate it with our existing Express.js server. We'll also use Webpack to optimize our JavaScript and automate some processes, making it easier to run and maintain our code. The content of this tutorial is based on a video created in 2016, so I've added some comments for critical updates where necessary.

Overview

In this tutorial, we'll:

1. Set up our React environment using Webpack.
2. Configure Webpack to automate and optimize processes.
3. Move from a browser-based Babel to a server-side Babel setup.
4. Integrate React into our Express.js server.

Prerequisite: You should have completed the previous section where we built a basic server using Express.js.

Step 1: Setting Up the Project

Moving Files to a New Project Directory

To start, let's set up a new project directory for our React application:

1. Create a new project folder for your React app.
2. Copy the files from the Express.js folder (the project we worked on in the previous lecture) into this new folder.

Navigate to your terminal and stop the server from running if it is currently running.

cd [your_project_directory]
npm stop  # Stops the server if it's running

Step 2: Configuring Webpack

What is Webpack?

Webpack is a bundler that takes JavaScript files intended for the client and wraps them into one file, optimizing it for distribution. This also ensures that modern JavaScript features and JSX are translated into versions compatible with older browsers.

Creating a Webpack Configuration File

First, create a Webpack configuration file by running the following command:

touch webpack.config.js

Open the newly created file (webpack.config.js) and set up the following configuration:

const path = require('path');

module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  mode: 'development'
};

• Note: In 2024, it is recommended to use Webpack 5 for modern JavaScript applications. Update the dependencies to the latest versions to benefit from performance and security improvements.

Step 3: Installing Dependencies

We need to install the necessary dependencies for React, Babel, and Webpack. Run the following command to install the required packages:

npm install --save react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

These packages will allow us to use React, translate JSX into JavaScript, and bundle our files.

Step 4: Configuring the JavaScript File

Moving JavaScript Files to a Private Folder

Move the main JavaScript file (app.js) from the public folder to a private folder (src). Rename it to app.jsx to indicate it is using JSX syntax:

mkdir src
mv public/app.js src/app.jsx

Update the app.jsx file to include the following imports:

import React from 'react';
import ReactDOM from 'react-dom';

// Your React code follows here

• Note: Modern React versions use React Hooks, so consider updating any class components in the code to functional components with hooks for a cleaner and more efficient approach.

Step 5: Bundling the Files with Webpack

Now that our configuration is complete, let's bundle the JavaScript using Webpack.

npx webpack

This command will generate the final app.js file inside the public folder, which can be served to clients.

Automating with NPM Scripts

To simplify running the build process, add a script to package.json that runs Webpack for you. Open package.json and add the following script under the "scripts" section:

"scripts": {
  "start": "webpack && node index.js"
}

Now, you can start your server and build your bundle with:

npm start

Step 6: Testing the Application

Run the server and check if everything works as expected. If you navigate to your React app in a browser, you should see your login page or other React components properly rendered.

node index.js

If you run into any issues, make sure the JavaScript is properly loaded in the browser and there are no syntax errors in the bundled app.js file.

Summary

In this tutorial, we learned how to set up Webpack to automate the bundling process for React and Express.js integration. We also moved Babel from the browser to the server side, improving performance. This setup will allow you to work efficiently with modern JavaScript features while ensuring compatibility with older browsers.

Next, we'll be diving into MongoDB, exploring how to create database entries and make our app even more dynamic.