Creating and Running Angular Projects in ServBay

Overview

This document provides a step-by-step guide to creating, configuring, and running an Angular project within the ServBay local web development environment. Leveraging ServBay's robust Node.js support and flexible site (formerly known as "host") management features, you can easily set up both development and production environments and enable secure access via custom domains and SSL certificates. ServBay seamlessly integrates multiple essential packages (formerly "services") such as Node.js, PHP, Python, Go, Java, databases, and more, making it an ideal solution for full-stack local development.

What is Angular?

Angular is a powerful, open-source frontend framework maintained by Google, designed for building high-performance, dynamic single-page applications (SPAs). Built with TypeScript, it offers a comprehensive toolset and structured development approach—perfect for building large-scale, complex enterprise applications.

Key Features and Benefits of Angular

• Component-based architecture: Build user interfaces using reusable components, enhancing code maintainability and scalability.
• TypeScript support: Offers static type checking and advanced object-oriented features, improving code quality and development efficiency.
• Dependency injection: Simplifies testing and managing dependencies within components.
• Powerful CLI (Command-Line Interface): Streamlines project creation, generating components, services, modules, as well as common tasks like building and testing.
• Built-in solutions: Provides modules for routing, form handling, HTTP client, and other common features.
• Performance optimization: Supports AOT (Ahead-of-Time) compilation, tree-shaking, and other technologies for optimized performance.

With Angular and ServBay's stable environment, developers can focus on business logic and application features.

Prerequisites

Before you begin, make sure the following steps have been completed:

1. Install ServBay: ServBay is successfully installed and running on your system (supports macOS and Windows).
2. Enable the Node.js package: Within the ServBay control panel, ensure that the required Node.js version package is installed and activated. ServBay allows you to install multiple Node.js versions and switch between them easily.

Setting Up and Running an Angular Project with ServBay

We'll use ServBay's Node.js environment to create and run an Angular project. In development mode, we'll configure reverse proxy via ServBay's site feature to point traffic to the Angular development server; in production mode, we'll build the project and use ServBay for static file hosting.

1. Creating an Angular Project

First, use the Angular CLI to create a new project.

1. Install Angular CLI: Open your terminal and use ServBay's Node.js environment to globally install Angular CLI. If ServBay's Node.js environment isn't automatically added to your system PATH, you may need to switch to ServBay's Node.js environment first. Normally, ServBay handles PATH automatically.

   npm install -g @angular/cli

   This will install the ng command globally so you can use Angular CLI from anywhere.

2. Create a new Angular project: Change to ServBay's recommended site root directory and create a new Angular project using the ng new command. We suggest naming your project with a ServBay identifier, such as servbay-angular-app.

   macOS:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   The Angular CLI will prompt you for some project setup options. Enter your preferences as below:

   ? Would you like to add Angular routing? Yes  # Enable routing support, recommended to choose Yes
   ? Which stylesheet format would you like to use? CSS # Select stylesheet format, e.g., CSS

   Once the command finishes, Angular CLI will create a new folder named servbay-angular-app under the site root directory, containing your project files and structure:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. Install project dependencies: Enter the new project directory and install the required local dependencies.

   cd servbay-angular-app
   npm install

   The npm install command reads the dependencies listed in your project's package.json and installs them into the node_modules folder.

2. Editing Project Output (Optional)

To confirm the project runs successfully, let's make a quick edit to the homepage display.

1. Edit src/app/app.component.html: Open the servbay-angular-app/src/app/app.component.html file in your preferred code editor. Remove or modify its contents to show a simple heading, such as "Hello ServBay!"

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>This is your Angular app running via ServBay!</p>
   </div>

3. Running the Project in Development Mode

During development, you'll typically use the Angular CLI's development server (ng serve). This server offers hot reloading and convenient live debugging. You can set up ServBay's reverse proxy feature to access the development server via a local domain name.

1. Start the Angular development server: From the project root, start the development server using the following command. Specify a port—such as 8585—to avoid conflicts with ServBay's default web server ports.

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   This starts a local web server at http://localhost:8585/ and compiles your Angular project for development. Keep the terminal window open so the server continues running.

2. Configure ServBay site (Reverse Proxy): Open the ServBay control panel and go to the “Site” (formerly “Host”) settings. Add a new site configuration. Use reverse proxy to route a local domain name to the Angular development server.

   • Name: For example, My Angular Dev Site (this is for ServBay display only)
   • Domain: We recommend a branded test domain, e.g. servbay-angular-dev.servbay.demo. ServBay resolves .servbay.demo domains to local 127.0.0.1 automatically.
   • Site Type: Select Reverse Proxy.
   • Proxy Address: Enter 127.0.0.1.
   • Proxy Port: Enter the port number you specified in ng serve, e.g., 8585.

   Save and apply the changes in ServBay.

