TunnelHunt + React/Vue/Angular: Полное руководство по локальной разработке

Настройка туннелей для популярных frontend фреймворков. Hot reload, CORS, production сборки и лучшие практики для React, Vue и Angular разработчиков.

Современная frontend разработка немыслима без быстрого прототипирования и демонстрации результатов. Но как показать заказчику или коллеге веб-приложение, которое работает только на вашем localhost? В этой статье мы разберем, как интегрировать TunnelHunt с тремя самыми популярными frontend фреймворками: React, Vue.js и Angular.

Почему TunnelHunt идеален для frontend разработки

TunnelHunt решает типичные проблемы локальной разработки:

Hot reload через интернет — изменения в коде мгновенно отображаются у заказчика
Решение CORS проблем — тестирование интеграций с реальными API
Простота демонстрации — один URL вместо объяснения “запустите localhost:3000”
Безопасность — HTTPS по умолчанию без дополнительных настроек

React: От Create React App до Next.js

Create React App

Самый простой способ начать:

# Создаем новый проект
npx create-react-app my-app
cd my-app
npm start

# В новом терминале создаем туннель
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru

После запуска вы получите URL вроде https://abc123.tunnelhunt.ru, который можно открыть в любом браузере.

Vite (рекомендуется для новых проектов)

Vite предлагает более быструю разработку:

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npm install
npm run dev

# Туннель (Vite использует порт 5173 по умолчанию)
ssh -R 80:localhost:5173 -p 2222 nokey@tunnelhunt.ru

Next.js

Для full-stack приложений:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

# Next.js использует порт 3000
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru

Vue.js: От Vue CLI до Vite

Vue CLI

Классический подход:

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

# Туннель
ssh -R 80:localhost:8080 -p 2222 nokey@tunnelhunt.ru

Vite + Vue

Рекомендуемый современный стек:

npm create vue@latest my-vue-vite
cd my-vue-vite
npm install
npm run dev

# Vite использует порт 5173
ssh -R 80:localhost:5173 -p 2222 nokey@tunnelhunt.ru

Nuxt.js

Для универсальных приложений:

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

# Nuxt использует порт 3000
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru

Angular: От Angular CLI до современных подходов

Angular CLI

Стандартный способ:

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve

# Туннель
ssh -R 80:localhost:4200 -p 2222 nokey@tunnelhunt.ru

Angular + Vite (новый подход)

npm create angular@latest my-angular-vite
cd my-angular-vite
npm install
npm run dev

# Vite использует порт 4200
ssh -R 80:localhost:4200 -p 2222 nokey@tunnelhunt.ru

Решение типичных проблем

CORS ошибки

При разработке часто возникают CORS проблемы. TunnelHunt решает их естественным образом:

// Вместо localhost:3000/api используйте tunnel URL
const API_BASE = process.env.NODE_ENV === 'production'
  ? '/api'
  : 'https://your-tunnel-url.tunnelhunt.ru/api'

Hot reload и WebSocket

Все современные bundler’ы поддерживают hot reload через WebSocket. TunnelHunt прозрачно проксирует эти соединения:

# React/Vue/Angular автоматически используют WebSocket
# TunnelHunt поддерживает все WebSocket соединения
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru

Production сборки

Для демонстрации production версии:

# React
npm run build
npx serve -s build -l 3000

# Vue
npm run build
npx serve dist -l 3000

# Angular
ng build --prod
npx serve dist/my-app -l 3000

# Туннель для production сборки
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru

Продвинутые техники

Множественные туннели

Для микрофронтендов или нескольких приложений:

# Приложение 1 на порту 3000
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru

# Приложение 2 на порту 3001 (в новом терминале)
ssh -R 8080:localhost:3001 -p 2222 nokey@tunnelhunt.ru

Алиасы для удобства

Добавьте в ~/.bashrc или ~/.zshrc:

# React development
alias react-tunnel='ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru'

# Vue development
alias vue-tunnel='ssh -R 80:localhost:5173 -p 2222 nokey@tunnelhunt.ru'

# Angular development
alias angular-tunnel='ssh -R 80:localhost:4200 -p 2222 nokey@tunnelhunt.ru'

Интеграция с package.json

{
  "scripts": {
    "dev": "vite",
    "dev:tunnel": "vite & sleep 2 && ssh -R 80:localhost:5173 -p 2222 nokey@tunnelhunt.ru",
    "build": "vite build",
    "preview": "vite preview",
    "preview:tunnel": "vite preview & sleep 2 && ssh -R 80:localhost:4173 -p 2222 nokey@tunnelhunt.ru"
  }
}

Лучшие практики

Используйте Pro тариф для постоянных доменов при работе с заказчиками
Настройте HTTPS — TunnelHunt предоставляет его автоматически
Тестируйте на реальных устройствах — поделитесь URL с мобильными устройствами
Документируйте URL — сохраняйте туннельные адреса для команды
Используйте переменные окружения для разных сред разработки

Заключение

TunnelHunt идеально интегрируется с современным frontend стеком, предоставляя простой и надежный способ демонстрации приложений. Независимо от того, используете ли вы React, Vue.js или Angular, процесс настройки занимает всего одну команду.

Попробуйте TunnelHunt сегодня и забудьте о проблемах с демонстрацией локальных приложений!

# Начните с любого фреймворка
ssh -R 80:localhost:3000 -p 2222 nokey@tunnelhunt.ru