DEV Community: Zackary Chapple

Extreme build performance NestJS: Leveraging Rspack and Nx while working to increase build performance for NestJS applications

Zackary Chapple — Fri, 12 May 2023 14:29:57 +0000

Atlanta, Georgia - May 12th, 10am Eastern Today, Valor Software together with Nx and Rosa are announcing Rspack support for NestJS.

"Hospitals and healthcare professionals trust Rosa to manage their schedule and appointments. Patients rely on Rosa to book their medical appointments. As a mission critical company in the business of saving lives, we know that even a single moment of downtime can be devastating. Every second matters! A production downtime incident that is waiting for builds that take 15+ minutes is simply unacceptable when people's lives are at stake. As such we are constantly looking for ways to improve our build process

Cherry on the cake: it also improves the DX.

When we saw the Rspack announcement by Valor in March we knew we wanted to see if Rspack could improve our builds. We engaged with them to fund this project.” - Antoine Pairet: Founder and CTO at Rosa

Rosa selected Valor Software to add NestJS support to Rspack via Nx and integrate it into their existing applications. After working in collaboration with the Nx team, Valor is excited to share that initial support and performance results are now available for release and testing by the wider community.

"Building on our partnership with Valor Software and our existing integrations for Rspack added by our team last Month, it was a pleasure for us to collaborate on extending our support for NestJS.

This project allowed us the opportunity to not only enhance our existing support for NestJS, but also to improve our existing integrations with Rspack.

The performance is simply amazing and the ecosystem is wonderful to work with” - Katerina Skroumpelou: Senior Software Engineer at Nx

With over 56k stars on GitHub and over 2.2 million downloads a week on NPM, NestJS is an incredibly popular if not the default Node.js framework for developers in 2023. NestJS under the covers was leveraging webpack to conduct its builds and additionally supports a custom build configuration. This mechanism was used to add Rspack support for NestJS.

“When I created NestJS in 2017 I was working on it as a side project, during that time I wanted to create something that was scalable, efficient, and fully supported TypeScript. Since its creation NestJS has grown to be one of the most popular Node.js frameworks that I know of.

When our partners at Valor reached out to us and mentioned they were going to work on adding Rspack support we were happy to see what progress they would make. After seeing the initial performance improvements we are thrilled to welcome Rspack to the possible ways to build NestJS” - Kamil Mysliwiec: Co-Founder Trilon and Creator of NestJS

Results

“Migrating NestJS to Rspack is a part of an overall build process improvement project for Rosa. Thanks to Valor, we were was able to take our build times from roughly 30 minutes to 7 minutes in less than a month. After we pull through the remaining changes that are in progress we expect to be under 3 minutes for our full build on our CI pipeline. We are looking forward to share more details once we wrap it up.” - Antoine Pairet: Founder and CTO at Rosa

Below are build time performance results for one of the projects converted to Rspack by Valor for the Rosa team.

Webpack results

Rspack results

There was a minor change to switch to the rspack “withNx” plugin in our webpack (now Rspack) config to ‘@nrwl/rspack’ and setting the project.json to use the executor ‘@nrwl/rspack:rspack’ and point to a ‘rspackConfig’ instead of a ‘webpackConfig’

“After reviewing the configurations for the applications, there are improvements that could have been made within webpack itself to achieve a portion of the gains seen here with Rspack. However it requires combining in depth knowledge of webpack and an increase to the configuration that would then need to be maintained. With Rspack all of the optimizations and improvements came for “free” and just simply works. It is configured to be performant by default and there is a very small margin for error.” - Zack Jackson: Principal Architect at Lululemon and creator of Webpack Module Federation

Try it today

Install the Nx plugin today and try Rspack, Nx, and NestJS! We have a simple example demonstrating how to use this powerful combination of technologies on GitHub.

Pending issues requiring further effort

While the project itself and this release is considered a success there is still some work to be done to improve it. We would love any help with pull requests!

Rspack Issues:

