Nx Series Part5: Project migration and micro-frontend

As developers, we often start with small, single-codebase proof-of-concept (POC) projects to assess feasibility. However, these projects can quickly grow beyond their original scope, making it challenging to migrate or merge them into other projects. Nx, a powerful tool for monorepo development, offers a solution by enabling code sharing across projects and simplifying the migration process. In this article, we'll explore a case study of migrating an Angular project into an Nx workspace.

Case Study: GTM Configurator and TagCheck

In 2022, I developed the GTM Configurator, an Angular app that generates JSON configuration files for Google Tag Manager (GTM). It successfully reduced the time spent on implementation by catching missing event parameters and other human errors. Fast forward to 2023, I started a new project called TagCheck using Nx, with an Angular frontend and a Nest.js backend. TagCheck aims to automate GTM QA processes, ensuring all tags are triggered correctly and helping maintain trust between teams. Migrating GTM Configurator to TagCheck with Nx Since TagCheck already had specs compatible with the GTM Configurator's JSON files, I decided to migrate the Configurator into the TagCheck Nx workspace. Nx's Angular library feature made this process straightforward and efficient.

Migration Steps

1. Align Angular versions: Ensure the Angular versions in the Nx workspace and the migrated project match to minimize syntax updates.

2. Review configuration files:

• Compare tsconfig.json files and update the Nx workspace's version to support smooth bundling and building.
• Check package.json dependencies and install any missing packages in the Nx workspace.

3. Create an Angular library:

• Use Nx's Angular library generator to create a new shared library.
• Configure the library's component to use ng-content for flexible content projection.

4. Refactor and move code:

• Refactor the GTM Configurator's components and services to fit the library's structure.
• Move the refactored code into the Nx library.

5. Utilize the library:

• Export the library's UI components and import them into TagCheck's frontend app.
• Replace the original GTM Configurator components with the library versions.

By following these steps, I successfully migrated the GTM Configurator into the TagCheck Nx workspace, reusing code and reducing duplication. The shared library approach also made the code more maintainable and easier to update across both projects. Additional Considerations When migrating projects into an Nx workspace, there are a few additional aspects to consider:

- CSS: If the migrated project has multiple layout pages, you may need to refactor CSS to ensure components are self-contained and reusable.

- package.json scripts: Update any build, test, or run scripts to work with the Nx workspace's structure and commands.

- CI/CD pipelines: Modify your CI/CD configuration (e.g., GitHub Actions) to build and deploy the Nx workspace correctly.

Conclusion

Nx is a powerful tool that enables code reuse and simplifies project migration. By migrating the GTM Configurator into the TagCheck Nx workspace, I experienced firsthand the benefits of shared libraries and streamlined development. If you find yourself in a similar situation, consider using Nx to make your project migration a success.