2 Ways to Easily Expose Your Localhost to the World

2 Ways to Easily Expose Your Localhost to the World

Using LocalTunnel and Ngrok
Ferenc Almasi β€’ 2023 April 14 β€’ Read time 4 min read
Learn how you can use Localtunnel and Ngrok to expose your localhost to the world.
  • twitter
  • facebook

If you are just starting out with a new project, spending time configuring deployments and cloud services just to show your progress to stakeholders is not always necessary.

Instead, you can use one of the following NPM packages to get your localhost exposed to the internet in a fraction of the time. These solutions work by proxying all requests to your locally running web server.


Using Localtunnel

Using Localtunnel is the fastest and simplest way to share your localhost with the world through the use of your terminal. It is also a completely free tool. To get started, install Localtunnel either to your project or globally to use it from any repository:

Copied to clipboard!
# Omit the `-g` flag if you don't want to install it globally
npm i -g localtunnel

After installing Localtunnel, use the lt command with the --port flag from your terminal to start Localtunnel serving your app on the specified port:

Copied to clipboard!
lt --port 8000

This command will start Localtunnel serving your app that is running on port 8000. If you have your localhost running on a different port, for example, on 3000, you need to pass --port 3000 instead. This will expose your localhost on a random URL that you can share with others to see your work.

Copied to clipboard!
# Example URL for localtunnel
https://chubby-rocks-eat-92-249-187-35.loca.lt

If you try to open the URL, you will notice it leads to a 404 page. Once you stop running Localtunnel, it will stop serving your app. This URL also changes every time you rerun the process.

Subdomains

You also have the option to specify your own subdomain if you would like to keep sharing your work using the same URL. To set a custom subdomain, use the --subdomain flag:

Copied to clipboard!
-> lt --port 8000 --subdomain webtips
<- your url is: https://webtips.loca.lt
Using custom subdomains with Localtunnel

Note that if the custom subdomain is already taken, you will be assigned a random URL.

Localtunnel reminder
Localtunnel will first serve a reminder page

Once your app is live, you will be greeted with a reminder. This reminder page shows once per IP every 7 days. If you are running automated tests or crawls for your application, you can bypass the above reminder using one of the following options:

  • Send a Bypass-Tunnel-Reminder request header with any value.
  • Send a User-Agent request header with a custom/non-standard browser value.

The Localtunnel API

Lastly, Localtunnel can also be used through an API with Node if you would like to integrate it into your application for things such as automated testing or feature branches. The following example creates a Localtunnel on port 3000:

Copied to clipboard! Playground
const localtunnel = require('localtunnel')
const tunnel = await localtunnel({ port: 3000 })

// Here you can use `tunnel.url` to grab the public URL

// Run code when the tunnel closes
tunnel.on('close', () => { ... })
localtunnel.js
Using localtunnel from JavaScript

Using Ngrok

Ngrok is another tool that can be used for sharing your localhost. Ngrok works similarly to Localtunnel, the only difference is that you need to have an account in order to start using it. To get started with Ngrok, install it from your terminal using the following command:

Copied to clipboard!
npm i -g ngrok

Next, you need to authenticate Ngrok using your auth token that you can grab from the Ngrok dashboard once you've created an account. Using this auth token, run the following command inside your terminal to authenticate Ngrok:

Copied to clipboard!
ngrok authtoken <yourAuthToken>
Authenticate Ngrok

Next, you can run the following command in your terminal to expose your localhost running on port 3000 to the internet:

Copied to clipboard!
ngrok http 3000

Similarly to Localtunnel, this will give you a random Ngrok subdomain that you can share with others. If you skip the authentication step, you will be greeted with the following error, where you can also use the link to open your dashboard to get access to the auth token.

ngrok authentication error
Ngrok authentication error

Just like for Localtunnel, once you are authenticated, you will be greeted with a reminder for security reasons that the page you are about to visit is served through Ngrok. To bypass this reminder screen you can do one of the following:

  • Send an ngrok-skip-browser-warning request header with any value.
  • Send a custom/non-standard browser User-Agent request header.

Ngrok also supports the use of custom subdomains, just like Localtunnel, however, it is only available in the paid plan. Lastly, it has a Node wrapper that you can use to programmatically connect via Ngrok:

Copied to clipboard!
const ngrok = require('ngrok')
const url = await ngrok.connect()
ngrok.js
Using Ngrok from Node
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Comparison

So which one should you use? Both come with different feature sets. Localtunnel is a great free tool that can be used without any prior configuration, while Ngrok can also be used freely but comes with more features for a fee.

The following comparison table will help you decide which one of the two might be the best solution for your use case.

FeatureLocaltunnelNgrok
Has free planβœ”οΈβœ”οΈ
HTTPS supportβœ”οΈβœ”οΈ
Subdomain supportβœ”οΈπŸ’Έ
Wildcard supportβŒπŸ’Έ
Node APIβœ”οΈβœ”οΈ

Legend:

  • βœ”οΈ- Feature available
  • ❌- Feature unavailable
  • πŸ’Έ- Feature available only in paid plan
  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.