Untuk Development Nuxt Apps via link:

https://dev.sample.site

Goal:

  • akses Nuxt dari HP

  • HTTPS otomatis

  • support PWA

  • tanpa port forwarding

  • tanpa expose IP rumah

Architecture

HP/Desktop
     ↓
Cloudflare
     ↓
Tunnel
     ↓
WSL localhost:3000

Requirements

Sudah punya:

✅ domain di Cloudflare
✅ WSL Ubuntu
✅ Nuxt app running
✅ cloudflared installed

STEP 1 — Install cloudflared

Ubuntu / WSL

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb

sudo dpkg -i cloudflared-linux-amd64.deb

Verify

cloudflared --version

STEP 2 — Login Cloudflare

cloudflared tunnel login

Browser akan terbuka.

Pilih:

  • domain:

sample.site

  • authorize

Result

Cloudflare membuat:

~/.cloudflared/cert.pem

STEP 3 — Create Tunnel

cloudflared tunnel create craftr-ops

Result

Example:

Tunnel ID:
b80c1250-c50b-47ff-91c6-ad9c2000d2cc

Dan file credentials:

~/.cloudflared/b80c1250-c50b-47ff-91c6-ad9c2000d2cc.json

STEP 4 — Create DNS Route

Untuk frontend app

cloudflared tunnel route dns craftr-ops dev.sample.site

Optional — Supabase Local

cloudflared tunnel route dns craftr-ops supabase-dev.sample.site

STEP 5 — Create Config File

Buat:

~/.cloudflared/config.yml

Config Content

tunnel: b80c1250-c50b-47ff-91c6-ad9c2000d2cc
credentials-file: /home/tuys/.cloudflared/b80c1250-c50b-47ff-91c6-ad9c2000d2cc.json

ingress:
  - hostname: dev.sample.site
    service: http://localhost:3000

  - hostname: supabase-dev.sample.site
    service: http://localhost:54321

  - service: http_status:404

STEP 6 — Run Nuxt

Di project:

npm run dev -- --host 0.0.0.0 --port 3000

STEP 7 — Run Tunnel

Terminal baru:

cloudflared tunnel run craftr-ops

Success Log

Kalau sukses:

INF Registered tunnel connection

STEP 8 — Open from HP

Buka:

https://dev.sample.site

Done 🎉

STEP 9 — Setup Nuxt PWA

Install:

npm install @vite-pwa/nuxt

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],

  pwa: {
    registerType: 'autoUpdate',

    manifest: {
      name: 'Craftr OPS',
      short_name: 'Craftr OPS',
      display: 'standalone',
      background_color: '#0f172a',
      theme_color: '#0f172a',

      icons: [
        {
          src: '/icon-192.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: '/icon-512.png',
          sizes: '512x512',
          type: 'image/png'
        }
      ]
    }
  }
})

STEP 10 — Install as Mobile App

Di HP:

  • buka:

https://dev.sample.site

  • Chrome menu

  • Add to Home Screen

Sekarang terasa seperti native app.

Recommended Dev Workflow

Terminal 1 — Nuxt

npm run dev -- --host 0.0.0.0

Terminal 2 — Tunnel

cloudflared tunnel run craftr-ops

Optional — Auto Alias

~/.bashrc

alias cftunnel="cloudflared tunnel run craftr-ops"

Reload:

source ~/.bashrc

Optional — Auto Start Tunnel

Install service:

sudo cloudflared service install

Recommended Setup for Craftr OPS

Frontend

Nuxt 4 PWA

Backend

Supabase Cloud

Public Access

Cloudflare Tunnel

Benefits

You Get:

✅ HTTPS
✅ mobile testing
✅ PWA support
✅ secure localhost expose
✅ no firewall config
✅ no port forwarding
✅ stable dev URL
✅ easy client preview

Perfect untuk development mobile-first app seperti Craftr OPS.