Support ForkTSCheckerWebpackPlugin, issue 2592

Nx Issues:

Support FileReplacement option for Rspack projects, issue 218
Support extractLicenses option for Rspack projects issue 218
Support extractLicenses option for Rspack projects, issue 219
Support maxWorkers option for Rspack projects, issue 224
Support memoryLimit option for Rspack projects issue 225
Support generatePackageJson option Rspack projects, issue 226

About Valor Software

Founded in 2013 Valor Software is a leading software development and consulting company that specializes in advancing and bringing together open source technologies to achieve technological and business advancement for their customers. Valor brings a wealth of open-source experience to the table, having contributed to Module Federation as core team members, worked on Angular as contributors, and created ngx-bootstrap (an Angular component library with over 300 thousand downloads a week).

If you’re looking to push the edge of development or would like to work with us to create something amazing please reach out via email, sales@valor-software.com

Rspack: The Rust-Based Web Bundler that Combines High Performance with Interoperability

Zackary Chapple — Fri, 10 Mar 2023 00:00:00 +0000

Atlanta, Georgia - March 9, 2023, 7 PM Eastern -- Today, ByteDance ( the tech giant behind popular platforms such as TikTok and Douyin) and Valor Software introduced Rspack to the open source community.

"Our early benchmarks of Rspack are very promising: it starts and compiles app.netlify.com (our primary user-facing web application) 300 to 500% faster than Webpack 5 with ESBuild.
We can’t wait to see Rspack also make it to the hands of Netlify customers and speed up their development workflows!"

Kaelig Deloumeau-Prigent - Principal software engineer at Netlify

Rspack offers developers a new and innovative solution for web bundling, combining multi-threaded high performance with webpack interoperability.

"The team at Valor Software has been instrumental in our journey to open-source Rspack, Their connections within the open-source community and ability to bring organizations together are unparalleled."

Lei Zhang - Manager of the platform team at ByteDance

With the collaboration between ByteDance's internal platform development team and Valor Software, a new era of web development efficiency is upon us, web development is becoming truly efficient. Rspack - a high-performance web bundler written in Rust, designed to be interoperable with webpack is being introduced to the open source community.

In the world of Open Source, optimizing for community adoption and lowering the barrier of entry for developers is extremely important. Valor Software understood this and started collaborating with Nx, an open-source developer tool, downloaded more than 3 million times a week as per NPM stats. Nx provides powerful scaffolding mechanisms and features, allowing it to help teams scale large codebases and monorepos. Their reach and approach to improving the developer experience when adopting new tech stacks will help increase the adoption of Rspack across the community.

As of today both React, and Solid have been tested and are compatible with Rspack.

”Our primary goal at Nx is to be the premier developer CLI tool for managing JavaScript projects and promoting efficient team practices. As such we do not only provide powerful plugins developed by our team, but also empower framework authors to leverage Nx as their CLI.
That’s why when ByteDance and Valor reached out, we were excited to work with them to develop a dedicated Rspack plugin for Nx. The plugin enhances the Rspack ecosystem and makes it easier for developers to adopt it and create production-ready applications.
We are excited to continue working with the Rspack team to make sure the JavaScript community gets the best tools for modern development."

Juri Strumpflohner - Senior Director of Developer Experience at Nx

About Valor Software

"First Look" video

Modernization with Module Federation, Nx and React

Zackary Chapple — Tue, 03 Jan 2023 19:08:02 +0000

Introduction

Many organizations are talking about how they are launching a modernization effort, but it seems as some organizations are struggling to move to React 18. It can be a challenge to get product teams to prioritize the upgrade from 16 or 17.

There is a modernization strategy that can help make the transition without causing disruptions.

Why Modernize in the first place?

There are several reasons why an organization should upgrade to React 18, beyond the basic fact that React 15 and 16 are no longer receiving security patches from the React team.

