Expose Development Servers

Overview

The port exposure capability allows your Utari workers to make custom development servers and applications accessible by exposing specific ports. While port 8080 is automatically exposed, you can expose additional ports for applications running on different ports, enabling you to test multiple services simultaneously or work with applications that require specific port configurations.

Port 8080 Note: Port 8080 is automatically exposed and does NOT require manual exposure. Use this tool for all other ports.

Understanding Port Exposure

What is Port Exposure?

Port exposure creates a tunnel that makes locally running applications accessible:

Local Development

Applications running in your Utari workspace on specific ports

External Access

Makes these applications accessible via public URLs

Multiple Services

Run and access multiple servers simultaneously on different ports

Testing & Debugging

Test applications in development before deployment

Default vs. Custom Ports

Port 8080 (Auto-Exposed)
Custom Ports (Require Exposure)

Automatically Available

No configuration needed
Immediately accessible
Default for most development servers

Common Uses:

Python HTTP server: python -m http.server 8080
Node.js apps configured for 8080
Default development server port

✅ Already works - no exposure tool needed

When to Expose Ports

Use Cases for Port Exposure

Framework-Specific Development Servers

Many frameworks use specific default ports:

React/Create React App: Port 3000
Next.js: Port 3000
Angular: Port 4200
Vue.js: Port 8080 (auto-exposed) or 5173 (Vite)
Flask: Port 5000
Django: Port 8000
Express.js: Configurable, often 3000
Svelte: Port 5000 or 8080

Multiple Services Running Simultaneously

When you need multiple servers running at once:

    Frontend: React on port 3000 (expose)
    Backend API: Express on port 5000 (expose)
    Database Admin: Port 5432 (expose if needed)
    Monitoring: Port 9090 (expose)

Specific Application Requirements

Some applications require specific ports:

Database interfaces and admin tools
Monitoring dashboards
Development tools (Webpack dev server, etc.)
API documentation servers
Testing frameworks

Custom Configuration

When you’ve configured your application for a specific port:

    // Server configured for port 4000
    app.listen(4000, () => {
      console.log('Server running on port 4000');
    });

Exposing Ports

Basic Port Exposure

Start Your Application

Launch your development server on the desired port:

    # React development server
    npm start  # Typically runs on port 3000
    
    # Flask application
    python app.py  # Typically runs on port 5000
    
    # Custom Node.js server
    node server.js  # Runs on configured port

Request Port Exposure

Ask your worker to expose the port:

    Please expose port 3000 so I can access my React app

Receive Access URL

Your worker provides a public URL:

    Port 3000 exposed successfully!
    Access your application at: https://[unique-url].utari.app

Access Your Application

Click the provided URL to access your running application.

Multiple Port Exposure

You can expose multiple ports simultaneously:

Start Multiple Services

    # Terminal 1: Frontend on port 3000 (non-blocking)
    npm run dev
    
    # Terminal 2: Backend on port 5000 (non-blocking)
    python api_server.py
    
    # Terminal 3: Database UI on port 8081 (non-blocking)
    npm run db-admin

Expose All Ports

    Please expose ports 3000, 5000, and 8081

Get All URLs

    Ports exposed successfully:
    - Port 3000: https://[url1].utari.app (Frontend)
    - Port 5000: https://[url2].utari.app (API)
    - Port 8081: https://[url3].utari.app (Database UI)

Common Development Server Configurations

React Applications

# Start development server
npm start

# Request exposure
"Please expose port 3000 for my React app"

# Start Vite dev server
npm run dev

# Request exposure
"Please expose port 5173 for my Vite React app"

# Configure in package.json or .env
PORT=4000 npm start

# Request exposure
"Please expose port 4000 for my React app"

Node.js/Express Applications

const express = require('express');
const app = express();
const PORT = 3000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

// Request exposure for port 3000

// Main API on 5000
apiServer.listen(5000);

// Admin panel on 5001
adminServer.listen(5001);

// Request exposure: "Expose ports 5000 and 5001"

Python Applications

# Run Flask app
python app.py
# or
flask run

# Request exposure
"Please expose port 5000 for my Flask app"

# Run Django development server
python manage.py runserver 8000

# Request exposure
"Please expose port 8000 for my Django app"

