Creating and Running Angular Projects in ServBay

Overview

This document provides a step-by-step guide for creating, configuring, and running an Angular project within the ServBay local web development environment. We'll make use of ServBay's robust Node.js support and flexible site management features (formerly known as "hosts") to easily set up both development and production environments, ensuring secure access via custom domains and SSL certificates. ServBay integrates a wide range of packages ("services") needed for development, including Node.js, PHP, Python, Go, Java, databases, and more, making it an ideal choice for full-stack local development.

What is Angular?

Angular is an open-source frontend framework maintained by Google, designed for building high-performance, dynamic single-page applications (SPAs). Built on TypeScript, Angular offers a comprehensive toolkit and a structured development approach, making it well-suited for creating large and complex enterprise-grade applications.

Core Features and Advantages of Angular

• Component-based architecture: Build user interfaces using reusable components for improved code maintainability and scalability.
• TypeScript support: Benefit from static type checking and powerful object-oriented features to enhance code quality and productivity.
• Dependency injection: Simplifies testing and management of component dependencies.
• Powerful CLI (Command Line Interface): Streamlines project creation, component/service/module generation, builds, testing, and other development tasks.
• Built-in solutions: Provides integrated modules for routing, forms, HTTP client, and other essential functionality.
• Performance optimization: Supports Ahead-of-Time (AOT) compilation, tree shaking, and other technologies to deliver optimized apps.

Combining Angular with ServBay's stable environment enables developers to focus on core business logic without worrying about environment setup.

Prerequisites

Before getting started, please ensure the following:

1. ServBay Installed: You have successfully installed and launched ServBay on macOS.
2. Node.js Package Enabled: In the ServBay control panel, make sure the required Node.js version is installed and enabled. ServBay allows you to install multiple Node.js versions and switch between them easily.

Setting Up and Running an Angular Project in ServBay

We’ll use ServBay’s Node.js environment to create and run an Angular project. In development mode, we'll configure a reverse proxy in ServBay to point to the Angular development server; for production mode, we'll build the project and serve its static files through ServBay.

1. Creating an Angular Project

First, let's use the Angular CLI to set up a new project.

1. Install Angular CLI: Open your terminal and use ServBay's Node.js environment to globally install the Angular CLI. If the ServBay Node.js environment is not automatically added to your system PATH, you might need to switch to it manually. Usually, ServBay handles PATH configuration for you.

   npm install -g @angular/cli

   This command installs the ng CLI tool globally for system-wide use.

2. Create a New Angular Project: Navigate to ServBay’s recommended site root at /Applications/ServBay/www and create a new Angular project using ng new. It’s recommended to give the project a ServBay-branded name, such as servbay-angular-app.

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

   Angular CLI will prompt you with some configuration questions. Choose or enter your preferences:

   ? Would you like to add Angular routing? Yes  # Add routing? Recommended: Yes
   ? Which stylesheet format would you like to use? CSS # e.g., choose CSS

   After the command completes, a new folder named servbay-angular-app will be created under /Applications/ServBay/www, containing your basic project structure and files.

3. Install Project Dependencies: Enter the newly created project directory and install its local dependencies.

   cd servbay-angular-app
   npm install

   The npm install command will read your project's package.json and install listed dependencies to the node_modules folder.

2. Modifying Angular Project Output (Optional)

To verify your project is running successfully, you can modify the project’s homepage content.

1. Edit src/app/app.component.html: Open servbay-angular-app/src/app/app.component.html with your preferred code editor. Delete or modify its content so that it just displays 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, it's common to use Angular CLI’s development server (ng serve), which supports hot reloading and is ideal for rapid debugging. We’ll then use ServBay’s reverse proxy to access this server via a local domain.

1. Start the Angular Development Server: In your project’s root directory (/Applications/ServBay/www/servbay-angular-app), run the following command. Specify a port (e.g., 8585) to avoid conflicts with ServBay's default web server ports.

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

   This compiles your Angular project and starts a web server at http://localhost:8585/. Keep this terminal window open to keep the server running.

2. Configure ServBay Site (Reverse Proxy): Open the ServBay control panel and go to the "Sites" management section. Add a new site configuration to reverse proxy a local domain to the ng serve dev server.

   • Name: For example, My Angular Dev Site (only shown within ServBay).
   • Domain: Consider using a ServBay-branded test domain, like servbay-angular-dev.servbay.demo. ServBay automatically resolves .servbay.demo domains to 127.0.0.1.
   • Website Type: Select Reverse Proxy.
   • Proxy Address: Enter 127.0.0.1.
   • Proxy Port: Enter the port you used with ng serve (e.g., 8585).

   Save and apply your configuration.

