I recently updated my Agility Course Master Ionic PWA to Angular 11 and wanted to fully automate generating and uploading of source map files to Rollbar. I found an existing project that almost did everything I needed: angular-rollbar-source-maps. It was missing triggering Rollbar's deploy endpoint to indicate that a new release had been deployed.

So I took a little time to add that feature and I also changed the scripts so only node was needed to generate the Git SHA revision and to perform the upload/deploy HTTP POSTs to Rollbar.

Overview

During the build the file src/environments/version.ts is automatically generated containing the definition of the current Git revision:

// this file is automatically generated by git-version.js script
export const version = {revision: '12f54f9'};

Import that version.ts file into the file where you create your Rollbar.Configuration and use it to set your code_version Rollbar parameter.

The same version is used when uploading the source maps and informing Rollbar of the deploy.

The entire process is initiated by a single command:

npm run prod

Installation

  1. Edit package.json and add the prod target line to the scripts section. This generates and uploads the source maps and then deletes them from the www directory so they aren't uploaded to your site.

  2. Create a .env file with values populated for your site (you probably want to add .env to your .gitignore file also):

  3. npm install dotenv

  4. Copy git-version.js and rollbar-deploy.js (below) into the same directory as your package.json

  5. Edit rollbar.ts to import the environment/version.ts file and set the version in the Rollbar configuration.

Building and Deploying

When you are ready to build/deploy:

npm run prod

Once the script is done the www directory contains only the artifacts you need to deploy your site (no JS source map files). In my case I deploy to firebase via:

firebase deploy

Comments