Current Port In Use

A Next.js component and API route to automatically detect and update environment variables with the current port.

Project Structure

current-port-in-use/
├── src/
│   ├── components/
│   │   └── CurrentPortInUse.tsx    # The main React component
│   ├── api/
│   │   └── updateEnvHandler.ts     # The API route handler
│   └── index.ts                    # Main entry point
├── package.json                    # Package configuration
├── tsconfig.json                   # TypeScript configuration
└── README.md                       # Documentation

Installation

1. Install the package:

bun add current-port-in-use

2. Run the setup command to automatically create the API route:

bunx setup-port-detector

That's it! The API route will be automatically created at pages/api/update-env.ts.

Usage

Just import and use the component in your page:

import { CurrentPortInUse } from '@sebababi/current-port-in-use';

export default function Home() {
  return (
    <div>
      <CurrentPortInUse 
        // Optional props:
        apiEndpoint="/api/update-env"
        onPortDetected={(port) => console.log('Port detected:', port)}
        onEnvUpdated={(vars) => console.log('Env vars:', vars)}
      />
    </div>
  );
}

Features

• 🔍 Automatically detects the current port your Next.js app is running on
• ✏️ Updates all localhost URLs in your .env.local file to use the detected port
• 🔒 Preserves all other environment variables and comments
• 🎨 Customizable styling with className and style props
• 🎯 TypeScript support
• 🪝 Event callbacks for port detection and env updates

Props

CurrentPortInUse Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiEndpoint | string | '/api/update-env' | Custom API endpoint path | | className | string | '' | Additional CSS classes | | style | object | {} | Custom inline styles | | onPortDetected | function | undefined | Callback when port is detected | | onEnvUpdated | function | undefined | Callback when env vars are updated |

createUpdateEnvHandler Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | envPath | string | process.cwd()/.env.local | Custom path to .env.local file |

License

MIT