Embed a TypeScript library locally within a Docker container or add a link for easy access

I'm currently in the process of dockerizing our microfrontend application, which consists of both React and Angular frameworks using a shared library for communication that we developed ourselves and installed locally via npm.

'- angular-project
'- react-projects
'- shared-libs
   '- communication-lib

For local development, we install the communication-lib module with:

npm install ..\shared-libs\communication-lib

Everything runs smoothly locally, but when transitioning to Docker, I encountered several issues for which I am unable to find a suitable solution. Here are the initial lines from the Dockerfile of the Angular project:

FROM node:16-alpine As development
WORKDIR /usr/src/app/frontend
COPY ./angular/package.json ./angular/package-lock.json ./
RUN npm i
...
# trouble starts here

The Docker build fails at this point because the lib is not recognized by the image. I tried sharing the code of the shared lib with the image through a volume, but then faced the issue of missing pre-built node modules.

I would greatly appreciate any helpful tips on resolving this dilemma.

My thoughts:

Is there a way to create separate Docker containers for the libs and use them within my Angular projects container?

Could I possibly copy/build and link the lib inside the container?

angulartypescriptdockershared-librariesnode-modules

Answer №1

Summary

Your desired outcome may not be achievable, but there are alternative solutions available...

Elaboration

The Story of Local Package Linking

When you add a local package using npm install ../<folder>, a symbolic link (symlink) is created inside the node_modules directory to that folder instead of physically copying its content. This ensures that any updates made in the linked package are immediately reflected in your project.

The Docker Building Process

During a docker build operation, the build context is sent to the daemon starting from where the Dockerfile is located. As a result, the daemon cannot access folders outside of this build context. Hence, attempting to copy content from such external folders within a Dockerfile using COPY or ADD commands will fail as symlinks aren't followed beyond the build context.

Possible Solutions

Relocating the Dockerfile

One approach is to move the Dockerfile to a parent folder containing all necessary packages - for instance, positioning it one level above both the angular-project and shared-libs folders. However, this adjustment could complicate selecting the correct Dockerfile for building and ensuring only essential items are copied into the image.

Packaging the Local Package

Alternatively, you can pack the communication-lib using 

npm pack ..\shared-libs\communication-lib
and then reference the resulting tarball with 
npm install communication-lib.tgz
within the angular-project. More details can be found here. To prevent tracking the tarball, add it to your .gitignore, though remember to run npm pack on initial build and whenever updates occur in the shared library.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorrect Node.js version identified

I have been facing a challenge trying to integrate my projects developed with Spring and Angular using Maven. The issue arises with the Node.js version: [ERROR] Node.js version v8.11.3 detected. [ERROR] The Angular CLI requires a minimum Node.js version of ...

javanode.jsangularspringubuntu

Steer clear of duplicating template literal type entries when dealing with optional routes

My code includes a type called ExtractParams that extracts parameters from a URL string: type ExtractParams<Path extends string> = Path extends `${infer Start}(${infer Rest})` ? ExtractParams<Start> & Partial<ExtractParams<Rest>& ...

typescript

Learn the steps to access various file formats including doc, ppt, xlsx, pdf, jpg, and png using the Ionic native file opener

I am currently working on a Hybrid app using Ionic. My goal is to be able to open various types of files (doc, ppt, xlsx, pdf, jpg, png) from the device's internal or external storage using the Ionic Native File Opener plugin. However, I have only bee ...

angularfileionic3

Navigating in express

