
-
TL;DR Here is the result
-
Nutrient
Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers. Other PDF SDKs promise a lot - then break. Laggy scrolling, poor mobile UX, tons of bugs, and lack of support cost you endless frustrations. Nutrient’s SDK handles billion-page workloads - so you don’t have to debug PDFs. Used by ~1 billion end users in more than 150 different countries.
-
Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.
-
When Angular started moving away from Webpack towards ESBuild, and WMF was replaced by Native Federation (NF), it was nice to see that the ideas of five years ago were not so crazy. NF was used in recent projects, and everything seemed to be going well. With the release of Angular 18, Hydration support also appeared. I wanted to try this functionality, but it turned out that NF does not support SSR. The solution1 proposed by the author of NF didn't seem like a reliable. It called for a wrapper that, instead of a module, made an HTTP request to get the HTML, then parsed it and inserted it into the component. That approach created compatibility issues with Hydration and in my opinion significantly complicated the architecture, since it required running a separate SSR server for each mini-SPA. In turn, NF already had everything needed to load mini-SPA modules via dynamic import. Therefore I decided to give it a try:
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.
-
Shame on me, I didn't know that Node.js can't load modules via HTTP. So I had to find a workaround. Node.js supports hooks for loading modules, and this is already at the release candidate stage. Angular 19 even uses this method to generate the manifest file. Wrote an quick and dirty code which worked. Created an issue, suggested a pull request with POC, but there was no response. What's left? Make your own solution.
-
TypeORM
ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
In my project I also use TypeORM with plugin for NestJS. To do this I needed to add custom options for esbuild. I implemented a feature similar to custom-esbuild to allow users to add their own plugins to the build.
-
The problem was related to the implementation of @angular-devkit/build-angular:dev-server. After analyzing other builders, such as custom-esbuild, a solution was found. Using the approach from this example helped to successfully complete the build of host-application:serve. On http://localhost:4200/ everything looked correct, but only thanks to SSR. With disabled SSR, there was an error:
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
nestjs-json-api
Tools to implement JSON API, such as, end point, query params, body params, validation and transformation response.
In my project I also use TypeORM with plugin for NestJS. To do this I needed to add custom options for esbuild. I implemented a feature similar to custom-esbuild to allow users to add their own plugins to the build.
-
Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.
-
nx
Build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
An efficient work environment is the key to rapid development and testing. Many of us have heard stories about how it takes days or even weeks to set up a work environment at a new job or project. I am not exception! To avoid such situations, I decided to think through the structure and configuration in advance. The main idea was to make everything reproducible and easy to use. Since the goal was to develop a plugin for nx.dev, I started by creating a new workspace via create-nx-workspace. I used the test application to experiment with SSR, and therefore created a plugin template using @nx/plugin:plugin. Additionally, I generated two applications and one library via NX generators. As a result, the project structure looked like this:
-
Nest
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
In my project I also use TypeORM with plugin for NestJS. To do this I needed to add custom options for esbuild. I implemented a feature similar to custom-esbuild to allow users to add their own plugins to the build.
-
Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.
-
Hello everyone, I'd like to share by experience of building custom builder for Angular.