Performance, with each new version of React, performance increases. Users are demanding more snappiness, additionally SEO is becoming even more top of mind for many organizations. Performance gains and the revenue they can potentially generate are a huge driving factor.
Developer productivity, moving outside of the current major version leads to a large decrease in availability of maintained third party packages. Most large OSS libraries support n-1 (current major version minus one), so the moment a team gets outside of that range they risk being deprecated and having to support the package on their own.
New Features, for organizations using SSR in particular the server side suspense that comes with React 18 is a real boost for performance and reduction in code complexity.

The Strategy

Most of the organizations that we work with are rather large enterprises. Their development efforts typically consist of multiple teams, multiple backlogs, and multiple, sometimes competing, priorities. Trying to land complicated upgrades takes a rather large amount of effort just in coordination. This has an impact on overall delivery velocity as well since it distracts from feature work.

We need to work in a way that is:

Easily repeatable
Automated
Scalable
Non-disruptive
Incremental

Quick note regarding supported stacks

While the main stack being mentioned in this article is React, it is important to mention that Module Federation as a strategy can be used with other frontend stacks; Angular, Next.js, Vue as well in Mobile with ReactNaive and NativeScript and backends with Node or Node with NestJS.

Decomposing and strategizing

When starting a modernization effort that involves frontend development, one of the table stakes for Valor Software in its modernization efforts is the use of Nx.

Too often when working with an organization there are undocumented requirements, configurations spread throughout the organization, or just high levels of repetitive boilerplate. One of the first things we do in an organization is create a series of generators based on their current architecture best practices.

ESLint configs, docker compose configs, sonar-cube, whatever they may be using, we take it and wrap it into a nice enterprise workspace generator tailored to their specific needs.

Having organizational consistency, particularly at the onset of a modernization effort helps ease the adoption curve later on.

Why is Nx table stakes

Changing methodologies is inherently challenging, while many developers will be able to adopt quickly, others benefit greatly from having guardrails. Codifying the existing architecture best practices allow for organizations to understand how those are evolving over time.

Creating incremental demos

Often organizations have their own, boutique, combinations of technologies they have built their application architecture ecosystem around. An organization using React 16 with Loadable Components, Apollo Client all requiring SSR and backed by Enzyme tests and built with Make is going to have some adventures moving to React 18 for a multitude of reasons.

Creating incremental demos allows the team to start with the working reference architecture. These demos start by following the current organizational standards, with all of their niche complexities. Once the Nx workspace is able to generate that reference architecture properly the organization now has its starting point for each of the next stages of platform evolution.

Nx shines again in the aspect that after the reference architecture can be generated, so can the migrations. For the most part the changes needed to add Module Federation to a React application is a known quantity. Which configurations to add, where to add them and which things to test afterwards is also known. With the reference architecture created Nx migrations to perform these known operations. For those unfamiliar, Nx migrations work a bit like code mods on steroids.

Each migration becomes increasingly more challenging but also reveals more value to the platform. Typically Valor sees the following steps.

Move to Webpack 5
Add Module Federation
Create an application shell with target technology stack and methodologies that wraps the existing React 16 application and still loads them with an adaptor
Migrate federated remotes to React 17 (this may be skipped sometimes)
Migrate federated remotes to React 18
Refactor SSR implementations to begin to use Suspense

Most times there is also a migration to Typescript during one of these stages. This helps quite a bit with testability and reusability overall while also boosting developer productivity.

Power of Module Federation with an Application Shell

Adding an Application Shell around the existing application, then added module federation gives teams greater freedom. With this combination they are now able to incrementally upgrade each of the federated remotes with higher relative autonomy. This allows the team to decide how to prioritize migrating the rest of the application. With clear communication patterns and backwards compatibility in place the efforts required to coordinate are significantly lower.

Long term benefits

Architecture standards change, design systems get updated, and as with all software breaking changes are always potentially around the corner. By leveraging an enterprise Nx workspace those change can be propagated throughout the enterprise with a single command, which can also be automated.

