As a developer or designer, there are times when you need to share your local project with your team to test or debug an issue. However, you may not want to push your code live or upload it anywhere.
In such cases, Localtunnel is a great tool! It lets you share your localhost with your team so they can test your UI design in real-time without making your code public.
For example, if your design looks fine on Google Chrome but isn’t working on Safari, you can use it to quickly share your local project. Your teammates can then open the link on their Safari browser and check how it renders instantly. This makes it an easy way to test across different screens and browsers without deploying your code.
In this guide, we’ll cover everything you need to know about it, including how to install, how to expose your localhost, and some best practices.
What is Localtunnel?
It’s an open-source tool that allows developers to expose their local development server to the internet via a public URL. This enables remote users to access your application without deploying it online.
Why Use?
– No need to deploy your code for testing
– Easy to set up and use
– Works on any device and browser
– Secure sharing with custom subdomains
– Great for debugging cross-browser issues
Step 1: Install
Localtunnel is installed globally using npm. Run the following command:
npm install -g localtunnel
Step 2: Start Your Local Development Server
Ensure your application runs on a local port (e.g., localhost:8000 for Laravel).
Step 3: Expose Your Local Server
Run the following command to expose your local server
lt --port 8000
Replace 8000 with the actual port your application is running on.
Step 4: Get the Public URL
Once you run the command, you will get a public URL, such as:
your-subdomain.loca.lt
You can share this URL with your teammates to allow them to access your local application.
Step 5: Use a Custom Subdomain (optional)
If you want to use a custom subdomain, run:
lt --port 8000 --subdomain mycustomname
mycustomname is the custom name you can replace this with any name, now, your app will be accessible at:
mycustomname.loca.lt
Step 6: Stop
Press CTRL + C in the terminal to stop.
Essential Things to Know Before Using Localtunnel for Secure Local Hosting
If you’re using a virtual host like http://local.vue-test.co/, it won’t work because it exposes a port, not a domain.
Solution: Find Your Virtual Host’s Port
Virtual hosts in Apache or Nginx run on a local port (e.g., localhost:8000). Find the port your virtual host is using to make Localtunnel work.
Find the Port
– If you’re using Apache, check the Listen directive in your config:
sudo cat /etc/apache2/ports.conf
The default is 80 (or 443 for HTTPS).
– If you’re using Nginx, check your server block in nginx.conf or sites-enabled/vue-test.co
sudo cat /etc/nginx/sites-enabled/vue-test.co
Look for listen 80; or another port number.
Run with the Port
Once you find the port, run:
lt --port 8000
If your virtual host runs on a different port then replace 8000 with your port
API
Localtunnel offers an easy-to-use API that lets developers create and manage tunnels without using the command line. It’s great for automating tasks, integrating with CI/CD pipelines, and securely sharing local projects online.
While Localtunnel provides an API for programmatic usage, installing it globally is the simpler and more efficient way to use it
No Need for Extra Code
Using the API requires writing JavaScript code, handling async functions, and managing the tunnel programmatically. With the global installation, you can simply run:
Faster Setup & Usage
Global installation means you only install Localtunnel once, and it’s ready for use anytime. If you rely on the API, you must install it for every project and write custom scripts.
Works on Any Project Instantly
With the global install, you don’t have to add Localtunnel as a dependency in every project. You can use it across any local project without extra setup.
Easier for Teams
If teammates need to use LocalTunnel, they can run a single command (lt --port 8000). With the API, they need Node.js knowledge and custom scripts.
- Best Practices for Using Localtunnel
- Avoid exposing production applications
- Use strong security measures when sharing links
- Restart Localtunnel if links stop working
- Check port conflicts before running Localtunnel
Conclusion
It’s a simple and effective tool for sharing your local projects with teammates. It’s lightweight, free, and easy to set up. Whether you’re a developer working remotely or a designer testing UI elements, Localtunnel can be a game-changer.
Using the steps in this guide, you can install and use it to secure your localhost with ease.
