Angular and Travis CI: Building and Testing Your App

In this tutorial, we will explore how to use Travis CI for building and testing your Angular app. Travis CI is a popular continuous integration (CI) platform that helps automate the process of building, testing, and deploying software projects. By integrating Travis CI into your Angular development workflow, you can ensure that your app is always properly built and tested before being deployed.

angular travis ci building testing app

Introduction

What is Angular?

Angular is a popular JavaScript framework for building web applications. It provides a structured approach to developing dynamic and responsive web pages. With its powerful features and extensive library, Angular simplifies the development process and improves the overall efficiency of web app development.

What is Travis CI?

Travis CI is a hosted continuous integration platform that helps automate the building, testing, and deployment of software projects. It integrates with popular version control systems like GitHub and Bitbucket, allowing developers to easily set up CI workflows for their projects. Travis CI supports a wide range of programming languages and frameworks, including Angular.

Setting Up Travis CI

Before we can start using Travis CI with our Angular app, we need to create a Travis CI account and configure it for Angular projects.

Creating a Travis CI account
To create a Travis CI account, visit the Travis CI website and sign up using your GitHub or Bitbucket account. Once you've signed up, you'll be redirected to the Travis CI dashboard.
Configuring Travis CI for Angular projects
To configure Travis CI for Angular projects, we need to add a .travis.yml file to the root directory of our project. This file specifies the build settings and commands that Travis CI should execute when building our app.
Here's an example .travis.yml file for an Angular project:
```
language: node_js
node_js:
  - lts/*
cache:
  directories:
    - node_modules
install:
  - npm ci
script:
  - npm run build
```
Let's go through the contents of this file step by step:
- language: node_js specifies that our project is written in Node.js.
- node_js: lts/* specifies that we want to use the latest LTS version of Node.js.
- cache: directories: node_modules caches the node_modules directory to speed up subsequent builds.
- install: npm ci installs project dependencies using the npm ci command, which is faster than npm install.
- script: npm run build runs the build command specified in the package.json file.
With this configuration, Travis CI will automatically build our Angular app whenever changes are pushed to the repository.

Building Your Angular App

Now that we have set up Travis CI for our Angular project, let's understand the build process and configure the build settings.

Understanding the build process

The build process in Angular involves compiling TypeScript code, bundling assets, and generating the final JavaScript files that can be served to the browser. It also performs optimizations such as minification and tree shaking to reduce the size of the output files.

To build our Angular app, we need to run the build command specified in the package.json file. By default, the build command is ng build.

Configuring build settings

We can customize the build process by modifying the angular.json file in our project. This file contains configuration settings for various aspects of our Angular app, including the build process.

Here's an example of a modified angular.json file with custom build settings:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  },
  "defaultProject": "my-app"
}

In this example, we have customized the outputPath to dist/my-app and enabled various optimizations for the production build.

Running the build command

To run the build command locally, open your terminal or command prompt and navigate to the root directory of your Angular project. Then, run the following command:

ng build

This will compile the TypeScript code, bundle the assets, and generate the output files in the specified outputPath.

Testing Your Angular App

Testing is an essential part of the development process to ensure the quality and reliability of our Angular app. Angular provides a robust testing framework that allows us to write unit tests for our components, services, and other parts of our app.

Overview of testing in Angular

Angular uses the Jasmine testing framework for writing unit tests. Jasmine provides a clean and readable syntax for writing test cases and assertions.

To write unit tests for our Angular app, we need to create .spec.ts files alongside our source files. These files contain test cases that verify the behavior of our code.

Writing unit tests

Let's say we have a component called AppComponent in our Angular app. To write unit tests for this component, we can create a file called app.component.spec.ts and write our test cases in it.

Here's an example of a unit test for the AppComponent:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  });

  it('should render the title', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-app!');
  });
});

In this example, we import the necessary testing utilities from @angular/core/testing and the AppComponent from the source file. We then use the beforeEach function to set up the testing environment and create an instance of the AppComponent. Finally, we write test cases using the it function and make assertions using the expect function.

Running tests with Travis CI

To run tests with Travis CI, we need to configure the test command in our .travis.yml file. By default, the test command for Angular projects is ng test.

Here's an example of an updated .travis.yml file with the test command:

language: node_js
node_js:
  - lts/*
cache:
  directories:
    - node_modules
install:
  - npm ci
script:
  - npm run build
  - npm run test

With this configuration, Travis CI will automatically run the test command after building our Angular app.

Continuous Integration with Travis CI

Now that we have set up Travis CI for building and testing our Angular app, let's understand the concept of continuous integration and how it integrates with our development workflow.

Understanding continuous integration

Continuous integration (CI) is a development practice where developers frequently merge their code changes into a central repository. Each code change triggers an automated build and test process to ensure that the changes are compatible with the existing codebase.

By using Travis CI for continuous integration, we can automate the process of building, testing, and deploying our Angular app. This helps catch bugs and issues early in the development process and ensures that the app remains stable and reliable.

Integrating Travis CI into your development workflow

To integrate Travis CI into your Angular development workflow, follow these steps:

Make sure your Angular app is hosted on a version control system like GitHub or Bitbucket.
Create a Travis CI account and configure it for your Angular project, as described earlier in this tutorial.
Add a .travis.yml file to the root directory of your project with the necessary build and test commands.
Push your code changes to the version control system. This will trigger Travis CI to run the build and test commands automatically.
Monitor the Travis CI dashboard or notifications for the status of your builds and tests. If any issues are found, fix them and push the changes again.

By following this workflow, you can ensure that your Angular app is always properly built and tested before being deployed.

Automating builds and tests

Travis CI supports various automation features that can further streamline your development workflow. For example, you can configure Travis CI to automatically deploy your app to a hosting provider like GitHub Pages or Firebase Hosting after successful builds and tests.

To automate the deployment process, you need to add the necessary deployment configuration to your .travis.yml file. This typically involves specifying the deployment provider and the required credentials.

For example, here's an updated .travis.yml file with deployment configuration for deploying to GitHub Pages:

language: node_js
node_js:
  - lts/*
cache:
  directories:
    - node_modules
install:
  - npm ci
script:
  - npm run build
  - npm run test
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist/my-app
  on:
    branch: master

In this example, we specify the deployment provider as pages and set skip_cleanup to true to preserve the build artifacts. We also provide the GitHub token as an environment variable and specify the local directory containing the build output.

With this configuration, Travis CI will automatically deploy your Angular app to GitHub Pages whenever changes are pushed to the master branch.

Best Practices

To optimize the build and test performance of your Angular app with Travis CI, consider the following best practices:

Optimizing build and test performance

Use caching: By caching the node_modules directory, you can avoid re-installing dependencies for each build, resulting in faster build times.
Parallelize tests: If your app has a large number of tests, consider running them in parallel to reduce the overall test execution time.
Use environment-specific configurations: If your app has different build and test configurations for different environments (e.g., development, staging, production), use environment variables in your .travis.yml file to specify the appropriate settings.

Handling dependencies and versioning

Use a package manager: Use a package manager like npm or Yarn to manage your app's dependencies. This ensures that the correct versions of the dependencies are installed during the build process.
Specify version ranges: When specifying dependencies in your package.json file, use version ranges instead of fixed versions. This allows Travis CI to install the latest compatible versions of the dependencies during the build process.
Regularly update dependencies: Keep your app's dependencies up to date by regularly checking for new versions and updating them as needed. This helps ensure that your app remains secure and benefits from the latest features and bug fixes.

Conclusion

In this tutorial, we have learned how to use Travis CI for building and testing your Angular app. We started by setting up a Travis CI account and configuring it for Angular projects. Then, we explored the build process and how to customize the build settings. We also learned about testing in Angular and how to write unit tests for our app. Finally, we discussed the concept of continuous integration and how to integrate Travis CI into our development workflow. By following the best practices outlined in this tutorial, you can optimize the build and test performance of your Angular app and ensure its stability and reliability.