With the new Nx workspaces and usage of caching builds also become dramatically faster (typically on an order of 10-100x). We saw one customer's builds go from zero cache-ability and taking 90+ minutes to run, to high cache-ability around 300-600 milliseconds.

We can help!

Valor Software has worked with multiple organizations now begin this migration process and the results are, to put it blunt, astonishing. As partners with the team behind Nx, Nrwl, and the exclusive partners for Module Federation, we would love the opportunity to share specific details on how we can help your organization move to React 18 and Module Federation, schedule a call today!

Module Federation for the Business

Zackary Chapple — Tue, 20 Dec 2022 20:31:21 +0000

What is Module Federation

Module Federation is a technique that allows developers to split a large web application into smaller, independent modules that can be loaded on demand. The concept of Module Federation was first introduced by Zack Jackson. He later wrote a book on Practical Module Federation written together with Jack Herrington.

Module Federation works by using a "host" application that is responsible for loading and managing the various modules. The host application loads the modules asynchronously and communicates with them using a shared interface. This allows the modules to interact with each other and share data and functionality.

Module Federation is a relatively new technology that is gaining popularity among developers as it allows for more modular, performant, and scalable web applications. It is not specific to any frontend framework and can be used with popular frameworks such as Next.js, React, Angular, and Vue. In addition, module Federation can also be used with Node.js itself for Federation of server code.

In this blog post, we will be discussing the business value of Module Federation. Specifically, we will look at how modularity and scalability can benefit businesses by reducing development time and costs, improving maintainability and flexibility.

Some of the business values and impacts

Module Federation allows for more modular and scalable web applications by enabling developers to break down a large codebase into smaller, reusable pieces that can be loaded and updated separately. This flexibility and ability to ship code allows developers to work on individual parts of the application independently, which can reduce development time and costs. It also reduces risk due to the fact that smaller segments of functionality can be tested as functionality is being deployed.

In addition, the modularity of Module Federation can also improve the maintainability and flexibility of the application. Because each module is self-contained and has its own dependencies, it is easier to update and maintain individual modules without affecting the rest of the application.

Module Federation can also increase developer autonomy by allowing developers to work on their own modules without having to coordinate with the rest of the team as they did when working with monolithic applications. This can lead to faster development and a more efficient workflow.

The resilience of the application is also increased by allowing portions of the web application to be unavailable without impacting the entire application. This can be particularly useful for applications that need to be highly available, as it allows for better handling of outages and maintenance.

Finally, Module Federation often reduces the bundle size of the application by reducing the amount of code that needs to be shipped to the browser on the first interaction. This can improve the performance of the application and can also be beneficial for search engine optimization (SEO) as it reduces the amount of code that needs to be parsed by the browser.

Who's using Module Federation

There is public information available that many large and recognizable organizations are using Module Federation in their web applications. Some examples of well-known companies that have adopted Module Federation include PayPal, Best Buy, Lululemon, Semrush, Cloudflare, Epic Games, Business Insider, Box.com, Shopify, Adidas, Fidelity, Bytedance, and Chase.

These companies have likely implemented Module Federation to achieve greater modularity and scalability in their web applications, which we can expect to contribute to the success of their web presence.

It is worth noting that these are just a few examples of the many organizations that are using Module Federation. There are likely many other companies, both large and small, that are using Module Federation internally or externally in their web applications. This demonstrates the widespread adoption of Module Federation as a powerful tool for building modular and scalable web applications.

Summary

If a development organization is looking for a technique that allows developers to split a large, monolithic, web application into smaller, independent modules that can be loaded on demand, Module Federation is the way to go. The reduced development time and costs, improved maintainability and flexibility, increased developer autonomy, increased application resilience, and reduced bundle size are just the beginning of the benefits.

As we've shared, Module Federation has already been adopted by many well-known organizations, and it is likely that more companies will adopt it in the future.

It is clear that business should try to stay up-to-date with new technologies and begin to leverage Module Federation, we know it will help them to stay competitive.

Need help?

