Add support for importing external packages

[voho]

Hi, I love the project! Would it be possible to add support for external libraries, e.g. cdk-monitoring-constructs? This way, other CDK libraries could be used to build the CDK apps. Thanks!

[3p3r]

Hello! glad you are interested in cdk-web :)

Interop between native CDK external libraries and cdk-web in NodeJS currently is possible but undocumented and non trivial. I was able to get your linked construct synthesized by first executing the following before my stack code:

const oldProcess = globalThis.process;
const CDK = require("cdk-web");
globalThis.process = oldProcess;
const Module = require("module");
const oldRequire = Module.prototype.require;
Module.prototype.require = function (name) {
  if (name === "monocdk") {
    return { ...CDK.require("constructs"), ...CDK.require("aws-cdk-lib") };
  }
  if (
    ["fs", "path", "process", "constructs"].includes(name) ||
    name.startsWith("aws-cdk-lib") ||
    name.startsWith("monocdk")
  ) {
    return CDK.require(name.replace("monocdk", "aws-cdk-lib"));
  }
  return oldRequire.call(this, name);
};

This is very ugly and scary, I know. This allows cdk-web to import before native cdk and then overwrites node's native require to work with it and automatically hijacks and uses cdk-web instead of native cdk. I then was able to use the construct you linked:

const cdk = CDK.require("aws-cdk-lib");
const app = new cdk.App();
const stack = new cdk.Stack(app, "BrowserStack");

const Monitoring = require("cdk-monitoring-constructs");
new Monitoring.MonitoringScope(stack, "MonitoringScope");
new Monitoring.DefaultDashboardFactory(stack, "DefaultDashboardFactory", {
  createAlarmDashboard: true,
  createDashboard: true,
  createSummaryDashboard: true,
  dashboardNamePrefix: 'CdkWeb',
  renderingPreference: 'none'
});
new Monitoring.MonitoringFacade(stack, "MonitoringFacade", {
  alarmFactoryDefaults: {
    actionsEnabled: true,
    alarmNamePrefix: 'prefix'
  },
  metricFactoryDefaults: {
    namespace: 'test',
  }
});

const cli = new CDK.PseudoCli({ stack });
cli.synth().then(console.log);

this is very ugly but it did get that stack synthesized all the way without errors. it might be enough to do interop with native cdk constructs like this. I am open to suggestions.

for web browsers, a mechanism like chai.use or express.use might be helpful as well.

I am also open to suggestions of course and welcome PRs as always

[3p3r]

I just implemented this into develop branch that'll go out with the next release: ba8c473#diff-8bc43a87f144c137f416b72427e40aff8874d927a7ae983678445cfaab56a6ed

it'll enable compatibility with aws-cdk-lib, monocdk, and best effort cdk v1. you will be able to use the construct you linked like so:

// npm i --save cdk-web aws-sdk
const CDK = require("cdk-web");
CDK.init({ requireHook: true }); // enable global require hook

// ....
// after this call and down, all cdk related imports will go through cdk-web
// ....

// rest of your cdk app untouched
const cdk = require("aws-cdk-lib");
const app = new cdk.App();
const stack = new cdk.Stack(app, "BrowserStack");
// npm i --save cdk-monitoring-constructs
const Monitoring = require("cdk-monitoring-constructs");

new Monitoring.MonitoringScope(stack, "MonitoringScope");
new Monitoring.DefaultDashboardFactory(stack, "DefaultDashboardFactory", {
  createAlarmDashboard: true,
  createDashboard: true,
  createSummaryDashboard: true,
  dashboardNamePrefix: "CdkWeb",
  renderingPreference: "none",
});
new Monitoring.MonitoringFacade(stack, "MonitoringFacade", {
  alarmFactoryDefaults: {
    actionsEnabled: true,
    alarmNamePrefix: "prefix",
  },
  metricFactoryDefaults: {
    namespace: "test",
  },
});

const assembly = app.synth();
const { template } = assembly.getStackByName(stack.stackName);
console.log(template);

you will not be able to use the native aws cli with this. but the cdk-web cli api is available.

[3p3r]

@voho please let me know if that solved your issue and reopen if it did not please.