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, run unit tests, and build a .NET Core application.
The setup 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. The first task we do is to create a project for our application, then a build configuration, which is straightforward:
Once that is done, then our build configuration will require us to add some build steps as part of our 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. Next, we setup the running of the unit tests.
Next, we setup the running of the unit tests.
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 Team City build step is:
npm run test-once
The build final step is the application build, which we define as follows:
After we save these build steps, they should look as follows:
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 Team City 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.