Valor Software is a software development and consulting company that specializes in helping businesses modernize their web platforms and leverage new technologies like Module Federation. As official partners for the Module Federation organization, Valor Software has extensive experience and expertise in implementing module federation for businesses of all sizes.

By working with Valor Software, businesses can take advantage of the latest technologies and techniques to build modern web applications that are more adaptable to changing needs and demands while also ensuring best practices through unparalleled access to the creator and supporting maintainers of Module Federation itself.

Reach out today if you have any questions sales@valor-software.com

webpack Plugin written by ChatGPT

Zackary Chapple — Fri, 16 Dec 2022 18:04:22 +0000

Introduction

No matter what social media platform you are on if you follow the tech space, or any space for that matter, you are most likely seeing content about ChatGPT or even content generated by ChatGPT.

When it first came out a few weeks ago I played with it, thought it was pretty cool and had my kids start using it to write guided stories with ideas from their imagination. When combined with MidJourney AI generated art the overall experience was quite amazing.

Last night seeing @scriptedalchemy share about his experiences with it I decided to try something a little more challenging.

A lot of my focus lately is on ModuleFederation and webpack. I asked myself what could ChatGPT do with that combination and what would be fun to see. My prompts and directions will be in quote blocks.

The Task

The first question I asked the site:

create a webpack plugin in typescript that wraps module federation and adds additional logging

Below is the first reply:
To create a webpack plugin in TypeScript that wraps module federation and adds additional logging, you can follow these steps:

Create a new TypeScript project and install the necessary dependencies:

npm init -y
npm install --save-dev webpack webpack-cli typescript ts-loader

Create a tsconfig.json file to configure the TypeScript compiler. In the compilerOptions object, set the module option to "commonjs" and the target option to "esnext". This will ensure that the generated JavaScript code is compatible with webpack.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext"
  }
}

Create a webpack.config.ts file to configure webpack. In the configuration object, set the mode option to "development" and add a resolve object to specify that webpack should resolve TypeScript files.

import { Configuration } from 'webpack';

const config: Configuration = {
  mode: 'development',
  resolve: {
    extensions: ['.ts', '.tsx']
  },
  // Add other configuration options here
};

export default config;

In the webpack.config.ts file, add a module object to specify that webpack should use the ts-loader to transpile TypeScript files.

import { Configuration } from 'webpack';

