Welcome to today’s post.
Today I will show how to configure TeamCity to setup, test and build your Angular development environment.
In a previous post I showed how to setup TeamCity to checkout, build and run unit tests for a .NET core application, and setup of a build pipeline in TeamCity for a .NET Core application.
The setup of our build and test execution pipeline in this case is more straightforward as we do not have to deal with the correct version of MS Build or .NET in our build dependencies.
The main build tool we will be using is the command line and NPM tool, which must be installed after installing Node.js on your build server environment.
These are the tasks we will go through the following tasks to achieve our goal:
- Create a TeamCity build configuration for our application.
- Implement a build pipeline configuration for our application within TeamCity.
- Setup a test execution pipeline for our application unit tests within TeamCity.
- Run the pipeline to test the build and test execution.
Creation of the Build Configuration Step
The first task we do is to create a TeamCity build configuration for our Angular application.
Below is the configuration screen for our application:
Define the Application Packages Installation Step
Once the build configuration is done, then our build pipeline will require us to add some build steps as part of our application build pipeline.
The first step we define is the dependencies installation of the NPM packages:
What we have done here is to define our working directory, which contains our application source code folder. In a build where we are checking out source from a VCS repository, the working folder would be relative to a sub-folder within of the TeamCity build environment folders.
Also, we have run a custom script to install our NPM package as a command line, the same command line we would apply when we are in a CMD prompt or within the Angular CLI environment.
Define the Application Test Run Step
Next, we setup the running of the unit tests.
The unit test run requires it to be run from the command line.
In the configuration of the unit test run we define the step name, working directory, and script to run. This is shown below:
Again, we have the same working folder, with an NPM script to run our test.
Note that if we had simply run an existing test that was intended to run continuously within our development environment, then we would have problem: the test step would run continuously and never end! The continuous polling would occur, and we would have to manually halt the build step otherwise it would run forever!
To prevent this, ensure that in your NPM scripts within your Angular application package.json file, an additional unit test script run is created that ends after just one run. It should look as follows:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"test-once": "ng test --watch=false",
"lint": "ng lint",
"e2e": "ng e2e"
},
The NPM script we include in our build step is:
npm run test-once
Define the Application Build Step
The build final step is the application build.
In this step, we define the application build parameters, which include the step name, working directory, and custom script as follows:
After we save these build steps, they should look as follows:
A Test Run of the Build and Test Pipeline
After running the build, open the log file and you will see the output as the build steps progress:
The longest running build step is the installation of NPM packages.
This can take on average between 4-6 minutes.
The unit tests can also take some time, depending on the number of unit tests your application has. When completed, the tests will end with an exit code.
The unit test build step on average can take between 1-3 minutes depending on the size of your application.
When the build completes with no issues in the steps, the build will be passed successful.
To confirm the above steps have been executed successfully on your application source folder, check the following folders have been created and / or updated:
The node-modules folder is created or updated when the NPM packages are rebuilt.
The dist folder is created or updated when the Angular build is run on your application.
To summarize, we have seen how to use a Continuous Integration tool like TeamCity to do the following:
- Build our NPM packages.
- Run application unit tests.
- Build our application.
We could extend our build steps by pulling code from a VCS repository, run the above steps then execute a deployment of our application.
That is all for today’s post. I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
