Angular is one of the most popular front-end frameworks. Continuous deployment (CD) is one of the most important developments in software engineering in the past decade. It is a natural and radical evolution of continuous integration (CI). While its predecessor stated that developers should often merge their work into the mainline, CD goes a step further, stating that every merge — when they are successful — should be automatically deployed into production.
In today’s article, I’ll show you how to set up CDS for Angular applications in a basic and practical way, using only free resources. I’ll also show you how to add a new feature to your app after the feature flag so you can change its behavior and track its performance without multiple deployments.
Benefits of continuous integration and continuous deployment
Before we get into the practical part of the post, let’s cover some of the basics by explaining what CI and CD are and the benefits of adopting them.
Continuous integration means that developers integrate their work frequently, at least once a day, but often more. By doing so, they can enjoy the benefits of shorter feedback cycles, earlier detection of defects, and improved overall product quality.
Continuous deployment takes it one step further and automates deployment. This means that each successful merge to the master branch — that is, code builds and all tests and other automated checks pass — the product is delivered to production.
A practical guide to continuous deployment in Angular
For brevity, we won’t instruct you to set up an Angular application. What we’ll do is point you to a GitHub repository where you can download or clone a bare-fisted, functional CRUD application. So go to the repository and clone or download the app.
Once you have a folder containing the applications, open a terminal and navigate to the applications directory. If you have cloned your repository with Git, delete the connection to the original repository by running this.
git remote remove origin
Code language: Shell Session (shell)
If you get the application by downloading a zip package, you don’t need to do this. Now, while you are still in the application folder, service the application by running the following command.
ng serve
Code language: Shell Session (shell)
Go to http://localhost:4200 and you’ll see the application running.
The application is a simple CRUD application, it consumes a test Rest API (https://jsonplaceholder.typicode.com/).
You are now ready to start implementing CI/CD for your application. So let’s get started.
Provide Firebase hosts for your Angular applications
As promised, you only need free resources to complete this tutorial. The first resource to use is Firebase Hosting, a free Hosting service provided by Google.
So, first go to Firebase Hosting and start a new project. Next, you will use NPM to install Firebase CLI worldwide.
npm install -g firebase-tools
Code language: Shell Session (shell)
Once installed, you will log in to Firebase by running the following command.
firebase login
Code language: Shell Session (shell)
A new TAB on your browser takes you to a page where you must authorize Firebase CLI access to your Google account. After you authorize the Firebase CLI, you can close the browser window and return to your terminal.
You are now ready to initialize Firebase for your project. Run this in the root directory of your project.
firebase init
Code language: Shell Session (shell)
Then you’ll be asked a bunch of questions. Underline to Hosting: Configure and deploy Firebase Hosting Sites, touch the space bar, and hit Enter. Underline to Create a new Project and hit Enter. Give it a unique name (mpS-split-ang-crud). Set dist/
for the public directory problem.
** Note: ** This is the name you give your Angular project. In my case, it’s called: my-Crud-app. For the next question, type n. For the Settings described here, see the image below.
With that in mind, you’re ready to deploy to Firebase for the first time. First, you do a production build with Angular.
ng build --configuration production
Code language: Shell Session (shell)
After the build is complete, you will have a dist folder containing the generated artifacts. The contents of this folder are what you send when you deploy the application. That’s why when Firebase asks you what you want for your public directory, you have to say dist.
So, to deploy the contents of your public directory, you just need to run a simple command.
firebase deploy
Code language: Shell Session (shell)
If you see something like this, your deployment is successful.
You can now point to the URL displayed by Firebase and see your application online.
What’s next? Automation.
Set the Travis CI
As you can see, deploying your application using the Firebase CLI is very easy. However, running the Firebase deployment command every time you want to deploy your application will not do. Let’s use the Travis CI for automation.
First go to travis-ci.com/ and sign up with your GitHub account. Then you can see your GitHub repository.
The next step is to head to Rebo.new and start a new repository on GitHub. Then go back to the terminal, add your GitHub repository as a remote repository, and push to it.
git remote add origin https://github.com/<your-user-name>/<your-repo-name>.git git push -u origin master
Code language: Shell Session (shell)
Now you are one step closer to configuring your project with Travis CI. The next step is to create a file to store the configuration of the Travis CI. So, at the root layer of your repository, create a file called.travis. Yml with the following contents.
`language: node_js node_js:
- “12.14”
branches: only: – master before_script:
- npm install -g @angular/cli
script:
- npm install
- npm run build
deploy: skip_cleanup: true provider: firebase token: secure: “”`
Code language: YAML (yaml)
** Note: ** For good reason, the default branch for new projects on GitHub is Main. However, when the branch name is not Master, I have a hard time getting the project to deploy properly to Firebase. If you know how to deploy to Firebase on a different branch, please let us know.
As you notice, one piece of information is missing: tokens. This is because the token is secret data, which means you can’t put it there as plain text. Instead, you must encrypt it.
First, you must generate a Firebase token, which you can do by running the following command.
firebase login:ci
Code language: Shell Session (shell)
After running this command, you will see a message: “Success!” . Log in on the CI server with this token: “, followed by the generated token.
Install Travis CLI using the instructions here.
Note: Travis is switching all endpoints from travis-ci.org to travis-ci.com. There is still a free layer. Travis CLI still uses the.org address by default, so the following command is to ensure that the CLI can use the.com address.
The next step is to encrypt the token using Travis CLI.
travis encrypt --add deploy.token <YOUR-FIREBASE-TOKEN> --com
Code language: Shell Session (shell)
You could encrypt the token and paste the generated value into.travis. Yml, but the command above does all the work in one step.
It’s now safe to commit, so here’s what you do: submit your.travis. Yml file and push it to your remote REPo. This will trigger a build whose status you can track at travis-ci.org. Once the build is successful, deployment is triggered. You can track deployment by visiting Firebase.
Add feature flags to your Angular application
You have successfully configured the continuous build and deployment of Angular applications using the Firebase host and Travis CI. As a bonus, let’s now look at how to add feature flags to the application.
But first: What is a feature marker, and why should you care?
What are functional markers?
Feature flags — also known as feature switchers and feature flippers, among other names — are a mechanism that allows you to disable and enable features without changing code and redeploying the application. This capability is very powerful and has many use cases. For example, you can use the logo to launch a new feature for a small number of users to mitigate its risk. Similarly, you can use flags to perform A/B testing, split your user base into two groups, and provide A different version of functionality for each group to measure user interest and reaction.
However, the effect of feature marking goes much deeper than that. It is more of a facilitator of a robust CI/CD process. Feature tagging gives developers the freedom to send code that contains unfinished functionality. They can then merge the code into the main repository as often as possible to take advantage of the shorter feedback cycle. This is a scenario that is closer to true continuous integration than just configuring some tools — which, mind you, are also valuable and necessary.
Start using Split
Now we’ll quickly show you how to add a feature flag to your application. You will simulate the deployment of an unfinished feature. As you can see, by keeping functionality off, there is no risk of users accessing it.
Start by signing up for a Split permanent free account. Once you’re done, it’s time to get your API key. Log in to your account, click the Workspace button in the top left corner — the one marked DE — and then click Manage Settings.
On the new page, click API Key.
On the next screen, find the keys for the JavaScript SDK and staging environment.
Click Copy and save the key in a safe place.
Add the Split JavaScript SDK to your Angular code
Next, you need to install the JavaScript SDK for Split so that you can check if your feature flag is active by querying Split. Go back to terminal, make sure you’re in the project folder, and run this.
npm install --save @splitsoftware/splitio-browserjs
Code language: Shell Session (shell)
Commit the changes added to the package.json file. Now you can take the next step.
Modify your Angular code
To implement this feature, you need to make some changes to the code. The first change is to create a new file as an outer wall for the Split solution.
Run: ng generate service splitio to create a new service in the Angular application.
Paste the following code in the SRC/app/splitio. Service. Ts.
“import { Injectable } from ‘@angular/core’; import { SplitFactory } from ‘@splitsoftware/splitio-browserjs’; import { fromEvent, Subscription } from ‘rxjs’;
@Injectable() export class SplitIoService {
splitio: SplitIO.ISDK; splitClient: SplitIO.IClient; isReady = false; treatments: SplitIO.Treatments; subscription: Subscription; features: string[] = [ 'include_phone' ]; isTreatmentOn(treatmentName: string) : boolean { let treatment = this.splitClient.getTreatment(treatmentName); let result = null; if (treatment == 'on') { result = true; } else if (treatment == 'off') { result = false; } else { result = false; } console.log(`Value of: ${treatmentName} is ${treatment}`); return result; } initSdk(): void { this.splitio = SplitFactory({ core: { authorizationKey: '<your api key>', key: 'customer-key' } }); this.splitClient = this.splitio.client(); this.verifyReady(); } private verifyReady(): void { const isReadyEvent = fromEvent(this.splitClient, this.splitClient.Event.SDK_READY); this.subscription = isReadyEvent.subscribe({ next() { this.isReady = true; console.log('Sdk ready: ', this.isReady); }, error(err) { console.log('Sdk error: ', err); this.isReady = false; }}); } getTreatments(): void { this.treatments = this.splitClient.getTreatments(this.features); }Copy the code} ` `
Code language: JavaScript (javascript)
Let’s examine the SplitIoService you just created.
initSdkGets the Split client Settings. It uses your SDK client key. It callsverifyReadyverifyReadyUse JSX event system and SplitSDK_READYEvent to representSplitIoServiceReady for action.isTreatmentOnAccepts a string parameter, the name of a treatment, and is based on that treatmentonAgain, return a Boolean value.off
There is only one small change left in the code. You will enter the src/app/user/create/create.com ponent. HTML file, and add the following code to its.
`<div *ngIf=”splitService.isTreatmentOn(‘INCLUDE_PHONE’)” class=”form-group”> Phone:
Code language: HTML, XML (xml)
*ngIf calls the isTreatmentOn function from SplitIoService, which determines whether to render the phone field.
You have made the changes to the code. Now let’s move on to the next step, which will take you to Split’s website again.
Create your first continuously deployed feature flag in Angular
Go back to your Split account. Click on that and then click Create Split.
You will be asked to give your shard a name. The name must match what you’re using in your code, so use “INCLUDE_PHONE “instead.
After that, there are only three steps left.
- Click “Add rule”.
- Click “Save changes”.
- Finally, click OK.
Now you can go back to the application, create a new user, and make sure you don’t see the phone field. Then go back to Split and activate the processing method (switching it from off to on).
If you go back to the application and navigate to Create a new user, you will see the new fields displayed.
Learn more about CI/CD in JavaScript
Today’s article provides a guide on how to get started using CI/CD in Angular. We have shown you how to set up a deployment to Firebase Hosting and then automate the process using Travis CI. As a bonus, we’ve shown you a powerful technique that you can apply to change your application’s behavior in production without writing code and redeploying. This mechanism is called feature labeling. As you’ve already read, feature tagging offers many benefits. But here’s the big benefit: They allow developers to fearlessly and often merge their work into the mainline, knowing that the end user will not be able to access unfinished functionality. In other words, feature markup is currently one of the most effective promoters of CI and CD. If you want to learn more, I encourage you to check out these additional resources.
- Feature delivery releases speed, security, and business impact
- Use GitHub Actions and Heroku for continuous deployment of Node.js
- How can feature tags be used to reduce code cycle time
- Complete feature monitoring within 15 minutes
- Deploy your React application with Netlify
To stay up to date on feature tags and modern CI/CD, follow us on Twitter @SplitSoftware and subscribe to our YouTube channel!