Make Webpack serve Node/Express part of React/Node/Express project

JavaScript
1

I have a React app that is being served by a Node/Express server. Basically the Node.js script would get authorization from the external api(Spotify’s api) then once authorization is given, my react app can then start accessing the api endpoints. The nodejs script listens on port 8888. So I go to localhost:8888, which serves up my react app from the build folder.

Before I would have to start the node server and the react app separately. When i load up the node server, I would then go the port its listening on: localhost:8888. It serves me my react app from the build folder. The first thing you see is a login button, that when you click, authorizes me and returns data from the endpoints. If I go through Node(8888), i get my data after clicking login. If i go through React(3000), I dont.

Going through the Node server:

Going through React

As you can see, if I go through the Node server, I get my data displayed. If I go through react, I dont get my data. My understanding is that React is not connected to the server. The connection is NODE -> REACT and not REACT -> NODE. In both connections, i do

npm start

and

node app.js

to get the node server and react development server running. app.js is where the nodejs/express script is written

Now with implementing webpack, i can’t get to login. I do npm run dev where the dev script is:

"dev": "webpack-dev-server --mode=development && node app.js"

For some reason, whatever is bundled in webpack is not connecting to the node server:

In my login page i have:

<div>
        <h1>DENS</h1>
        <a href="/login">
          <Button inverted color="pink">
            {" "}
            Login to Spotify
          </Button>
        </a>
        <p>This button will lead you to Spotify who will authenticate you</p>
      </div>

The /login link connects to this piece of code in app.js:

app.get("/login", function (req, res) {
  res.redirect(
    "https://accounts.spotify.com/authorize?" +
      querystring.stringify({
        response_type: "code",
        client_id: client_id,
        redirect_uri: redirect_uri,
      })
  );
});

My webpack code in webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const htmlPlugin = new HtmlWebPackPlugin({
  template: path.resolve(__dirname, "spotify-app", "public", "index.html"),
  filename: "./index.html",
});
module.exports = {
  entry: "/spotify-app/src/index.js",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    hot: true,
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "/"
  }, // NEW Ends
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        //test: /\.(js|jsx)$/,
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-env",
            "@babel/preset-react",
            {
              plugins: ["@babel/plugin-proposal-class-properties"],
            },
          ],
        },
      },
    ],
  },
};

I am guessing I configured something wrong and thats why the webpack is not starting up the node server, but I am not sure what. Please if you could help. Thanks

2

Hello there,

In general, here is the React/Node/Webpack workflow:

  • React is purely frontend. If you use create-react-app to create a boilerplate, this is not quite the case; a server is created, which can complicate things.
  • Webpack bundles your code into (often) one file. Babel is often used to transpile React -> JS. I am not familiar with the HtmlWebPackPlugin, but I will assume you have this set up to transpile HTML & CSS?
  • Node/Express serves your compiled (transpiled?) JavaScript (HTML and CSS too) file. It does not care about whether your app is React or not.

So, Webpack should be configured to output a file (as you have [name].js), which Node should serve app.use('bundled_file.js');

It might be helpful to see something like your project on GitHub, to confirm directory structure.

3

Thank you for the reply. There is the github. In my node script(app.js file) i have:

app
  .use(express.static(path.join(__dirname, "spotify-app/build")))

When i run webpack it says

image
image1331×691 68 KB

From that I see it replaced name in [name].js with main. But I dont see the file anywhere in my file structure. Same thing with dist.

4

Unfortunately, I cannot see why the content is not being served.

If you cannot figure it out, then I would suggest sharing any logs you can, as well as being sure everything is appearing in the browser Network and Source tabs.