Published on

Adding host property to webpack config

Last Modified on
Last modified on
Authors
Adding host property to webpack config
Photo by Annie Spratt on Unsplash

Note: this assumes your operating system is Unix (OSX) and that your computer is a Mac.

Did you know that if you added the host property to your devServer object in your webpack.config.js file, it enables you to view your app via localhost on other devices that share the same network as your computer? i.e., your smart phone or tablet?

First, add the host property to your devServer {} object in your webpack.config.js file with the following value:

host: '0.0.0.0'

Next, re-start the webpack-dev-server with your webpack-dev-server script. Mine is npm run dev.

When you know that your webpack-dev-server has started up successfully, type the following command in Terminal to find out the local IP address of your Mac computer/laptop:

ipconfig getifaddr en0

You can also find out your computer's local IP address by going into Preferences -> Network, and towards the top right of the Network window, below Status: Connected, you will find something like the following:

Wi-Fi is Connected to xxxxxxxxxxx-5G and has the IP address 192.168.x.x

Then go into another device, like your smart phone, for example, which is running on the same network, and type in the following:

192.168.x.x:port

port should be replaced by the port number you use in your webpack.config.js file. It is the value you pass to the port property within your devServer object:

devServer:{
    before:function(app,server){
        server._watch('./app/**/*.html')
    },
    contentBase:path.join(__dirname,'app'),
    hot:true,
    port:3000,
    host:'0.0.0.0'
},

And you should see the mobile version of your application rendered there!

I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. Bye for now!

View on GitHub