DEV Community: Michael Patterson

Setup an Angular HTTP Interceptor

Michael Patterson — Wed, 13 Oct 2021 09:44:19 +0000

What is an HTTP Interceptor?

Every HTTP transaction that occurs between the client and server of web applications has a request and a response.

The client requests something or sends something to the server. The server processes this and responds with a response.

HTTP Interceptors allow the client application to modify either (or both) the content of the request and response. For those familiar with Nodejs, the HTTP interceptor is not too dissimilar from Express middleware in that it acts as a middle-man to the requests.

Common Uses

The most common use I come across in general development is to add JWT access tokens into the outgoing request headers for a server to validate with. Generally, this will mean accessing the JWT from wherever it is being stored (hopefully not local storage) and appending a new header value with the correct name for the server to accept, validate and continue with the request.

The other common use I have implemented is to add additional data into the response object. Generally, this will be a piece of information that is required for all responses to be processed by the client, but not actually data that needs to make the trip to and from the server. This could be a local user Id or email address, or some other display-only data.

Adding the Interceptor

Assuming you already have an Angular app spun up, adding the interceptor itself is relatively trivial.

In my projects, I either create a new provider in a servers/providers folder or a separate folder just for the interceptor:

~/angular-app/src/app/services/http-interceptor.service.ts

~/angular-app/src/app/interceptors/http.interceptor.ts

But either way, the file needs to be a provider file as per Angular providers.

The implementation of this file at a base level is very simple. The service class must implement HttpInterceptor from the "@angular/common/http" part of the Angular framework. This brings in the requirement to have a function definition of intercept() which handles the request modification:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  constrcutor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    let headers = request.headers.append('Content-Type', 'application/json');
    const requestClone = request.clone({
            headers
          });
    return next.handle(requestClone);
  }
}

In the above example, we're simply adding the Content-Type header to all outgoing requests.

The real magic is the request.clone() function. As it says, it creates a new copy of the outgoing request and allows us to modify it before using it as the outgoing request information.

In addition to the above file, in order for the interceptor to fire correctly, the Angular module needs to be updated to tell the app the interceptor exists. So, in the app.module.ts file you will need to add an additional provider:

