How to configure webpack-dev-server within a React application

In our previous tutorial we made a basic configuration using webpack, babel and React. This post is just a complement of that tutorial.

https://jorgechavez.dev/wordpress/2020/05/02/how-to-configure-react-app-with-webpack-and-babel/

We will setup webpack-dev-server for running our project using a web server. Here is the repository link in case you want to start with the project we made in the previous chapter. https://github.com/echavezNS/basic-react

Step 1: Install library

Let’s install webpack-dev-server in out project with the next command

npm install webpack-dev-server --save

• –save: will save a reference for our library in our package.json file.

Step 2: Server script

Now, let’s create a new script in our package.json file.

"scripts": {
  "server": "webpack-dev-server"
},

This creates a new script called server which we can run with npm run server in order to run a web server, internally webpack-dev-server will use express for running the server.

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from basic-react
ℹ ｢wdm｣: Hash: b36fd9085373ec73fdf5

We can configure things like, which port do we need for this server to run on, what’s the path where assets will be virtually host, do we want to compress our hosted files (gzip).

All this can be done within the webpack configuration.

// webpack.config.js

{
...
   devServer: {
      port: 3000,
      compress: true
   }
}

All the custom configuration can be found in the documentation of webpack-dev-server.

https://webpack.js.org/configuration/dev-server/

Step 3: Assets

This is probably one of the most complex things I got stuck when I was working with webpack-dev-server for the first time, I didn’t know how assets works on web app. Linking frontend with backend in order to serve the assets can be a complicated at first. Let me try to explain.

When you run an express app, you normally need to indicate where the assets are going to serve from. This is because this is a way to express to track which files can be cached or not. Assets like images, javascript files, css files normally shouldn’t change at all.

As I explain webpack-dev-server uses express. So, through our webpack-dev-server configuration we can tell this express server to serve those assets from a certain route. For example:

• /assets/bundle.js
• /public/bundle.js
• /myassets/bundle.js
• /other/bundle.js

Normally what you would do is to match this assets route with whatever real server you will end up using in production. Kind of complex right?. You just need to remember that assets will be serve from either a custom route, or by whatever value you have in the output.path key.

Let’s serve our assets from /assets, in order to do that, we need to add a publicPath key inside the output section.

// webpack.config.js
...
output: {
     filename: 'bundle.js',
     publicPath: '/assets',
     path: path.resolve('dist/js')
  },
...

Again, the final bundle.js file will be placed inside the path route (dist/js) but the server will provide all assets from the route /assets.

If you have any questions about this, don’t doubt to hit my twitter and send me a DM, we can chat about it. @jorgechavz

In the next article I will teach you to setup Sass in your webpack configuration.

Thanks