const config: Configuration = {
  // Other configuration options
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

export default config;

Create a src directory and add an entry point file, such as src/index.ts. This will be the file that webpack will use as the starting point for the build.

In the webpack.config.ts file, add an entry object to specify the entry point file and a output object to specify the path and filename of the bundled JavaScript file.

import { Configuration } from 'webpack';

const config: Configuration = {
  // Other configuration options
  entry: './src/index.ts',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
};

export default config;

Install the necessary dependencies for module federation:

npm install --save-dev @module-federation/client

In the webpack.config.ts file, import the ModuleFederationPlugin from the @module-federation/client package and add it to the plugins array in the configuration object. You can also specify the remotes option to specify the remote modules that your application should be able to access.

import { Configuration } from 'webpack';
import { ModuleFederationPlugin } from '@module-federation/client';

const

First issues

You can see that the last code block is incomplete. Sometimes on more lengthy requests the chat bot can time out, I tried, quite literally, asking it to keep going.

keep going

Sure, here are the next steps:

Create a TypeScript interface for the plugin's options. This will allow you to specify the options for the plugin when it is added to the plugins array in the webpack configuration.

export interface ModuleFederationLoggingPluginOptions {
  // Add options here
}

Create a new class for the plugin that extends the ModuleFederationPlugin class and implements the apply method. In the apply method, you can wrap the ModuleFederationPlugin and add additional logging.

import { Compiler, Plugin } from 'webpack';
import { ModuleFederationPlugin } from '@module-federation/client';
import { ModuleFederationLoggingPluginOptions } from './options';

class ModuleFederationLoggingPlugin implements Plugin {
  private readonly options: ModuleFederationLoggingPluginOptions;
  private readonly moduleFederationPlugin: ModuleFederationPlugin;

  constructor(options: ModuleFederationLoggingPluginOptions) {
    this.options = options;
    this.moduleFederationPlugin = new ModuleFederationPlugin(options);
  }

  apply(compiler: Compiler) {
    this.moduleFederationPlugin.apply(compiler);

    // Add additional logging here
  }
}

In the webpack.config.ts file, import the ModuleFederationLoggingPlugin class and add an instance of it to the plugins array in the configuration object. You can also specify the options for the plugin by passing an object to the constructor.

import { Configuration } from 'webpack';
import { ModuleFederationLoggingPlugin } from './module-federation-logging-plugin';

const config: Configuration = {
  // Other configuration options
  plugins: [
    new ModuleFederationLoggingPlugin({
      // Specify options here
    })
  ]
};

export default config;

Run webpack to build the project.

npx webpack

That's it! You have now created a webpack plugin in TypeScript that wraps module federation and adds additional logging.

Modifying the results

Seeing what the results were it was quite verbose, but it does not follow the platform I usually like to use, @nrwl_io's Nx. So I did a redirect on the conversation.

how can I simplify the steps by using Nx

Using Nx (Nrwl Extensions for Angular) can simplify the process of creating a webpack plugin in TypeScript that wraps module federation and adds additional logging. Nx is a set of open-source tools and libraries that can help you develop full-stack applications more efficiently.

To use Nx to create a webpack plugin, follow these steps:

Install the Nx CLI:

npm install -g @nrwl/cli

Create a new Nx workspace:

npx create-nx-workspace my-workspace

In the Nx workspace, create a new library for the webpack plugin:

npx nx g @nrwl/workspace:lib module-federation-logging-plugin

In the library directory, create a tsconfig.json file to configure the TypeScript compiler. In the compilerOptions object, set the module option to "commonjs" and the target option to "esnext". This will ensure that the generated JavaScript code is compatible with webpack.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext"
  }
}

In the library directory, create a new TypeScript file for the plugin, such as src/module-federation-logging-plugin.ts. In this file, create a new class for the plugin that extends the ModuleFederationPlugin class and implements the apply method. In the apply method, you can wrap the ModuleFederationPlugin and add additional logging.

import { Compiler, Plugin } from 'webpack';
import { ModuleFederationPlugin } from '@module-federation/client';

export class ModuleFederationLoggingPlugin implements Plugin {
  private readonly moduleFederationPlugin: ModuleFederationPlugin;

  constructor(options: any) {
    this.moduleFederationPlugin = new ModuleFederationPlugin(options);
  }

  apply(compiler: Compiler) {
    this.moduleFederationPlugin.apply(compiler);

    // Add additional logging here
  }
}

In the libs/module-federation-logging-plugin/tsconfig.lib.json file, add a typeRoots field to specify the path to the TypeScript declaration files for the webpack and @module-federation/client packages. This will allow the TypeScript compiler to find the type definitions for these packages.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "typeRoots": [
      "node_modules/@types",
      "node_modules/@module-federation/client/node_modules/@types"
    ]
  },
  "include": ["src/**/*.ts"]
}

In the libs/module-federation-logging-plugin/src/index.ts file, export the ModuleFederationLoggingPlugin class. This will allow other projects in the Nx workspace to use the

Second timeout

You can see that I received another timeout due to the length of the response. This time instead of just asking it to continue I tried to get it to pick back up from step 7 which was incomplete.

repeat the content of step 7 and keep going

Sure, here is the content of step 7:

In the libs/module-federation-logging-plugin/src/index.ts file, export the ModuleFederationLoggingPlugin class. This will allow other projects in the Nx workspace to use the plugin.

export { ModuleFederationLoggingPlugin } from './module-federation-logging-plugin';

Here are the next steps:

In the Nx workspace, create a new application that will use the webpack plugin:

npx nx g @nrwl/angular:app my-app

