Create and Run an Angular Project

What is Angular?

Angular is an open-source front-end framework maintained by Google for building dynamic single-page applications (SPA). It is based on TypeScript and provides a rich set of tools and features that allow developers to efficiently build complex applications. The core concept of Angular is components and modularity, which makes the code easier to organize and maintain.

Key Features and Benefits of Angular

• Component-Based: Build user interfaces using components, making the code more modular and reusable.
• Two-Way Data Binding: Automatically syncs data model and view, making data management more convenient.
• Dependency Injection: Enhances code testability and maintainability through dependency injection.
• Powerful CLI Tools: Angular provides powerful command-line tools (Angular CLI) that simplify project creation, development, and build.
• Built-in Routing and Form Handling: Angular offers robust routing and form handling capabilities, making it easier to build single-page applications.

Using Angular helps developers efficiently create modern, responsive web applications.

Create and Run an Angular Project with ServBay

In this article, we will use the Node.js environment provided by ServBay to create and run an Angular project. We will use ServBay's 'Host' feature to set up a web server and implement project access through reverse proxy and static file service.

Create Angular Project

1. Initialize the Project

   First, make sure you have installed the Node.js environment provided by ServBay. Then, globally install Angular CLI using the following command:

   npm install -g @angular/cli

   Create a new Angular project in the suggested web root directory /Applications/ServBay/www:

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

   Follow the prompts to enter the project name (suggested to name it servbay-angular-app), and choose other options as required:

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. Install Dependencies

   Enter the project directory and install dependencies:

   cd servbay-angular-app
   npm install

Modify Angular Project Output

1. Modify src/app/app.component.html File

   Open the src/app/app.component.html file and change its content to output "Hello ServBay!":

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

Enter Development Mode

1. Run Development Server

   Start the development server and specify the port (e.g., 8585):

   ng serve --port 8585

   This will start a local development server and expose port 8585.

2. Configure ServBay Host Reverse Proxy

   Use ServBay's 'Host' feature to access the development server through reverse proxy. In ServBay's 'Host' settings, add a new reverse proxy:

   • Name: My first Angular dev site
   • Domain: servbay-angular-test.dev
   • Host Type: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   For detailed setup steps, refer to adding a Node.js development website.

3. Access Development Mode

   Open a browser and visit https://servbay-angular-test.dev to view the project in real time. Since ServBay supports custom domains and free SSL certificates, you will enjoy higher security.

Build Production Version

1. Build Production Version

   When development is complete, use the following command to build the production version:

   ng build --prod

   After the build is complete, the generated static files will be located in the dist/servbay-angular-app directory.

2. Set Up Static File Service

   Use ServBay's 'Host' feature to access the production version through the static file service. In ServBay's 'Host' settings, add a new static website:

   • Name: My first Angular production site
   • Domain: servbay-angular-test.prod
   • Host Type: Static
   • Web Root Directory: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Access Production Mode

   Open a browser and visit https://servbay-angular-test.prod to view the built production version. With ServBay's custom domains and free SSL certificates, your website will have higher security and credibility.

Following these steps, you have successfully created and run an Angular project, using ServBay's features to manage and access your project.