Setup remote dev environment for Vue

I’ve been learning JavaScript (beginner level), and just started learning Vue framework.

In this post, I setup a dev environment for Vue in my homelab Ubuntu server. I remotely access source files and the dev server from two laptops (chromebook and macbook) via Emacs over Tramp and ssh tunneling respectively.

First, (take a snapshot of the Ubuntu VM and) update Ubuntu of the homelab server.

sudo apt update
sudo apt upgrade

Install node.js

node.js has the dev environment for js, incl. compiler and dev server.

sudo apt install  ca-certificates curl gnupg
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install  nodejs

To verify:

node -v
v20.20.0

Install pnpm

I decided to use pnpm in place of npm as it seems to be faster and better. corepack is a package maneger-manager included in node.js.

sudo corepack enable
sudo corepack prepare pnpm@latest --activate
pnpm -v

! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-10.30.1.tgz
? Do you want to continue? [Y/n]

10.30.1

Create Vue project

Prep is done and I’m ready to create a Vue project.

pnpm create vue@latest my-app
cd my-app
pnpm install

Run the dev server

pnpm run dev -- --host 127.0.0.1 --port 5173

If I go to localhost:5173 from the browser on the homelab server, I should be able to see the web page. But as this is for remote development, let’s move on to the next step.

Access from remote via ssh tunneling

Configure ssh tunneling from laptop to the homelab server. On laptop:

ssh -L 5173:localhost:5173 act

Then, open in the browser on the laptop: localhost:5173. It showed:

You did it!
Visit vuejs.org to read the documentation

Great! ssh tunneling looks to be working as expected.