How to Share Localhost on the Internet with Quick Tunnels

Let's say you just finished developing a website on your PC, accessible through localhost:8080. Now your client or teammate wants to see it. How do you make that happen? Probably a staging server on the internet! No, you don't have to waste your time configuring an entire server. There's a better, easier solution. Cloudflare has a feature called Quick Tunnels that can help you get a public HTTP URL for a local website. People at the other end can use this public HTTP URL to access your site hosted on your computer or laptop. Let's see how we can use this tool to share locally hosted apps on the internet.

📷 Credit: Pușcaș Adryan / Pexels

Setting up and configuring this tool is fairly simple and takes less than 5 minutes. You don’t even need a Cloudflare account or a custom domain to get this working.

Read Also:
How to Share Your Local WordPress Site with Clients Using Ngrok

And, neither you have to make any changes to your ISP's router. It's one of the best tools for freelancers, developers, and working professionals to share their work with others. Let's get started!

Prerequisites for Using Quick Tunnels

This is what you need to configure and run Quick Tunnels on a computer.

• A web server
• A terminal
• And an internet connection.

That's all!

Step-by-Step Method to Put localhost on the Internet

Let's go through the entire process of configuring Quick Tunnels on a computer.

Step 1: Install cloudflared

On macOS

brew install cloudflared

On Windows

winget install --id Cloudflare.cloudflared

On Ubuntu Linux

curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb -o cloudflared.deb
sudo dpkg -i cloudflared.deb

After the installation process is complete, first confirm whether it is working or not.

cloudflared --version

Step 2: Run a Local Web Server

If you already have a web server running and your website is opening well in your browser, you can skip this step. Otherwise, you can create a small demo site as shown below.

mkdir tunnel-demo && cd tunnel-demo
echo "<h1>Hello world!</h1>" > index.html
python3 -m http.server 8080 --bind 127.0.0.1

Now you can open the website http://localhost:8080 in your browser to see if the server is actually working or not.

Caution: http.server can serve all the files under the directory you are currently in. Therefore, always create a dedicated directory for the website and start the server after switching to it.

Step 3: Start the Tunnel

Now open a second terminal and run the following command:

cloudflared tunnel --url http://localhost:8080

It may take a few seconds to process this command. And finally, you will see an output something like this.

INF Requesting new quick Tunnel on trycloudflare.com...
INF +--------------------------------------------------------------------------------------------+
INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
INF |  https://random-words-url.trycloudflare.com                                               |
INF +--------------------------------------------------------------------------------------------+

Step 4: Test and Share the URL

Grab the URL from the command output. First, open it in any browser to see if it's working or not. Once satisfied, you can share it with your client or teammate.

Step 5: Shut Down the Tunnel

And when you are done sharing, press the Ctrl + C key combination in the terminal where the tunnel is running to stop it.

Real-world Examples of Popular Frameworks and Applications

Now let's see how we can use Quick Tunnels with popular frameworks and applications. The only thing that changes is the port number in the basic command. And a few settings that are framework-specific.

React or Vue Application with Vite

First of all, open the vite.config.js file and add the following rule to make sure the incoming requests from the Quick Tunnels hostname are not rejected.

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    allowedHosts: ['.trycloudflare.com'],
  },
})

Then, start the development server.

npm run dev

Now open the second terminal and execute the following command.

cloudflared tunnel --url http://localhost:5173

Grab the public HTTP URL from the output of the command given above, and share it with your client.

A Django Web Application

Django too refuses incoming requests from the hosts it doesn't recognize. To combat that, add the following two lines to the settings.py file.

ALLOWED_HOSTS = ["localhost", "127.0.0.1", ".trycloudflare.com"]
CSRF_TRUSTED_ORIGINS = ["https://*.trycloudflare.com"]

If you omit the second line in the local testing environment, form submissions in the web app may fail. So make sure both of these lines are included in the config file.

A Flask app

If you want to share a Flask app, make sure you first turn off the debug mode and thereafter use the following two commands.

flask run --port 5000
cloudflared tunnel --url http://localhost:5000

Once the sharing URL is no longer required, you can close the tunnel and turn on the debug mode.

A Locally-hosted WordPress Site

Now this one is important. Thousands and thousands of WordPress developers around the globe want to share their locally developed website with their clients.

To do that, open the wp-config.php file and add the following lines in it just after the line that says "That's all, stop editing".

$host = $_SERVER['HTTP_HOST'] ?? '';

if ( preg_match( '/^[a-z0-9-]+\.trycloudflare\.com$/', $host ) ) {
    define( 'WP_HOME',    'https://' . $host );
    define( 'WP_SITEURL', 'https://' . $host );
    $_SERVER['HTTPS'] = 'on';
}

If your local website uses a custom hostname, use the cloudflared command as follows:

cloudflared tunnel --url http://localhost:80 --http-host-header localsite.test

Here, localsite.test is the custom hostname of the locally hosted WordPress-powered website.

Conclusion

Cloudflare provides a handy tool called Quick Tunnels to easily share your website on the internet. With a single command, you get an HTTP public URL that you can easily share with others.

However, there are a few shortcomings and limitations when you are using this method. It is good enough for generally sharing your website with your potential clients and peers.

Image Credit: All screenshots and image alterations by Rajeev Edmonds/FreshTechTips