Webpack configuration in React application with express and babel

Question

I am developing a React application using react version ^15.6.1 which uses Webpack, Express and Babel and Yarn as a package manager.

My application is running fine and now I am ready to take application to production and compile js into bundle.js using webpack as well as css and configure a server using express version ^4.15.3 to create development and production build.

So far I have created a webpack.config.js file which looks like this:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');


const config = {
    entry: ['babel-polyfill', './src/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            inject: 'body'
        })
  ]
};

module.exports = config;

a server.js file which has the following code:

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

app.use(express.static(__dirname + '/src'));

app.listen(3000, function () {
  console.log('server on port 3000');
});

and this is the scripts section of my package.json file:

"scripts": {
    "start": "node server.js",
    "dev": "node server.js webpack -w",
    "build": "webpack -p --progress --config ./webpack.prod.config.js"
  },

The problem I am experiencing is that when I run yarn start with the current server.js file set-up when visiting the webpage I am getting Cannot GET / but when I am not using the server.js file and I run yarn start with the following script in my package.json:

"start": "webpack-dev-server"

Project folder structure:

/dist
    bundle.js
    index.html
/node_modules
/src
    /assets
        /styles
            carousel.css
            slider.css
/components
    App.js
    App.js.map
    App.jsx
      index.js
      index.js.map
.babelrc
.eslintrc.js
.gitignore
index.html
package.json
server.js
web pack.config.js
yarn.lock
yarn-error.log

my webpage loads completely fine but the dist folder is not created with the bundle.js file intended. The bundle.js file and index.html file with this file placed into it only appear when I run yarn build

I want to understand why this is happening? If I have made any errors in my current set-up which need adjusting so that I can run the express server for development and production using webpack and babel.

Answer 1

There some problems with your server.js file it should look more like this

app.use(express.static(__dirname + 'dist'));

app.get('/', function (req, res) {
   res.sendFile(__dirname + 'dist/index.html', {root: __dirname})
})