Install the necessary dependencies for module federation:

npm install --save-dev @module-federation/client

In the apps/my-app/src/webpack.config.ts file, import the ModuleFederationLoggingPlugin class from the library and add an instance of it to the plugins array in the webpack configuration object. You can also specify the options for the plugin by passing an object to the constructor.

import { Configuration } from 'webpack';
import { ModuleFederationLoggingPlugin } from '@my-workspace/module-federation-logging-plugin';

const config: Configuration = {
  // Other configuration options
  plugins: [
    new ModuleFederationLoggingPlugin({
      // Specify options here
    })
  ]
};

export default config;

Run webpack to build the application:

npx nx run my-app:build

That's it! You have now used Nx to create a webpack plugin in TypeScript that wraps module federation and adds additional logging.

One more tweak

Just to see how far I can go I wanted to add some documentation. No plugin is complete without documentation right?

can you add swagger documentation to the src/module-federation-logging-plugin.ts file

To add Swagger documentation to the src/module-federation-logging-plugin.ts file, you can use Swagger annotations in the form of JSDoc comments. JSDoc is a documentation standard for JavaScript that is widely supported by tools like Swagger.

Here is an example of how you can add Swagger documentation to the ModuleFederationLoggingPlugin class:

import { Compiler, Plugin } from 'webpack';
import { ModuleFederationPlugin } from '@module-federation/client';


/**
 * A webpack plugin that wraps module federation and adds additional logging.
 *
 * @param {Object} options - The options for the plugin.
 * @param {string} options.remoteName - The name of the remote module.
 * @param {string} options.remoteType - The type of the remote module.
 * @param {string} options.remoteUrl - The URL of the remote module.
 */
export class ModuleFederationLoggingPlugin implements Plugin {
  private readonly moduleFederationPlugin: ModuleFederationPlugin;

  constructor(options: any) {
    this.moduleFederationPlugin = new ModuleFederationPlugin(options);
  }

  apply(compiler: Compiler) {
    this.moduleFederationPlugin.apply(compiler);

    // Add additional logging here
  }
}

You can then use a tool like Swagger UI or ReDoc to generate a documentation website from the Swagger annotations. To do this, you will need to generate a Swagger JSON file from the annotations. There are various tools and libraries that can do this, such as swagger-jsdoc and swagger-ui-express.

Here is an example of how you can use swagger-ui-express to generate a Swagger documentation website:

Install the necessary dependencies:

npm install --save swagger-ui-express swagger-jsdoc

Create a swagger.js file with the following code:

const swaggerUi = require('swagger-ui-express');
const swaggerJSDoc = require('swagger-jsdoc');

// Swagger definition
const swaggerDefinition = {
  openapi: '3.0.0',
  info: {
    title: 'Module Federation Logging Plugin',
    version: '1.0.0',
    description: 'A webpack plugin that wraps module federation and adds additional logging.'
  },
  servers: [
    {
      url: 'http://localhost:3000'
    }
  ]
};

// Options for the swagger-jsdoc library
const options = {
  swaggerDefinition,
  apis: ['./src/module-federation-logging-plugin.ts']
};

// Initialize the Swagger document
const swaggerSpec = swaggerJSDoc(options);

module.exports = app => {
  app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
};

In your application's main file, such as index.js, require the swagger.js file and pass the express app instance to it:

const express = require('express');
const app = express();

Summary

After about 5 minutes I have code that is pretty close to what I was expecting. It has more comments and guidance than I would have created on my own, and for the most part follows some pretty decent best practices.

ChatGTP was able to accept redirects that were pretty technical in nature, with little context, and adjust the output appropriately.

While not a replacement for a developer that is experienced this tooling and process can help to learn new frameworks, patterns and create functionality more rapidly.

Combining highly skilled engineers with ChatGPT will in the near future (if not now) increase their velocity. Combining new engineers with ChatGPT will aid in their exposure to practices that they can then begin to understand and question in their learning journey.

What exciting times we live in!