How to Reach Your Local Server from Anywhere

Haven’t you ever needed to access Local Servers remotely?

Imagine all the things you can do if you could connect your local host directly to the internet. In this article, I am going to talk about Ngrok and localTunnel. While developing your application, you will arrive at some point when you may need to access your application from different devices, or maybe you just need someone to check your app from a long distance. These tools allow you to have a remote server with a hot reload, which means when you save a new change locally it is already accessible through what we can call a tunnel.

Ngrok

Ngrok is a powerful and versatile tool used to create secure tunnels towards local servers, allowing remote access via the internet. It provides a temporary public URL that sends the traffic to a specified port on your local machine, making it valuable for development, testing, and demonstration purposes.

How does it work?

Ngrok works by establishing a secure connection from a public endpoint to a specified port on your local server. It allows the developers to share their work with some clients or some of their colleagues to get comments or for a demonstration without deploying to a public server or using a version control like git.
Ngrok supports HTTP and TCP, allowing various use cases, including web applications, APIs, and database connections.

Let’s try to access a simple react application through Ngrok:

1 - First Install Ngrok, If you haven't already, by downloading and installing it from the official website: Ngrok - Secure tunnels to localhost and follow the installation instructions provided for your operating system either Linux, macOS, or Windows.

2 - Start your React application's development server. Usually, you can do this by running a command like npm start or yarn start, depending on your package manager.
Find the Port Number:
Note the port number on which your React application's server is running. By default, it's often port 3000.

3 - Expose Your Local Server with Ngrok:
In your terminal/command prompt, navigate to the directory where you installed Ngrok by running the command ngrok http <port> where is the port number of your React application's server. Which in my case is 3000

4 - Now we need to copy the forwarding link to any browser of any device connected to the internet to reach our server. As you can see below, you will need to add ".ngrok-free.app" and click the visit website button to complete the process:

Congratulations!!!!!!!!!!! You have access to your local server online 👏

Aside from Ngrok, you can use tools like LocalTunnel and similar services with similar procedures. They all let you securely expose your local servers to the internet. Your choice between them depends on what features you need and what you're comfortable using. Each tool has its own strengths and limitations, so it's important to pick the one that suits your needs best.

If you have any questions or want to develop this subject further, feel free to drop a comment!