Inter 🌐 Media

  • Home
  • Blog
  • Portfolio
  • Newsletter
  • Contact

Adding host property to webpack.config.js which permits you to view your app in localhost on other shared network devices

June 7th, 2020

3 minute read 📗
  • 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

  • Find Your IP Address on Windows or Mac
Tagged in: localhost host-property webpack-config local-ip-address
Categorized under: webpack
Discuss On Twitter Mobile
  • Facebook
  • Twitter
  • Linkedin
  • Hacker News
  • Reddit
Maria D. Campbell

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

  • ← Newer
  • Older →
  • Business Hours
  • Monday: 9:00am - 5:00pm
  • Tuesday: 9:00am - 5:00pm
  • Wednesday: 9:00am - 5:00pm
  • Thursday: 9:00am - 5:00pm
  • Friday: 9:00am - 5:00pm
  • Saturday: Closed
  • Sunday: Closed
  • And By Appointment
  • Podcast
  • Plugging In The Holes
  • Login
  • Admin Login
  • Newsletter
  • Newsletter
  • follow us on Github
  • follow us on Twitter
  • connect with us on Instagram
  • connect with us on Linkedin
ContactSitemapRSS
© 2022 Inter-Global Media Network, Inc.