Webpack-dev-server to help develop reactjs app in vagrant guest os

Photo by Kelly Sikkema on Unsplash

In previous article Steps to create a npm project to develop an Reactjs app without create-react-app, we already setup a basic project to have reactjs + redux joined in. I plan to have another article demonstrate how to surfing in reactjs app according to URL. Before that, we gonna to setup a development server to utilize the browser history. Here I run node.js and install packages in vagrant guest os. I will show certain required changes in vagrant configuration file as well.

You can find the sample code in my github or follow this article step by step.

https://github.com/StanleyLiang/reactjs/tree/master/webpackdevserver

Webpack, again, help us start a development server in short. Webpack-dev-server is capable to server an app during developing. Run the following to install it:

npm install webpack-dev-server --save-dev

we can assign an independent webpack config file distinguished from the original one to enhance the power of the dev server without side effects on the original webpack.config.js. Clone webpack.config.js and rename the new file as webpack.dev.config.js. Edit the start script as the following:Then, add the script to run the server by npm in package.json:

{
...
    "scripts": {
...
        "start:dev": "webpack-dev-server --config webpack.dev.config.js"
    }
...
}

Another critical config should be checked before starting the server is the network configuration in your vagrant configuration file. Check the following network configurations are ready:

config.vm.network "forwarded_port", guest: 8080, host: 8080

Webpack-dev-server is listened on port 8080 by default. So this changes in vagrant configuration ensures your browser on host os is able to access the dev server.

Besides, we get to assign a host for the dev-server. Open webpack.dev.config.js to apply the following configurations:

module.exports = {
    ...
    devServer: {
        host: '0.0.0.0',
        publicPath: '/static/build/'
    },
    ...
}

Everything is ready, cool. Let’s start the dev server:

npm run start:dev

You should see the server is running with the following output:

｢wds｣: Project is running at http://0.0.0.0:8080/
｢wds｣: webpack output is served from /

Copy the URL http://localhost:8080/ to your browser on the host os and you supposed to see the app runs.

Moreover

We can config more to enhance the power of the dev server. Here I would like to introduce Hot module reload to you guys.

Hot Module Reload

HMR (Hot Module Reload) is an awesome feature when you develop the app. You will save bunch of time by HMR as it is capable of replacing the modules of app immediately after you save the source codes. Besides, HMR refresh the browser automatically, your fingers are released from pressing on command + R every time you build the app. The following configurations are required in webpack.dev.config.js to enable HMR:

const webpack = require('webpack');
...
module.exports = {
    ...
    devServer: {
        host: '0.0.0.0',
        hot: true,
        publicPath: '/static/build/'
    },
    watch: true,
    watchOptions: {
        poll: 1000
    },
    ...
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

Restart the webpack-dev-server and refresh the browser to apply the changes of configuration file. You can test whether HMR is working or not by adding a task in src/redux/reducers/todo.js:

tasks: [
    'house clean',
    'loundry service',
    'work out',
    'hot reload'
]

Check your browser after saving the file. The app is refreshed to show 4 tasks automatically!!!

Photo by John Schnobrich on Unsplash

I just show few features of webpack-dev-server here. It’s much more powerful than I have showed. I will introduce more in the coming articles. Hope you are benefited from this guide

ref

• github repo of webpack-dev-server https://github.com/webpack/webpack-dev-server
• document of webpack-dev-server https://webpack.js.org/configuration/dev-server/#devserver
• webpack-dev-server in vagrant https://webpack.js.org/guides/development-vagrant/