Adding release toggles to an Angular app - the easy way

Adding release toggles to an Angular app - the easy way

This tutorial is adapted for Angular from&nbsp;<a href="https://dev.to/thekarel/implementing-release-toggles-with-appknobs-react-cli-3b06" target="_blank">Implementing release toggles with Appknobs, React &amp; CLI&nbsp;</a>.

This tutorial is adapted for Angular from Implementing release toggles with Appknobs, React & CLI .

Let's add a release toggle

When you're doing trunk-based development whatever is in your main branch - usually master - is pushed to production. At the same time, you might want to use short-lived feature branches, add small improvements at a time and integrate (merge) often. To prevent half-finished features appearing in production you will want to use release toggles. These toggles - also known as release flags - will allow you to deploy, demo and end-to-end test a feature under development by select users but keep it hidden from anyone else.

It is a very simple concept but comes with a few difficulties if you try to implement it from scratch. Hence we're going to use two open source NPM packages from Appknobs to get the job done super fast: @appknobs/angularfor the UI and @appknobs/cli for the command line.

Create a new project (optional)

We assume you have a working Angular 7 app ready for a new release toggle. If you need a quick sandbox, generate one using

npm install -g @angular/cli
ng new my-sandbox --defaults

or with Yarn:

yarn global add @angular/cli
ng config -g cli.packageManager yarn
ng new my-sandbox --defaults

Install dependencies

In your project's folder, install @appknobs/angular@appknobs/client and @appknobs/cli:

npm install @appknobs/angular @appknobs/client && npm install -D @appknobs/cli

or

yarn add @appknobs/angular @appknobs/client && yarn add -D @appknobs/cli

Add a release toggle

@appknobs/angular comes with a declarative feature toggle component <ak-feature>. After you wrap a section of your application in <ak-feature name='...'><YourSection /></ak-feature> it becomes a managed feature and so you can toggle the release without code changes.

It's up to you to select a part of your UI to hide behind a toggle. If you're using the sandbox, open src/app/app.component.html and change it to

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png">

<ak-feature name="sandbox-message"> <h1>I'm using release toggles in Angular!</h1> </ak-feature> </div>

This code hides <h1>I'm using release toggles in Angular!</h1> behind a release toggle. Yes, it's a bit simplistic, but works nicely as an example. The <ak-feature> component can wrap any part of your UI hierarchy - so it's flexible and lets you cater for complex scenarios.

Please note once a feature is managed it is hidden by default. So your message won't show up just yet.

Feature flag autodiscovery

Use @appknobs/cli - the command line interface to Appknobs - to let the feature management service know about your release flag. With Yarn you can simply run yarn knobs to invoke it, otherwise, add a line to your package.json...

  "scripts": {
    "knobs": "knobs"
  }

… and run npm run knobs. Installing @appknobs/cli as a global package or running npx @appknobs/cli β€”help also works. For the examples below we assume it's a global package.

To make your life easier, Appknobs can look at your codebase, find & register all feature flags automatically. No need to manually copy-paste.

Invoke knobs parse src/ from the top level of your project and the tool will guide you through the process:

$ knobs parse src

You need to log in before you can upload feature flags from your project

? Would you like to log in or register now? … Log in ❯ Register Quit

Basically, you need to select Register, enter your email and a password, press enter:

App name: my-sandbox
App ID: DfXPWwujs4YxZc2Ay89
Framework: auto-guessing

Found the following feature flags: πŸ‘‰ sandbox-message

πŸ‘ sandbox-message saved

That's it πŸ‘

Your release toggles are discovered and recorded in the Appknobs service automagically.

Get your App ID

Please note your App ID as you'll need it soon. To find it later, run the following command:

$ knobs app-info

βœ” App name: my-app-xxx βœ” appID: TfXPkjh3ysHYxZc2Ay89

Get your API key

You will need an API key to access Appknobs services from your app.

CLI is at your service again:

$ knobs apikey

βœ” Your API key is: 62zYKyP8f8sAqxpPoYAcm and is valid until Mon May 13 2019

πŸ’‘TIP: You can always go to our web console at https://console.appknobs.io/to find this information.

Connect to Appknobs service

To ensure each feature toggle "flips" when needed, we provide a service that propagates changes to all <ak-feature> automatically.

In the service configuration, you inject the service client that will fetch the available feature toggles of your app at runtime. You will need your appIdand the apiKey from before.

Finally, you send the runtime context - e.g. username, hostname, cookie values, etc. - to the service to make the decision on the state of the app feature flags. The content of the context payload is 100% up to you. The following example is quite trivial but works for now and allows you to keep experimenting. Find out more about the payload and conditions in our previous blog post.

πŸ’‘TIP: Check out the @appknobs/angular and @appknobs/clientdocumentation to learn about advanced topics or take a look at our code examples in the appknobs/appknobs-examples repo.

For the sandbox example, the src/app/app.module.ts needs to be changed like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the Appknobs modules import { newBrowserClient } from '@appknobs/client'; import { AppknobsModule} from '@appknobs/angular';

// Configure the client const appknobsClient = newBrowserClient({ appId: 'YOUR_APP_ID', apiKey: 'YOUR_API_KEY' });

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // Inject the client AppknobsModule.forRoot({client: appknobsClient}) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Fetching the feature list

You can fetch the list of enabled features any time. A quick & simple solution is to do it once at startup, but of course, this can be repeated anytime during the application lifecycle.

Inject AppknobsService into app.component.ts and make the call:

import { Component, OnInit } from '@angular/core';

import {AppknobsService} from '@appknobs/angular';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-sandbox';

private appknobs = null;

constructor(appknobs: AppknobsService) { this.appknobs = appknobs; }

ngOnInit() { // A quick-and-easy way to toggle features by deployment target: this.appknobs.evaluate({hostname: document.location.hostname}); } }

Start your app with

ng serve

Your code is ready

As mentioned before, the thinking behind release toggles is that you can change the visibility of a feature without code changes. Since the "sandbox-message" feature is now managed, let's head over to the web console at https://console.appknobs.io/ and set the conditions.

πŸ’‘TIP: knobs console will open the web UI

There is a detailed guide to the web console which you can refer to if needed. The steps are quite simple:

  • Visit https://console.appknobs.io/
  • Log in with your username and password
  • Under your app - "my-sandbox" in our example - click Edit features
  • Under the feature you've defined - "sandbox-message" in our example - click Edit conditions

In the condition form, let's add:

  • hostname as property
  • Equal to as predicate
  • localhost as argument

β€” and save.

Done

Reload your app and enjoy your amazing message! πŸ₯‡

Try setting the context payload in app.component.ts to something else, e.g. {hostname: 'example.com'} and see what happens.

Note: evaluation is cached for 1 minute by the payload, so changes made on the Console might take a few seconds to be visible in the app.

Hopefully, this guide allows you to get started on a more productive, trunk based development journey using release toggles. Please share if you liked it or let me know if I've missed something!

Originally published by Charles Szilagyi at dev.to

__




Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ Angular Crash Course for Busy Developers

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you toΒ use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica