How to connect to your localhost from other devices

As a developer you might have been in a situation where you:

1. Are trying to access a web application on localhost from another device or
2. Want to consume your API’s on a flutter app without deploying to a live server.

1. Accessing a web application on localhost from another device

You are building a web application on your computer (Windows OS or Mac OS) and you would love to test that web application on your mobile device or another computer without first deploying to Heroku or any other live server.

For the purpose of this article I will refer to the computer where you have your application running as “server”.

Step 1

Lets make sure both our server and mobile device are connected on the same network

Step 2

The next step is to find the IP address of our server (localhost computer).

For windows computers quickly run the command ipconfig on your command prompt

The result will include an IPV4 address as shown below , That is your IP Address.

For Macs, enter one of the ipconfig mac commands below to find your IP.

• For wired connections, enter ipconfig getifaddr en1 into the Terminal and your local IP will appear.
• For Wi-Fi, enter ipconfig getifaddr en0 and your local IP will appear.

Step 3

Make sure to run your application on your server (localhost computer).

On your mobile device open your browser and type the IP address & remember to include any necessary ports or paths required to view your web app.

for example
100.100.100.100:3000

Where 100.100.100.100 is your computers IP address and 3000 is the port your application is being run on.

2. Consuming your API’s on a flutter app without deploying to a live server

You created endpoints for a mobile app project and for reasons best known to you and your team , you would love to test those endpoints on your mobile app without first deploying the server side of your application to a live server.

For the purpose of this article our backend is built on Node Js & Express while our Mobile app is built on the flutter framework.

Steps 1 and 2

Basically the same as above but before we can proceed with step 3 we have to make sure our endpoint can be accessed across devices without running into Handshake exceptions due to an insecure (http) connection.

Steps 2.5

In your node app install the https local host module by running
npm i -s https-localhost

Steps 3

Replace your express app declaration with this
const app = require("https-localhost")() 

Steps 4

In your main.dart file in your flutter app add this code block


class MyHttpOverride extends HttpOverrides {
@override
HttpClient createHttpClient(SecurityContext? context) {
return super.createHttpClient(context)
..badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
}
}void main() {
HttpOverrides.global = new MyHttpOverride();
runApp(MyApp());
}


Steps 5

Add your endpoints to your flutter app by using the IP address of your server(localhost computer) and remember to include any necessary ports or paths required to access your endpoint

NB: Please remember to deactivate steps 2 to 5 before pushing your project to production.