3. Access the Development Site: Open your browser and visit https://servbay-angular-dev.servbay.demo.

   Since you’re accessing through ServBay and ServBay auto-generates and configures SSL certificates for local domains (using ServBay User CA or ServBay Public CA), you can securely access your development site via HTTPS. This simulates production-grade HTTPS accessibility and helps catch potential issues early.

4. Building and Running the Production Version

After development is complete, you’ll want to build an optimized production version. This generates static files that can be served by any static server. We’ll use ServBay’s static site feature for this purpose.

1. Build the Production Version: From your project’s root directory (/Applications/ServBay/www/servbay-angular-app), run:

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

   The --prod flag (now default in recent CLI versions) enables production optimizations like AOT compilation, minification, and tree shaking. Upon completion, static files will be output to the dist/servbay-angular-app directory (the exact subdirectory may vary by project configuration, but it’s typically the project name).

2. Configure ServBay Site (Static File Serving): In the ServBay control panel, head to the "Sites" section and add a new configuration pointing a local domain to your build output.

   • Name: For example, My Angular Production Site
   • Domain: Use a different ServBay-branded test domain, like servbay-angular-prod.servbay.demo.
   • Website Type: Select Static.
   • Website Root Directory: Navigate to your build output directory—usually /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Make sure you point to the directory containing the index.html.

   Save and apply your configuration.

3. Access the Production Site: Open your browser and visit https://servbay-angular-prod.servbay.demo.

   You are now viewing your Angular production build, served by ServBay’s high-performance web server (such as Caddy or Nginx, depending on your setup) as static files. Likewise, ServBay auto-configures SSL certificates for secure access.

Advantages of Using ServBay for Angular Development

• Integrated Environment: Easily install and manage Node.js versions within ServBay, without complex manual environment variable setup.
• Flexible Site Management: Intuitively configure reverse proxy and static file serving for fast switching between development and production environments.
• Built-in SSL Support: Offers free, auto-configured SSL certificates for your local development environment, mimicking production HTTPS to 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 can effortlessly integrate these, giving you a complete full-stack local environment. ServBay continuously updates and supports all these packages, ensuring previously unsupported features are now fully available.
• Data Backup & Restore: Easily back up and restore configurations, sites, databases, and SSL certificates for data security.
• Database Password Reset: Enables simple resetting of root passwords for MySQL, MariaDB, and PostgreSQL databases, tackling a common pain point for developers.

Frequently Asked Questions (FAQ)

• Q: I get command not found: ng when running ng new or ng serve. What should I do? A: This usually means Angular CLI wasn’t properly installed or isn’t in your system’s PATH. Make sure you have globally installed @angular/cli (npm install -g @angular/cli) and that the ServBay Node.js environment is correctly set in your PATH. Try restarting your terminal or ServBay if needed.
• Q: ng serve fails to start because the port is in use. What should I do? A: The port you specified (such as 8585) is already used by another process. Either pick a different, free port with ng serve --port 8586, and update the ServBay reverse proxy configuration accordingly.
• Q: I configured a ServBay site, but the page fails to load when I access the domain. What’s wrong? A: Please check the following:
  • Make sure ServBay is running.
  • For development, verify that ng serve is running and listening on the same port as configured in your reverse proxy.
  • For production, double-check that the "Website Root Directory" in ServBay is set to the correct post-build directory containing index.html (under dist/your-project-name).
  • Check ServBay’s log files for more detailed error information.
  • Confirm the domain you’re visiting matches the one in your ServBay site configuration exactly.
• Q: Can I use different web servers (Caddy/Nginx/Apache) via ServBay to host my Angular production build? A: Yes, ServBay supports Caddy, Nginx, and Apache for static file serving. When you configure a static site, ServBay automatically uses your currently enabled web server to serve files—all of which are optimized for static content.

Summary

By following this guide, you should have successfully created and run an Angular project within the ServBay environment. You’ve learned how to utilize ServBay’s reverse proxy during development for easy domain-based access to your ng serve dev server, and how to build and host your Angular production version using ServBay’s static file service. With ServBay’s robust Node.js support, convenient site management, and built-in SSL, you can greatly enhance your local Angular development experience and efficiency. ServBay’s comprehensive tech stack support also lays a solid foundation for all your full-stack projects.