NasNetConnect

Enterprise-Grade MikroTik Router Management Platform

A modern, powerful web interface for managing MikroTik RouterOS devices.
Built with React + Go, deployable anywhere — including directly on your MikroTik router.

Features • Quick Start • Docker • RouterOS Install • API Docs • Contributing

---

✨ Features

📊 Real-time Dashboard Live system metrics, CPU/memory usage, traffic monitoring, and interface status at a glance. 🌐 Network Management Complete interface configuration, ARP tables, IP addressing, routing, and DHCP management. 🔐 VPN Control Center Full management of IPsec, L2TP, PPTP, WireGuard, OpenVPN, and SSTP tunnels with client monitoring. 📡 Wireless Management WiFi interface control, security profiles, connected clients, and signal monitoring.

🛡️ Firewall Configuration Filter rules, NAT configuration, mangle rules, and connection tracking with visual rule editor. 🔍 Router Discovery Network scanning to auto-detect MikroTik devices across subnets with service identification. ⚡ Batch Operations Execute bulk commands with progress tracking, dry-run mode, and automatic rollback on failure. 🔌 Multi-Protocol Support Connect via REST API, RouterOS API (8728/8729), SSH, or Telnet with automatic fallback.

---

🚀 Quick Start

Option 1: DevContainer (Recommended)

The fastest way to get started is using the pre-configured DevContainer. It includes all dependencies and tools ready to go.

Requirements: Docker Desktop + VS Code with Dev Containers extension

# Clone the repository
git clone https://github.com/nasnet-community/nasnet-panel.git
cd nasnet-panel

# Open in VS Code
code .

# When prompted, click "Reopen in Container"
# Or: Ctrl+Shift+P → "Dev Containers: Reopen in Container"

The DevContainer automatically:

• Installs Node.js 20, Go 1.24+, and all dependencies
• Configures VS Code extensions (ESLint, Prettier, Go, GraphQL)
• Sets up Docker-in-Docker for RouterOS testing
• Starts in under 60 seconds with pre-built image

Once inside the container:

npm run dev:all    # Start frontend (5173) + backend (8080)

Troubleshooting: See .devcontainer/TROUBLESHOOTING.md for platform-specific issues.

Option 2: Manual Setup

Prerequisites

• Node.js 20+ and npm
• Go 1.24+ (for backend development)
• Git

Installation

# Clone the repository
git clone https://github.com/nasnet-community/nasnet-panel.git
cd nasnet-panel

# Install dependencies
npm install

# Start development servers
npm run dev

The application will start at http://localhost:5173 and automatically open in your browser.

Development with Backend

# Start both frontend and backend
npm run dev:all

Note: The backend (ROSProxy) runs at localhost:8080 with the frontend automatically proxying API requests.

---

📁 Project Structure

This is an Nx monorepo with strict library boundaries enforced via ESLint.

Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                         APPLICATIONS                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐ │
│  │   connect   │  │  backend   │  │   star-setup-*          │ │
│  │   (React)   │  │    (Go)     │  │   (Setup Wizards)       │ │
│  └──────┬──────┘  └─────────────┘  └─────────────────────────┘ │
├─────────┼───────────────────────────────────────────────────────┤
│         │                    LIBRARIES                           │
│  ┌──────▼──────────────────────────────────────────────────────┐│
│  │ features/  - Feature modules (dashboard, firewall, logs...)  ││
│  └──────┬───────────────────────────────────────────────────────┘│
│  ┌──────▼────────┐ ┌────────────┐ ┌──────────────┐              │
│  │     ui/       │ │ api-client/│ │   state/     │              │
│  │ (primitives,  │ │ (core,     │ │  (stores)    │              │
│  │  patterns,    │ │  queries)  │ │              │              │
│  │  layouts)     │ └─────┬──────┘ └──────┬───────┘              │
│  └───────┬───────┘       │               │                      │
│  ┌───────▼───────────────▼───────────────▼───────┐              │
│  │              core/ (types, utils, constants)   │              │
│  └───────────────────────┬───────────────────────┘              │
│  ┌───────────────────────▼───────────────────────┐              │
│  │                    shared/                     │              │
│  └───────────────────────────────────────────────┘              │
└─────────────────────────────────────────────────────────────────┘

Library Dependency Rules (per ADR-003)

Layer	Can Import From
apps/	features, ui, core, api-client, state, shared
features/	ui, core, api-client, state, shared (NOT other features)
ui/	core, shared
api-client/	core, shared
state/	core, api-client, shared
core/	shared only
shared/	nothing (base layer)

Click to expand full directory structure

nasnet/
├── apps/
│   ├── connect/              # Main React frontend (Vite)
│   │   ├── src/
│   │   │   ├── app/          # Pages, routes, providers
│   │   │   └── lib/          # App-specific utilities
│   │   └── vite.config.ts
│   ├── backend/             # Go backend (REST proxy, scanner)
│   │   ├── *.go              # API handlers, clients
│   │   └── Dockerfile        # Multi-arch container build
│   ├── star-setup-web/       # Setup wizard (web)
│   └── star-setup-docker/    # Setup wizard (container)
│
├── libs/
│   ├── api-client/
│   │   ├── core/             # Axios HTTP client, interceptors
│   │   └── queries/          # TanStack Query hooks per domain
│   ├── core/
│   │   ├── types/            # Shared TypeScript interfaces
│   │   ├── utils/            # Pure utility functions
│   │   └── constants/        # App constants
│   ├── features/             # Feature modules
│   │   ├── dashboard/        # Dashboard widgets
│   │   ├── firewall/         # Firewall rule management
│   │   ├── logs/             # System log viewer
│   │   ├── wireless/         # WiFi interface management
│   │   ├── router-discovery/ # Network scanner UI
│   │   └── configuration-import/ # Config import wizard
│   ├── state/
│   │   └── stores/           # Zustand stores (theme, connection, router)
│   └── ui/
│       ├── primitives/       # shadcn/ui base components (~40)
│       ├── patterns/         # Composite reusable components (~56)
│       └── layouts/          # Page layouts and shells
│
├── shared/                   # Cross-cutting shared code
├── .github/workflows/        # CI/CD pipelines
├── nx.json                   # Nx workspace configuration
└── package.json              # Root package with workspaces

Import Aliases

Alias	Maps To
@nasnet/core/*	libs/core/*/src
@nasnet/ui/*	libs/ui/*/src
@nasnet/features/*	libs/features/*/src
@nasnet/api-client/*	libs/api-client/*/src
@nasnet/state/*	libs/state/*/src

Code Generators

Custom Nx generators are available for scaffolding code following project conventions:

# Generate a React component with tests and barrel export
nx g @nasnet/tools:component MyComponent --project=connect

# Generate a new library with proper scope tags
nx g @nasnet/tools:library my-lib --directory=libs/features

# Generate a Go GraphQL resolver
nx g @nasnet/tools:resolver Interface

All generators support --dry-run for previewing changes. See tools/generators/README.md for full documentation.

---

🐳 Docker Deployment

Quick Run

# Pull and run (host network for router access)
docker run -d --name nasnet --network=host stargazer5361/nnc:latest

# Or with Docker Compose
docker compose up -d

Docker Compose

version: '3.8'
services:
  nasnet:
    image: stargazer5361/nnc:latest
    container_name: nasnet
    network_mode: host
    environment:
      - PORT=80
    restart: unless-stopped

Build Locally

# Build multi-arch image
npm run docker:local

# Build and export as tarball (for RouterOS)
npm run docker:export

---

📦 MikroTik RouterOS Deployment

Deploy NasNetConnect directly on your MikroTik router using RouterOS containers.

Requirements: RouterOS v7.x with Container package, external storage recommended

Step 1: Enable Container Mode

/system/device-mode/update container=yes

Confirm on device (reset button or cold reboot on x86)

Step 2: Setup Container Networking

# Create virtual interface
/interface veth add name=veth1 address=192.168.50.2/24 gateway=192.168.50.1

# Create container bridge
/interface bridge add name=containers
/ip address add address=192.168.50.1/24 interface=containers
/interface bridge port add bridge=containers interface=veth1

# Enable NAT
/ip firewall nat add chain=srcnat action=masquerade src-address=192.168.50.0/24

Step 3: Configure Registry

/container/config set registry-url=https://ghcr.io tmpdir=disk1/tmp

Step 4: Deploy Container

# Add container
/container/add remote-image=ghcr.io/nasnet-community/nasnet-panel:latest interface=veth1 \
  root-dir=disk1/images/nnc name=nnc start-on-boot=yes logging=yes

# Wait for download, then start
/container/start nnc

Access NasNetConnect at http://192.168.50.2 (or your configured veth address).

Additional RouterOS Tips

# Limit container RAM
/container/config/set memory-high=200M

# Open shell in container
/container/shell nnc

# View container logs
/container/set [find where name=nnc] logging=yes

---

📡 API Reference

ROSProxy provides a REST API for all router management operations.

Endpoint	Method	Description
/health	GET	Server health, memory, uptime
/api/router/proxy	POST	Proxy requests to RouterOS
/api/scan	POST	Start subnet scan
/api/scan/auto	POST	Auto-scan gateway addresses
/api/scan/status	GET	Get scan progress/results
/api/batch/jobs	POST	Create batch command job
/api/batch/jobs/{id}	GET	Get job status

Example: Proxy Request to Router

curl -X POST http://localhost:8080/api/router/proxy \
  -H "Content-Type: application/json" \
  -d '{
    "router_ip": "192.168.88.1",
    "endpoint": "/system/resource",
    "method": "GET",
    "headers": {
      "Authorization": "Basic YWRtaW46cGFzc3dvcmQ="
    }
  }'

Example: Batch Command Execution

curl -X POST http://localhost:8080/api/batch/jobs \
  -H "Content-Type: application/json" \
  -d '{
    "router_ip": "192.168.88.1",
    "username": "admin",
    "password": "secret",
    "protocol": "api",
    "commands": [
      "/interface bridge add name=bridge1",
      "/interface bridge port add bridge=bridge1 interface=ether2"
    ],
    "dry_run": false,
    "rollback_enabled": true
  }'

📖 Full API Documentation: apps/backend/README.md

---

🛠️ Development

Available Scripts

Script	Description
npm run dev	Start frontend dev server (Vite)
npm run dev:with-backend	Start frontend + backend
npm run build	Build production bundle
npm run ci	Run all CI checks (lint, test, build, typecheck)
npm run lint	Lint all projects
npm run typecheck	TypeScript type checking
npm run docker:local	Build Docker image locally
npm run docker:export	Export Docker image as tarball

Environment Configuration

Create apps/connect/.env.development:

VITE_API_URL=http://localhost:8080
VITE_WS_URL=ws://localhost:8080

Running Tests

# Run all tests
npx nx run-many -t test

# Run specific project tests
npx nx test connect
npx nx test backend

# E2E tests
npx nx e2e connect-e2e

---

🔧 Tech Stack

Frontend

Backend

State Management

Infrastructure

Testing

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style (Prettier + ESLint)
• Write tests for new features
• Update documentation as needed
• Use conventional commit messages

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ for the MikroTik community