# Run on port 9000
python -m http.server 9000

# Request exposure
"Please expose port 9000"

Angular Applications

# Angular CLI dev server (Default: 4200)
ng serve

# Request exposure
"Please expose port 4200 for my Angular app"

Vue.js Applications

# Auto-exposed - no action needed
npm run serve

# Start Vite dev server
npm run dev

# Request exposure
"Please expose port 5173 for my Vue app"

Complete Development Workflow

Full-Stack Application Setup

Install Dependencies

    # Frontend dependencies
    cd frontend && npm install
    
    # Backend dependencies
    cd ../backend && pip install -r requirements.txt --break-system-packages

Start Backend (Non-Blocking)

    # Start Flask API on port 5000
    python api.py
    # Running in background

Start Frontend (Non-Blocking)

    # Start React app on port 3000
    cd frontend && npm start
    # Running in background

Expose Ports

    Please expose ports 3000 and 5000

Access Applications

    Frontend URL: https://[url1].utari.app
    Backend API: https://[url2].utari.app/api

Test Integration

Visit frontend URL
Verify API calls to backend URL work
Test application functionality

Microservices Architecture

Start All Services

    # Service 1: Authentication (port 4000)
    node services/auth/server.js &
    
    # Service 2: User Management (port 4001)
    node services/users/server.js &
    
    # Service 3: Data API (port 4002)
    node services/data/server.js &
    
    # Gateway (port 3000)
    node gateway/server.js &

Expose All Service Ports

    Please expose ports 3000, 4000, 4001, and 4002

Map Services

    Gateway: https://[url1].utari.app
    Auth Service: https://[url2].utari.app
    User Service: https://[url3].utari.app
    Data Service: https://[url4].utari.app

Port Exposure Best Practices

Use Standard Ports

Stick with framework defaults when possible for easier collaboration and documentation

Document Port Usage

Keep a list of which services run on which ports for easy reference

Avoid Conflicts

Ensure no two services try to use the same port simultaneously

Remember 8080

Use port 8080 when possible since it’s auto-exposed (one less step)

Non-Blocking Execution

Always run servers in non-blocking mode so they continue running in the background

Test After Exposure

Always verify the exposed URL works after requesting port exposure

Clean Up

Stop unused servers and unexpose ports when done to free resources

Use Environment Variables

Configure ports via environment variables for flexibility

Common Port Reference

Web Frameworks
Backend Frameworks
Development Tools
Databases & Services

Framework	Default Port	Exposure Needed
React (CRA)	3000	✅ Yes
Next.js	3000	✅ Yes
Angular	4200	✅ Yes
Vue (CLI)	8080	❌ No (auto)
Vite	5173	✅ Yes
Svelte	5000/8080	5000: ✅ Yes
Nuxt.js	3000	✅ Yes

Framework	Default Port	Exposure Needed
Express.js	3000 (common)	✅ Yes
Flask	5000	✅ Yes
Django	8000	✅ Yes
FastAPI	8000	✅ Yes
Ruby on Rails	3000	✅ Yes
Spring Boot	8080	❌ No (auto)
Laravel	8000	✅ Yes

Tool	Default Port	Exposure Needed
Webpack Dev Server	8080	❌ No (auto)
Jupyter Notebook	8888	✅ Yes
Storybook	6006	✅ Yes
Grafana	3000	✅ Yes
phpMyAdmin	8080	❌ No (auto)
Adminer	8080	❌ No (auto)

Service	Default Port	Exposure Needed
PostgreSQL	5432	✅ Yes (if UI)
MySQL	3306	✅ Yes (if UI)
MongoDB	27017	✅ Yes (if UI)
Redis	6379	✅ Yes (if UI)
Elasticsearch	9200	✅ Yes

Troubleshooting

Port exposure requested but URL not working

Verify:

Server is actually running on that port
Check server logs for startup errors
Use netstat -tuln | grep [PORT] to confirm port is listening
Ensure no firewall blocking
Try restarting the server
Re-request port exposure

Port already in use error

Solutions:

Check what’s using the port: lsof -i :[PORT]
Stop the existing process
Or use a different port
Kill stuck processes: kill -9 [PID]
Restart with new port number

Can't access exposed port from browser

Check:

