Find Your Local Machine's IP Address
Intro
Tools like the responsive view modes in web browsers or services like BrowserStack have made it easier
than ever for us to easily test the responsiveness of our work, but sometimes you just want to quickly pull
up your development server on your cell phone or tablet just to check something or test a new feature. You
can easily do this by identifying your internal IP address and using this instead of localhost or
127.0.0.1.
I used to go into my router and play the guessing game with all my connected devices, sometimes getting lucky with "Jody's MacBook" or similar. There's a non-zero chance I was dragged to the land of CLI computing kicking and screaming.
Quick Caveats
We are looking for the internal IP address, so this IP address will not be accessible outside of your network without special steps outside of the scope of this article are taken. This also means that each device you attempt this on will need to be on the same network as your computer running the development server.
Choose Your Warrior
The instructions will take place in the command line, but will differ by each system. After getting the
address, you would simply append your port number to the URL, ie 192.168.1.15:3000.
Windows Instructions
With Windows, it depends again based on whether you use Powershell or batch. If you are using WSL, you should probably be sure you are not querying the Linux subsystem. It may be the same, but because I am not a WSL user, I cannot confidently say.
PowerShell
$ (ipconfig | Select-String "IPv4 Address").ToString().Split(":")[-1].Trim()
192.168.1.16
Batch / Command Prompt
@echo off
for /f "tokens=2 delims=:" %f in ('ipconfig ^| findstr /c:"IPv4 Address"') do echo %f
Linux Instructions
The first approach is to simply run the ifconfig command. This will shell out a large amount of information,
but the important part will look like this:
$ ifconfig
inet 192.168.1.16 netmask 255.255.255.0 broadcast 192.168.1.1
The address immediately after the inet label is your internal IP address. Alternatively, you can use
a little bit of a fancier command to get just the IP address.
$ ifconfig | grep -m 1 'inet' | awk '{print $2}'
192.168.1.16
This works by starting with ifconfig, piping this into prep to find a match for the string 'inet'. The -m 1
argument tells grep to stop reading after the 1st match, and finally we print our second match with awk.
print $1 would output "inet".
Alternative
A reader reached out sharing that ifconfig is no longer universally installed on Linux, so if you got
any errors in running the above code, this is likely the reason and the following code can be used:
ip -h -c -4 addr | grep inet
Many thanks to Paul Hosler for this tip.
MacOS Instructions
On MacOS, simply run the below command in your terminal and the only output will be the IP address of your machine.
Bonus Points
Now that you are able to easily identify your local IP address and pull up your development server on any device connected to your network, a fun next step is if you are using a hot-reload capable toolchain such as Vite or Webpack development server or Live Server in VSCode, is setting up your phone and/or tablet on your desk so that you can see your work in all three major viewports at the same time.
Some people prefer mobile first, or desktop first, and that's fine, but I personally feel like my productivity is significantly higher working on all three in parallel.