Hosting a Vue.js App Without a Server Using Pinggy

#pinggy #webdev #vue #javascript

Ensuring that your Vue.js application is accessible on the internet can sometimes be challenging, particularly when server setup and configuration are not your areas of expertise. Vue.js, as a progressive JavaScript framework, streamlines the development of interactive user interfaces and single-page applications, making it a valuable tool for personal projects, team collaboration, or testing on various devices. However, securely hosting such applications often requires additional technical effort.

Pinggy makes this process effortless. It allows you to host your locally running Vue.js app on the web without server setups or complex configurations. Simple, secure, and seamless, Pinggy is an excellent alternative to tools like Ngrok.

This guide provides a straightforward approach to hosting a Vue.js application using Pinggy, enabling seamless sharing and collaboration on projects.

Summary:
1. Run Your Vue.js App

Create and start your Vue.js app with:

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

2. Create a Tunnel with Pinggy

Use Pinggy to create a secure tunnel:

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

Access your app using the public URL provided by Pinggy.

What is Vue.js?
Vue.js is a versatile JavaScript framework for building user interfaces. From single-page applications to advanced web apps, Vue.js offers a robust ecosystem suitable for both beginners and experienced developers.

What is Pinggy?
Pinggy is a secure tunneling solution designed to expose local web apps, APIs, and services to the internet without requiring server setups.

Key Features of Pinggy:

Ease of Use: Simple commands for setup.
Secure Tunnels: Encrypted data transmission using SSH.
Customization: Add custom domains or password protection.

Prerequisites
To get started, you'll need:

Node.js and npm installed.
Vue CLI installed:
```
npm install -g @vue/cli 
```
A Pinggy account (optional for advanced features).
Familiarity with terminal commands.

Step 1: Run Your Vue.js App Locally
Set up and run your Vue.js app on your local machine:

Create a Vue.js app:
```
npx @vue/cli create my-vue-app
```
Navigate to the project folder:
```
cd my-vue-app
```
Run the development server:
```
npm run serve  
```

By default, your app will be available at http://localhost:8080.

Step 2: Create a Tunnel with Pinggy
Expose your app using Pinggy by running the following command:

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

Command Breakdown:

ssh -p 443: Establishes a secure connection via Pinggy's server.
-R 0:localhost:8080: Maps your local app (port 8080) to a public URL.
The qr command generates a QR code for easy access on other devices.
Pinggy will provide a public URL, such as: http://example.pinggy.link/ https://example.pinggy.link

Access your app live using this URL!

Resolving HTTPS WebSocket Issues with Pinggy
If WebSocket issues arise with Pinggy’s HTTPS URL:

Install serve:
```
npm install -g serve
```
Build your app:
```
npm run build  
```
Serve your app:
```
serve -s dist
```

Use Pinggy with port 3000:

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

Customize Your Pinggy Tunnel:
Enhance your tunnel with:

Custom Domains: Use a personalized domain instead of the default Pinggy URL.
Password Protection: Secure your app with authentication. For detailed instructions, refer to Pinggy’sdocumentation.

Benefits of Hosting Vue.js Apps with Pinggy:

Quick Setup: No server configurations are required.
Secure Access: Encrypted tunnels in seconds.
Ideal for Testing & Demos: Share projects effortlessly.

Troubleshooting Tips:

Port Conflicts: Ensure the specified port matches your app’s running port (default: 8080).
Firewall Restrictions: Disable firewalls temporarily if they block SSH connections.
Command Not Found: Ensure SSH is installed on your system.

Conclusion:
Pinggy offers a simple, secure way to host your Vue.js app online. Whether sharing with clients or testing on multiple devices, Pinggy simplifies the process, letting you focus on building great applications.

Top comments (3)

Quickly Way • Jan 29

Hi there!
Really insightful article!
I’d recommend testing out my tool for analyzing dev.to posts. You can find it here: dev-to-rater. I think it could really help your content reach an even larger audience.
Let me know your feedback :)