Quasar CLI with Vite - @quasar/app-vite v3

Opening Your Dev Server to the Public

At some point you may want to show someone else the project you’ve been working on. Fortunately, there are a couple of good tools to accomplish this, localhost.run and Ngrok. Both create a tunnel to your dev server and (by default) auto-generate an internet address on their respective servers to offer to your clients or anyone special you’d like to show your work to.

WARNING

Opening your dev server to the public poses security risks. Be absolutely cautious when using tools like this.

The Quasar development server is not a hardened production server and does not add authentication. A tunnel can expose development-only routes, source maps, error details, and anything reachable through devServer.proxy. Never place secrets in client-exposed environment variables, and do not tunnel a project connected to sensitive development or production data.

Prefer a tunnel with access controls, share its URL only with intended recipients, and stop both the tunnel and development server as soon as testing is finished.

Allowing the tunnel’s hostname

Out of the box, the dev server only answers requests whose Host header is localhost, a subdomain of .localhost, or an IP address. A tunnel serves your app under its own hostname (something like b8ootd-ip-157-211-195-182.tunnelmole.com), so your visitors would otherwise be greeted by:

Blocked request. This host ("b8ootd-ip-157-211-195-182.tunnelmole.com") is not allowed.

Add the hostname that your tunnel handed you to quasar.config > devServer > allowedHosts (the devServer section is the Vite server config):

devServer: {
  allowedHosts: ['b8ootd-ip-157-211-195-182.tunnelmole.com']
}

A running quasar dev picks up quasar.config changes on its own, so there is no need to restart it by hand.

Most tunnels hand out a fresh subdomain on each run. Should you not want to edit quasar.config every time, a leading dot allows a domain together with all of its subdomains:

devServer: {
  // allows any subdomain of the tunneling service
  allowedHosts: ['.tunnelmole.com']
}

WARNING

Treat this as a temporary change and remove the entry once you are done, especially before committing.

Never use allowedHosts: true (which accepts any Host header) as a shortcut: it opens your dev server to DNS rebinding attacks, where a website that some other tab of your browser visits can reach your app and read whatever it serves.

Using Tunnelmole

Tunnelmole will work on any machine with Node.js 16+ installed and has no non-JavaScript dependencies.

First, install tunnelmole package globally:

PNPM

Yarn

NPM

Bun

pnpm add -g tunnelmole

Then, assuming you are running quasar on port 80, run the following:

tmole 80

If your port is different to 80, change 80 to your port.

Here’s the full command with output:

$ tmole 80
http://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
https://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80

If you are self hosting your own Tunnelmole service or you have a set an API key for the official service, you can run the following to use a custom subdomain (again, replace 80 with your port if it is different).

tmole 80 as mysubdomain.tunnelmole.com

It is also possible to launch Tunnelmole from code after adding it as a development dependency with your project’s package manager.

First import tunnelmole. Both ES and CommonJS modules are supported.

Importing tunnelmole as an ES module

// import as ESM:
import { tunnelmole } from 'tunnelmole'

// or import as CommonJS module:
const tunnelmole = require('tunnelmole/cjs')

Once the module is imported you can start tunnelmole with the code below, changing port 80 to the port your application listens on if it is different.

const url = await tunnelmole({
  port: 80
  // Optionally, add "domain: 'mysubdomain.tunnelmole.com'" if using a custom subdomain
})
// url = https://idsq6j-ip-157-211-195-169.tunnelmole.com

Using localhost.run

Assuming you have an SSH shell, you only need issue the following command (substituting your details)

ssh -R 80:localhost:8080 ssh.localhost.run
# In case your development server doesn't run on port 8080 you need to change the number to the correct port

That’s it, and you will now have a random subdomain based on your current system username assigned to you like so:

ssh -R 80:localhost:8080 ssh.localhost.run
# Connect to http://fakeusername-random4chars.localhost.run or https://fakeusername-random4chars.localhost.run
# Press ctrl-c to quit.

It’s not currently possible to request your own subdomain.

Using Ngrok

Download and install ngrok here. (Please note that the ngrok executable file does not need to be placed in or run from inside your cordova folder. When on a mac it’s best to place the ngrok executable file inside /usr/local/bin to be able to run it globally.)
Start your Dev server: quasar dev
Create your ngrok connection

ngrok http 8080
# In case your development server doesn't run on port 8080 you need to change the number to the correct port

ngrok shows the url in the command line when it started.

Tunnel Status                 online
Version                       2.0/2.0
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://92832de0.ngrok.io -> localhost:8080
Forwarding                    https://92832de0.ngrok.io -> localhost:8080

Connections                  ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Please be careful as the ‘Forwarding’ URL will be accessible to anyone until this connection is closed again.

Inspecting traffic

When running ngrok, visit http://localhost:4040 to inspect the traffic.

This tool allows for custom domains, password protection and a lot more. If you require further assistance, please refer to the ngrok docs for more information.

Caught a mistake?Edit this page in browser