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

Linux Instructions

MacOS Instructions

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.