import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './services/http-interceptor.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [...],
  providers: [
    ...,
    { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

That's all there is to it. The logic of the intercept function should do all the work required to modify the request.

Originally posted here

Must-have Tools for a Full Stack Developer

Michael Patterson — Sat, 09 Oct 2021 06:51:33 +0000

Developing, programming, coding, scripting, whatever you call it, is difficult. It's a fact.

Luckily, there are a plethora of tools we can use to make it just a little bit easier and faster to get code done and into production.

The tools I personally use evolve depending on the projects and technologies I am working on but the below list are the ones I use pretty much every day, both personally and with colleagues.

Coding

Visual Studio Code

VS Code is my IDE of choice for 90% of my work. It is lightweight, but fully featured and has an extensive range of extensions to make working with any technology much easier. If I need a heavier option, I transfer over the Visual Studio proper itself (mostly for .NET centric projects).

XCode

Not much choice here for iOS app development. XCode has a bit of a learning curve for Apple integrations and inner-workings but does provide the best options for deploying an iOS app.

Android Studio

Again, not much choice for bundling and deploying Android apps. I actually like the Android Studio developer experience in general but don't spend a lot of time writing pure Java or Kotlin so my usage is limited to testing and bundling Android apps for release.

BitBucket

Given you'll see below that I'm using the Atlassian suite of project management tools, it just makes more sense to also use Bitbucket as my source control. Github is one I do use sometimes for personal projects, but I've found no massive differences in the functionality provided and they are both free.

Postman

Postman at its core is a relatively simple tool. It allows you to specific HTTP requests to URLs, pass data and see the response. These URLs can be production or in your development or test environments. It makes testing your API endpoints really simple and definitely speeds up my API building time by finding errors before even exposing the API to a user interface app.

Database Management

Azure Data Studio/SQL Server Management Studio

These two are combined as they essentially provide the same functionality for me. Both have similar interfaces for connecting to SQL databases and performing management tasks and querying. Azure Data Studio also comes in MacOS flavour so can be used to manage SQL databases on your Mac.

Project Management

Jira

Jira makes Agile/Scrum project management simple. I've found that even for relatively small projects with small teams, Jira sprints and bug cards makes development flow much easier.

Confluence

Every developer needs documentation. Whether it is general stuff about the product, specific code related information or meeting notes and decisions, Confluence has a template for it.

GitKraken

Learning Git and all the frequently used command line commands is vital to ensure you actually know what you're doing to your source code repository. That being said, having a GUI that provides a visual representation of where your branches are and buttons to click to run the CLI commands, makes life for me substantially easier.

Slack

Slack is a pretty simple tool for us. 94% communicating and discussing issues - especially during these Covid-19 lockdown times. The other 6%? Giphy!

Hosting/DevOps

Microsoft Azure

I fell into using Azure for my DevOps requirements (Why I Use Microsoft Azure) but it provides all the PaaS, IaaS, DBaaS services I need along with a simple enough user interface for configuring auto-deployments and application configuration settings and monitoring.

Azure DevOps

Automating the integration/deployment of production apps makes life substantially easier and faster. There's something comforting about simply having to push to your main branch and walk away knowing that unless you really stuffed up, your app will build and deploy to production without you being involved.

CodeMagic

CodeMagic is a CI/CD solution geared mostly around mobile app deployment and has automated configurations to publish your apps directly to the Google Play Store or iOS App Store for the major mobile development frameworks. Saves me a bucket of time knowing I can just push the release commit on a specified branch and the app will be built and uploaded to the app store test tracks.

SiteGround Web Hosting

Sometimes I need to throw up a quick WordPress landing page or a simple website for a client. The reality is that for this sort of website where there's nothing more than a few pages and a contact form, WordPress is quicker and looks just fine. SiteGround provides easy install of WordPress sites and easy configuration sections to hook domains in, SSL certifications, CDN's and any other installs required.

Originally posted on my blog here

How to use Environment Variables in NodeJs with Express and Dotenv

Michael Patterson — Mon, 04 Oct 2021 10:53:37 +0000

NodeJs Environment Variables

Environment variables in NodeJs are essential for setting configuration options as well as storing important values securely. NodeJs by default comes with some environment variables that describe various parts of the application and the infrastructure it is being run on.

These variables, along with any custom added ones are available inside the process.env object that can be accessed in any script file within the app.

The environment variables allow you to store API keys and other configuration secrets independently from your main codebase and separate from your git repository so they never get checked in anywhere.

Being able to configure and consume these variables is essential in creating solid, production-ready NodeJs APIs for all applications.

Fortunately, there are npm packages that can help us as well as DevOps configurations.

Using Dotenv

Dotenv is an npm package that can be added to any NodeJs application. The main purpose of the Dotenv package is to allow developers to create a .env file that has custom environment files that are added into the process.env object.

Configuring the .env File

In your main app directory, create a new file simply named ".env".

.env files are treated and behave essentially the same as a plain text file.

In this file we can add our environment variable name and its value as such:

dbName="test-database"
dbPassword="SeCrEtPaSsWoRd"

This will then allow us to access these variable values by using the process.env object:

const dbName = process.env.dbName;
const dbPassword = process.env.dbPassword;

We also need to add the .env file to our .gitignore file so that it isn't pushed up to our source repository as well. These values are designed to stay hidden.

Configuring the App

Similar to the dotenv documentation, configuring it in your app is dead simple:

const express = require('express');

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

var app = express();

app.listen(app.get("port"), () => {
  console.log("Express server listening on port " + app.get("port"));
});

The difference, in this case, is that we're checking the environment that the app is running in and only applying the local .env values if we're in development (which NodeJs will default to when you run the app locally). process.env.NODE_ENV is one of the in-built environment variables that node ships with.

Now when we run our app, all the variables from our .env are available to us.

Using Environment Variables in Production

In the past, I have configured our projects one of two ways. Either by manually adding the .env file to the server and managing any changes manually and changing the above code to use the dotenv package for all environments, or, using configuration variables provided by the hosting provider.

In Azure, each web app has its own set of configuration variables that can be manually added to. These configuration values are then used in place of the .env values when accessing the process.env object.

This way, either you or your DevOps team can manage the configuration variables independently of the codebase and keep all the values secret.

Originally posted here

Sorting an Array of JavaScript Objects in a Specific Order

Michael Patterson — Wed, 29 Sep 2021 22:34:22 +0000

Sorting an array of objects in javascript is simple enough using the default sort() function for all arrays:

const arr = [
  {
     name: "Nina"
  },
  {
     name: "Andre"
  },
  {
     name: "Graham"
  }
];
const sortedArr = arr.sort((a,b) => {
  if ( a.name < b.name ){
    return -1;
  }
  if ( a.name > b.name ){
    return 1;
  }
  return 0;
});

And it is trivial enough to swap the sort order by switching the returns or the if statements above.

But what if you need to sort an array of objects in a specific, non-alphabetical order?

An example I came across was to transfer some SQL data for importing to a database and the transfer needed to occur in a table-dependent way, so as to not break the table constraints of importing foreign keys that didn't exist yet.

// Defined sort order starting with the 'lowest' table in the SQL schema
const importOrder = ["Photo", "Address", "State", "Country"];

const tables = [
  {
    name: "Address"
  },
  {
    name: "State"
  },
  {
    name: "Photo"
  },
  {
    name: "Country"
  }
];

const sortByObject = importOrder
.reduce((obj, item, index) => {
  return {
    ...obj,
    [item]: index,
  };
}, {});

const customSort = tables.sort((a, b) => sortByObject[a.name] - sortByObject[b.name]);

So what's going on here?

The key is the importOrder.reduce() function. This is transforming the importOrder array into an object that creates a numerical order for each item in the original import array:

// Output of sortByObjeect
{
  Address: 1,
  Country: 3,
  Photo: 0,
  State: 2,
}

This then makes sorting the array much simpler by being able to directly look up an integer value for the sort position, which is what we are passing into the sort function of the tables array:

// Output of tables.sort()
[
  {name: "Photo"},
  {name: "Address"},
  {name: "State"},
  {name: "Country"}
]

Originally posted here

How to Use Environment Variables in An Angular App

Michael Patterson — Wed, 29 Sep 2021 12:24:47 +0000

Environment variables in an Angular app are extremely useful for storing constants in your app that need to be used frequently, such as API url's, API access keys, Firebase config values and other general flags.

Environment File Structure

When a new Angular app is created via the CLI tooling using ng new, one of the folders generated is 'environments'.

By default, this folder contains two files:

- environment.ts

- environment.prod.ts

These files come prepopulated with the following code:

environment.ts:

export const environment = {
  production: false,
};

environment.prod.ts:

export const environment = {
  production: true,
};

How are Environment Files Used

The simple explanation of the usage of these files is that any values added into an environment file are injected into the compiled files when the Angular app is built.

The different files are used depending on the build type defined. Running ng build --prod will cause the environment.prod.ts file to be used in place of the standard environment.ts file that is used for the normal ng build process.

An example of this could be something like:

export const environment = {
  production: true,
  apiKey: 'an-important-api-key',
  apiUrl: 'https://awesomeApi.myserver.com'
};

This will result in any reference to the environment files from within the Angular app to use the correct environment value as defined in the relative file.

In your app itself, there is no need to import the specific file to separate your environments. Only the default or main environment file should be imported into your Angular files:

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(
    private http: HttpClient
  ) {}

  // Get some data. If in development mode return a string array.
  // If in prod mode get string array from server via API
  async getData(url: string): Promise<string[]> { 
    if (!environment.production) return ['development', 'data', 'values'];
    return this.http.get(environment.apiUrl).toPromise();
  }
}

Adding Additional/Custom Environments

There are two steps to adding an additional environment:

- Create a new environment file in the environments folder. Like the environment.prod.ts file, the filename of this custom file must have the additional environment name in it.

For example, if we were to have an additional development environment, the filename would be: environment.development.ts

Secondly, we must update the Angular app configuration to understand wher ethis file is and what replacements it should make when building for this configuration.

To do this, open up the angular.json file in the root of your progejct directory.

In this file you will find a "configurations" object property. In order for the app to recognise the new environment file, we need to add a configuration in:

"configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            },
            "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "6mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }

We can give the new configuration any name we like. A short name is often good practice as it is the namne used in package.json scripts and in the CLI so it is easy to type out without mistakes if it is short.

The other options seen in the production configuration can be added in if required to the new development configuration, but mostly these are unnecessary.

This configuration will tell the angular app to replace the default environment file variables with the values provided in the new custom file.

Compiling with the Custom Environment

The custom environment can be used in two main ways - via the CLI or in package.json scripts.

In the cli, we can append --configuration=dev to the normal ng build command and it will add in the dev environment values.

Similarly in the package.json, we can define scripts that also run this:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "ng build --configuration=dev"
}

Then we can run npm run dev in the CLI and it will execute the dev environment replacements.

Originally posted here

Adding Rollbar Error Tracking to Ionic + Angular

Michael Patterson — Mon, 14 Dec 2020 05:09:53 +0000

Rollbar is a real-time cloud error logging service that has SDK's for a wide variety of languages, frameworks and platforms.

Rollbar provides in-depth trace logs for any uncaught exception in your application code, along with allowing different level log entries to be called manually. It makes tracing back the path your users take to create errors a much simpler task.

The extensive configuration options also allow different environment and version tags, as well as user attribution to assist further.

Included in the free tier Rollbar provides up-to 5000 events per month and real-time alerts. You'll need a free account to be able to create a project and add the configuration to your Ionic app.