URL copied correctly (no typos)
Server started successfully
No CORS issues (check browser console)
Server bound to 0.0.0.0 not localhost
Try accessing from incognito/private window

Multiple ports needed but only one working

Ensure:

All servers started successfully
All ports explicitly exposed
No port conflicts
Check each service individually
Verify each exposed URL

Server running but shows connection refused

Check that server is bound to all interfaces:❌ Wrong (localhost only):

    app.listen(3000, 'localhost')

✅ Correct (all interfaces):

    app.listen(3000, '0.0.0.0')
    // or simply
    app.listen(3000)

Exposed URL returns 404

Verify:

Server is running (check with list_commands)
Correct route/path being accessed
Server has proper route handlers
No typos in URL path
Check server logs for requests

Environment-Specific Configuration

Using Environment Variables

# .env file
PORT=3000
API_PORT=5000
DB_PORT=5432

# Start app (reads from .env)
npm start

// server.js
const PORT = process.env.PORT || 3000;

app.listen(PORT, '0.0.0.0', () => {
  console.log(`Server on port ${PORT}`);
});

# app.py
import os

port = int(os.environ.get('PORT', 5000))

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=port)

Package.json Scripts

{
  "scripts": {
    "dev": "PORT=3000 react-scripts start",
    "dev:custom": "PORT=4000 react-scripts start",
    "api": "PORT=5000 node server.js",
    "start:all": "concurrently \"npm run dev\" \"npm run api\""
  }
}

Advanced Usage

Proxy Configuration

When frontend needs to communicate with backend on different port:

{
  "proxy": "http://localhost:5000"
}

export default {
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
}

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:5000/api/:path*'
      }
    ]
  }
}

Docker Compose with Port Mapping

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"  # Expose 3000
  
  backend:
    build: ./backend
    ports:
      - "5000:5000"  # Expose 5000
  
  database:
    image: postgres
    ports:
      - "5432:5432"  # Expose 5432 if UI needed

Summary

You’ve successfully learned:

How port exposure works in Utari

When to use port exposure (all ports except 8080)

How to expose single and multiple ports

Common framework default ports and configurations

Best practices for development server management

Troubleshooting port exposure issues

Advanced configurations for multi-service applications

Port exposure enables your development workflow in Utari, allowing you to run and access multiple development servers, test full-stack applications, and work with framework-specific tooling—all through simple conversational requests.

Next Steps

Terminal Commands

Learn to start and manage development servers

Files and Folder

Organize your application code and assets

Web Browser

Test your exposed applications visually

Triggers

Automate server startup and port exposure

​Overview

​Understanding Port Exposure

​What is Port Exposure?

Local Development

External Access

Multiple Services

Testing & Debugging

​Default vs. Custom Ports

​When to Expose Ports

​Use Cases for Port Exposure

​Exposing Ports

​Basic Port Exposure

​Multiple Port Exposure

​Common Development Server Configurations

​React Applications

​Node.js/Express Applications

​Python Applications

​Angular Applications

​Vue.js Applications

​Complete Development Workflow

​Full-Stack Application Setup

​Microservices Architecture

​Port Exposure Best Practices

Use Standard Ports

Document Port Usage

Avoid Conflicts

Remember 8080

Non-Blocking Execution

Test After Exposure

Clean Up

Use Environment Variables

​Common Port Reference

​Troubleshooting

​Environment-Specific Configuration

​Using Environment Variables

​Package.json Scripts

​Advanced Usage

​Proxy Configuration

​Docker Compose with Port Mapping

​Summary

​Next Steps

Terminal Commands

Files and Folder

Web Browser

Triggers

Overview

Understanding Port Exposure

What is Port Exposure?

Default vs. Custom Ports

When to Expose Ports

Use Cases for Port Exposure

Exposing Ports

Basic Port Exposure

Multiple Port Exposure

Common Development Server Configurations

React Applications

Node.js/Express Applications

Python Applications

Angular Applications

Vue.js Applications

Complete Development Workflow

Full-Stack Application Setup

Microservices Architecture

Port Exposure Best Practices

Common Port Reference

Troubleshooting

Environment-Specific Configuration

Using Environment Variables

Package.json Scripts

Advanced Usage

Proxy Configuration

Docker Compose with Port Mapping

Summary

Next Steps