
Adding host property to webpack.config.js which permits you to view your app in localhost on other shared network devices
June 7th, 2020
- Link to Adding host property to webpack.config.js which permits you to view your app in localhost on other shared network devices podcast on anchorfm
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!
Related Resources

Created by Maria D. Campbell who lives and works in New York City building and teaching useful things. You should follow her on Twitter.