Hosting a Vue.js App Without a Server

Updated on Jan 14, 2025 · 5 mins read

Vue.js Pinggy guide tunneling remote access

Hosting a Vue App Without a Server Using Pinggy

Making your Vue.js app accessible on the internet doesn’t have to be complicated. If you’re new to Vue.js, it’s a progressive JavaScript framework that makes building interactive user interfaces and single-page applications a breeze. Whether you’re working on a personal project, sharing progress with teammates, or testing your app on real devices, getting it online securely can feel like a challenge—especially if setting up servers isn’t your thing.
That’s where Pinggy comes in. With Pinggy, you can host your locally running Vue.js app on the web without any server setup or complicated steps. It’s simple, secure, and works seamlessly, just like popular tools such as Ngrok.
In this blog, we’ll show you how to use Pinggy to quickly share your Vue.js app with anyone, anywhere. Whether you’re showcasing a project or collaborating with others, Pinggy makes it easy to get your app online in no time.

Summary

Run Vue.js App

Create and start your Vue.js app:

npx @vue/cli create my-vue-app
cd my-vue-app
npm run serve

Create a Tunnel with Pinggy
- Start an SSH tunnel:
```
ssh -p 443 -R 0:localhost:8080 -t qr@a.pinggy.io "u:Host:localhost:8080"
```
- Access your Vue.js app via the public URL provided by Pinggy.

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. Known for its simplicity, versatility, and ease of integration, Vue.js powers everything from simple single-page applications (SPAs) to complex web apps. Whether you’re a beginner or a seasoned developer, Vue.js offers a robust ecosystem to enhance your productivity.

What is Pinggy?

Pinggy is a secure, developer-friendly tunneling solution that allows you to expose your local web apps, APIs, and services to the internet. It simplifies the process of sharing local projects without requiring server setups or complex configurations.

Key Features of Pinggy:

Ease of Use: No complex setup—just run a simple command.
Secure Tunnels: Uses SSH for secure data transmission.
Customization: Add custom domains or password protection.

Prerequisites

To follow along, you’ll need:

Node.js and npm installed. Get them from Node.js.
Vue CLI installed. Install it globally if you don’t have it yet:
```
npm install -g @vue/cli
```

Vue CLI installed Command 3. A Pinggy account (optional for advanced features).
4. Familiarity with terminal commands.

Step 1: Run Your Vue.js App Locally

Start by creating and running a Vue.js app on your local machine.

Commands to Set Up:

Create a Vue.js app:
```
npx @vue/cli create my-vue-app
```

Navigate to the project directory:
```
cd my-vue-app
```
Run the development server:
```
npm run serve
```

Once the server starts, your app will be accessible at http://localhost:8080 by default.

Step 2: Create a Tunnel with Pinggy

Now, let’s expose your locally hosted Vue.js app using Pinggy.

Command to Create Tunnel:

Run the following command in your terminal:

ssh -p 443 -R 0:localhost:8080 -t qr@a.pinggy.io "u:Host:localhost:8080"

Command Breakdown:

ssh -p 443: Initiates a secure connection via Pinggy’s server.
-R0:localhost:8080: Maps your Vue.js app (running on port 8080) to a public URL.
The -t option and "u:Host:localhost:8080" modifies the host header to ensure localhost:8080 requests are correctly routed to your local app.
The qr the command displays the public URL as a QR code, making it easy to access your app on other devices.
qr@a.pinggy.io u:Host:localhost:8080: Specifies the Pinggy server.

After running this command, Pinggy generates a public URL for your Vue.js app, such as:

http://example.pinggy.link  
https://example.pinggy.link

Open the provided URL in a browser to view your app live!

access vue app using public url Pinggy public url logs

Resolving HTTPS WebSocket Issues with Pinggy

If you use a public HTTPS URL provided by Pinggy, you may encounter WebSocket issues. To resolve this, follow these steps:

Install serve globally:

npm install -g serve

Build your Vue.js app:

npm run build

Serve the built app using serve:

serve -s dist

Run the Pinggy command with port 3000:

ssh -p 443 -R0:localhost:3000 qr@a.pinggy.io

By serving your built Vue.js app through the serve package and using Pinggy’s HTTPS tunnel, you can avoid WebSocket issues when accessing your app via a public HTTPS URL.

Customize Your Pinggy Tunnel

Enhance your tunnel with Pinggy’s advanced features:

Custom Domains

Replace the default Pinggy URL with a personalized domain to better align with your branding.

Refer to Pinggy’s Custom Domains documentation for detailed instructions.

Password Protection

Secure your tunnel by adding password authentication, ensuring only authorized users can access your app.

Refer to Pinggy’s Password Protection documentation for detailed instructions.

Benefits of Hosting Vue.js Apps with Pinggy

Quick Setup: Skip the hassle of traditional server configurations.
Secure Access: Establish encrypted tunnels in seconds.
Perfect for Testing & Demos: Share your work instantly with clients or collaborators.

Troubleshooting Tips

Port Conflicts: Make sure the port provided with the SSH command corresponds to the port used by Nuxt App, by default it is 3000. Mismatched ports will prevent a successful tunnel connection.
Firewall Restrictions: Some of the network firewalls prevent tunneling connections. Make certain that SSH connection is authorised and if there are any firewalls active, then get them removed for some time.
Command Not Found: Make sure SSH is installed on your machine. On macOS and Linux, SSH is pre-installed, but on Windows, you may need to install it or use tools like Git Bash.

Conclusion

Hosting your Vue.js app with Pinggy is an effortless way to make your local development projects accessible to anyone. Whether showcasing an app to clients or testing it on various devices, Pinggy provides a secure and efficient solution for developers.