Customizing Development Server: Setting Host and Port for ng serve in Angular

• ng serve is a command in the Angular CLI that's used for development purposes.
• It performs two key actions:
  1. Building: It builds your Angular application, preparing the necessary files for the browser to understand and run.
  2. Serving: It starts a local development server that hosts your built application. This server listens for requests from your browser and delivers the application files.

Default Behavior:

• By default, ng serve listens on port 4200 and only allows connections from the localhost host. This means your application would be accessible at http://localhost:4200/.

Reasons for Customization:

• You might want to change the default settings for various reasons:
  • Running Multiple Applications: If you have multiple Angular projects running on your machine, you'll need to use different ports to avoid conflicts.
  • Specific Port Requirements: You might have a preference for using a certain port number or a requirement dictated by your development environment.
  • Security Concerns: In some development setups, allowing connections from any host (0.0.0.0) might be necessary for testing purposes, but it's generally recommended to restrict access for production environments.

Configuration Options:

There are two main approaches to set default host and port for ng serve:

1. Command-Line Flags:

   • ng serve accepts the following flags for customization:
     • --port: Sets the port number (e.g., ng serve --port=8080).
     • --host: Sets the host name or IP address (e.g., ng serve --host=0.0.0.0).
   • This approach is convenient for one-time usage or temporary changes.

2. angular.json Configuration File:

Choosing the Right Approach:

• Use command-line flags for temporary changes or on-the-fly adjustments.
• Use angular.json for permanent defaults across development sessions.

Important Considerations:

• Remember that changes in angular.json require restarting the development server (ng serve) for the new configuration to take effect.
• Be cautious when setting the host to 0.0.0.0 as it allows connections from any machine on your network. This can be a security risk in production environments.

# Run ng serve with a custom port (8080)
ng serve --port=8080

# Run ng serve and allow connections from any host (for development only)
ng serve --host=0.0.0.0

Step 1: Locate the angular.json file in your Angular project's root directory.

Step 2: Edit angular.json with a text editor. Find the serve section within the architect property for your project (refer to the explanation in the previous response for the general structure).

Step 3: Modify the options section to include the desired port and/or host properties:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "port": 8080,  // Your desired port number
    "host": "0.0.0.0" // Allow connections from any host (for development only)
  },
  "configurations": {
    "production": {
      "browserTarget": "your-project-name:build:production"
    }
  }
}

Remember:

• Replace "your-project-name" with the actual name of your Angular project.

• You can define environment variables for the host and port and use them within angular.json or on the command line. This allows you to manage configuration values outside your codebase.

Example with angular.json:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "port": process.env.DEV_PORT || 8080,  // Use environment variable or default to 8080
    "host": process.env.DEV_HOST || "localhost"  // Use environment variable or default to localhost
  },
  "configurations": {
    "production": {
      "browserTarget": "your-project-name:build:production"
    }
  }
}

• Windows: Set system environment variables or use a tool like .env files.
• Linux/macOS: Set environment variables in your terminal session or create a .env file.

Custom Script:

• Create a script (e.g., Bash script, batch file) that sets the environment variables and then runs ng serve. This can be useful for automating the process.

Example (Bash script):

#!/bin/bash

export DEV_PORT=8080
export DEV_HOST=0.0.0.0

ng serve

Third-Party Tools:

• Some third-party tools manage development server configuration for Angular projects. These tools might offer additional features for managing host and port settings. However, they introduce external dependencies and might require additional setup.

• For simple configuration with occasional overrides, command-line flags are convenient.
• For persistent project-specific defaults, modifying angular.json is ideal.
• For managing configuration across environments or complex workflows, environment variables or custom scripts can be helpful.
• Third-party tools should be evaluated based on specific project needs and complexity.