To add Rollbar into your Ionic Angular app:

In a terminal, open up your Ionic project directory
Run npm i rollbar
Run ng generate service services/rollbar to create a new service for your app.

In the rollbar.service.ts file that is generated, add the following imports & consts:

import {
  Injectable,
  ErrorHandler,
  InjectionToken,
  Inject,
} from "@angular/core";

import * as Rollbar from "rollbar";
import { environment } from "src/environments/environment";
import { Plugins } from "@capacitor/core";
const { Device } = Plugins;

const rollbarConfig: Rollbar.Configuration = {
  accessToken: "YOUR-ROLLBAR-ACCESS-TOKEN",
  captureUncaught: true,
  captureUnhandledRejections: true,
  captureEmail: true,
  captureIp: true,
  captureUsername: true,
  environment: environment.production ? "production" : "development",
  enabled: environment.production ? true : false,
  ignoredMessages: ["Script error."],
};

export const RollbarService = new InjectionToken<Rollbar>("rollbar");

The type of Rollbar is an interface, which means we can't inject it into our app in standard ways. In order to use it properly, we need to use an InjectionToken instead. This allows us to assign the value of Rollbar to a token which can be injected into our components and services.

@Injectable({
  providedIn: "root",
})
export class RollbarErrorHandler implements ErrorHandler {
  constructor(@Inject(RollbarService) private rollbar: Rollbar) {
    Device.getInfo().then((info) => {
      const appVersion = info.appVersion;
      this.rollbar.configure({
        codeVersion: appVersion,
        code_version: appVersion,
        version: appVersion,
      });
    });
  }

  addRollbarPerson(user) {
    this.rollbar.configure({
      payload: {
        person: {
          uid: user.uid,
          email: user.email
        }
      }
    })
  }

  handleError(err: any): void {
    this.rollbar.error(err.originalError || err);
  }
}

export function rollbarFactory() {
  return new Rollbar(rollbarConfig);
}

In addition to creating this service, it must be included in our app.module.ts:

import { 
  RollbarService, 
  rollbarFactory, 
  RollbarErrorHandler  
} from './services/rollbar.service';

.....

providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: RollbarErrorHandler  },
    { provide: RollbarService, useFactory: rollbarFactory },
.....
  ],
....

Breaking the service down, we have the class implementing the Angular ErrorHandler. This means that the RollbarErrorHanlder class must implement a function called handleError(err:any):

export class RollbarErrorHandler implements ErrorHandler

This function is the one that Ionic now uses by default, overloading the in-built one, to handle any uncaught exception that occurs and automatically logs the error to Rollbar. In this case, we are simply logging to Rollbar an "error" level log. This could be customised to manipulate the error and/or log different levels depending on the error type.

In our class constructor, we are using the Device plugin provided by Capacitor to retrieve our app's version number. This is purely added the Rollbar configuration object to add information to the error logs that are sent.

Following this, we have addRollbarPerson(user). In our apps, this function is called after the user logs in. The user argument contains the information retrieved from the database about the user. This allows the logs to be attributed to a user.

Lastly, we export Rollbar into a factory which we then use as a provider in our app.module.ts.

Originally posted on my blog