3. Access the development site: Open your browser and visit your configured local domain https://servbay-angular-dev.servbay.demo.

   Since you are accessing via ServBay and ServBay by default provides local SSL certificates (via ServBay User CA or ServBay Public CA), you can visit your development site securely over HTTPS. This simulates production HTTPS access and helps you catch potential issues early.

4. Building and Running the Production Version

After finishing development and preparing to deploy, you'll build an optimized production version that generates static files. You can then host these files using ServBay's static website feature.

1. Build the production version: In the project root directory, build a production-ready version using the following command:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Or with newer Angular CLI:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # Or with newer Angular CLI:
   # ng build

   The --prod flag (default for newer CLI versions) enables production optimizations like AOT compilation, code minification, and tree-shaking. After building, the static files are output to dist/servbay-angular-app in your project directory (the final folder name typically matches your project name).

2. Configure ServBay site (Static File Hosting): Open the ServBay control panel and go to the "Site" settings. Add a new site configuration, using a local domain name and pointing to your build output directory.

   • Name: For example, My Angular Production Site

   • Domain: Use another ServBay-branded test domain, such as servbay-angular-prod.servbay.demo.

   • Site Type: Select Static.

   • Site Root Directory: Navigate to your built output folder. In most cases, that's:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Make sure you select the directory containing the index.html file.

   Save and apply your changes in ServBay.

3. Access the production site: Launch your browser and visit your configured domain, e.g. https://servbay-angular-prod.servbay.demo.

   You are now viewing the production build of your Angular project, served as static files by ServBay's high-performance web server (such as Caddy or Nginx, depending on your ServBay setup). ServBay automatically configures SSL certificates so all access is secure.

Advantages of ServBay for Angular Development

• Integrated environment: Easily install and manage multiple Node.js versions without manual environment variable configuration.
• Flexible site management: Switch between development (reverse proxy) and production (static hosting) environments using an intuitive UI.
• Built-in SSL support: Easily obtain and configure free SSL certificates for local development to simulate real-world HTTPS and prevent mixed content warnings.
• Multi-stack support: If your project involves backend APIs (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, etc.) or databases (MySQL, PostgreSQL, MongoDB, Redis), ServBay integrates these services too—offering a complete local full-stack development stack. All packages are actively maintained, and previously unsupported features are now fully integrated.
• Data backup and recovery: ServBay provides convenient backup solutions for configurations, sites, databases, and SSL certificates to protect your local development data.
• Database password reset: Quickly reset root passwords for MySQL, MariaDB, and PostgreSQL, solving a common development pain point.

Frequently Asked Questions (FAQ)

• Q: I get command not found: ng when running ng new or ng serve. What should I do? A: This means that Angular CLI is either not installed or not included in your system PATH. Ensure you've installed @angular/cli globally (npm install -g @angular/cli), and that ServBay's Node.js environment is properly configured in PATH. Try restarting your terminal or ServBay.
• Q: ng serve fails to start and says the port is already in use—what now? A: The port you tried (e.g., 8585) is occupied by another process. Use the --port option in ng serve to specify an unused port, e.g., ng serve --port 8586, and update the ServBay site reverse proxy configuration accordingly.
• Q: My ServBay site is configured, but accessing the domain fails to load the page—why? A: Check the following:
  • Make sure ServBay is running.
  • For development mode, confirm your ng serve command is running and the port matches your ServBay reverse proxy setting.
  • For production, verify your ServBay site’s “Root Directory” points to the correct build folder containing index.html (dist/your-project-name).
  • Check ServBay's log files for more detailed error information.
  • Double-check that the domain you’re visiting matches the ServBay site configuration.
• Q: Can I use different web servers (Caddy/Nginx/Apache) in ServBay to host the Angular production build? A: Absolutely—ServBay lets you serve static files using Caddy, Nginx, or Apache. When configuring a static site, ServBay will automatically use your currently enabled web server to host the files. All are efficient choices for serving static sites.

Conclusion

By following this guide, you should be able to successfully create and run an Angular project within ServBay. You’ve learned how to use ServBay’s reverse proxy feature to access development servers via local domains, how to build and host a production-ready version using ServBay’s static file hosting, and how ServBay’s integrated Node.js, user-friendly site management, and built-in SSL support can significantly enhance your local Angular development experience. ServBay’s comprehensive tech-stack integration also provides a solid foundation for full-stack development workflows.