Here is the structure I am working with: server.ts routes/ index.ts homeRoute.ts In server.ts: let app = Express(); app.use(router); In routes/index.ts: const routes = Router(); export default function router() { routes.use('/home' ...

node.jstypescriptexpress

Windows Equivalent for package.json command scripts suggested for various procedures

I am currently utilizing parcel and would like to tidy up the .cache directory while also running my React frontend on port 3000 and backend on port 1234. Here are my start scripts. "scripts": { "test": "jest --watchAll", "start": "npm run build-c ...

npmnode-modulespackage.jsonparcel

Why does JSONResult automatically convert camelCase property names to lowercase?

Project Summary I am currently engaged in a project that involves: 1- Angular 6 2- Aspnet Core 2.1 Situation In my Angular code, I am making a GET request using the following snippet: let reqHeader = new HttpHeaders({ 'Content-Type': ' ...

jsonangulartypescript

Angular nested router causing an infinite loop

I am currently working on creating a basic webpage layout consisting of a header, menu, and content div. My goal is to have the content div populate with the corresponding page when a user clicks on a link in the menu. Currently, I just want this common la ...

angular

Exploring the use of TypeScript and Webpack to read non-JavaScript files in Node.js

I'm working on a backend NodeJS setup written in TypeScript that is using webpack for compilation. However, I encountered an error when trying to read a text file even though I confirmed that the file source/test.txt is being copied to the build fold ...

javascriptnode.jstypescriptwebpack

Is there a way to establish a boundary for the forEach function in TypeScript?

In my web-based game, I use the forEach command to retrieve the team players in the lobby. However, for a specific feature in my game, I need to extract the id of the first player from the opposing team. How can I modify my current code to achieve this? T ...

typescript

Rendering a component in React based on multiple conditions

Checking sessionStorage and another state variable before rendering a component is essential for my application. I want to avoid showing the same message multiple times within the same session. This is how I have implemented it: const addSession = (noteId: ...

reactjstypescriptsession-storage

Passing along the mouse event to the containing canvas element that utilizes chart.js

Recently, I created a custom tooltip for my chart.js chart by implementing a div that moves above the chart. While it works well, I noticed that the tooltip is capturing mouse events rather than propagating them to the parent element (the chart) for updati ...

javascripttypescriptvue.jschart.js

How do I execute an Angular application in IntelliJ IDEA 2017.1?

Is there a specific method I should use to run my Angular 2 application from the Intellij Idea run configuration menu? When using the terminal, I typically enter ng serve, but I'm unsure which option to choose from the list of configurations in Intel ...

angularintellij-idea

The OR operator in TypeORM allows for more flexibility in querying multiple conditions

Is there any OR operator in TypeORM that I missed in the documentation or source code? I'm attempting to conduct a simple search using a repository. db.getRepository(MyModel).find({ name : "john", lastName: "doe" }) I am awar ...

sqltypescriptoperatorstypeorm

The functionality is verified in Postman, however, it is not functioning properly when accessed from my client's end

I am working on a project where I have a button in my client's application that is supposed to delete a document from a MongoDB collection based on its ID. Here is the backend code for this functionality: index.js: router.post('/deletetask' ...

javascriptnode.jsangularexpressmongoose

Create a drop-down menu that dynamically populates options based on the selection from another drop-down menu using Angular

I am in the process of creating a form with 2 select dropdowns - one for countries and one for their respective states. The goal is to have a list of countries displayed, and when a country is selected, the second dropdown is populated with its main states ...

angularselectdropdownauto-populate

Troubles with Katex/ngx-markdown Display in Angular 16

In my Angular 16 application, I utilize the ngx-markdown library alongside Katex and other dependencies. A challenging situation arises when the backend (an LLM) responds with markdown text that conflicts with Katex delimiters during rendering. I attempte ...

angularangularjstypescriptmarkdownkatex

QTesting - creating tests for a library built on the Qt framework and unveiling its various classes

In my library, which I'll refer to as MyLib, there is a specific structure that dictates how certain symbols are exposed when using the library in an application. Here's a breakdown: mylib_global.h - This file determines whether a Q_DECL_IMPO ...

c++qtshared-librariesdllexportqtestlib

The compatibility between `webpack-streams` and `@types/webpack`

I encountered an issue with my gulpfile while building it with TypeScript. Everything was working fine until I included @types/webpack-stream. Suddenly, I started getting a series of errors that looked quite ugly: node_modules/@types/webpack-stream/index.d ...

typescriptwebpackwebpack-stream

Informing ng2-bootstrap's Timepicker of the invalidation

I have integrated ng2-bootstrap's timepicker component into my project. To enhance user experience, I created a custom validation function that is triggered by the ngModelChange() event. However, the timepicker component also comes with its own built- ...

angularjsangularng2-bootstrap

Issue with Angular checkboxes not triggering events when their labels are clicked

After following the instructions in this StackOverflow post, I successfully implemented a group checkbox component: Angular how to get the multiple checkbox value? Everything seems to be working fine except for one issue I encountered. The labels of the c ...

formsangularcheckbox