Angular development Dockerfile does not refresh node_modules

I am currently utilizing the following Dockerfile to facilitate the development of an Angular project:

FROM node:18-alpine

WORKDIR /code
COPY package*.json /code/
RUN npm ci --quiet

The process is initiated using docker compose. I have my code directory mounted as a volume, enabling the development server within the container to detect any modifications made and maintain live updates:

version: "3"

services:
  ui:
    build: ./PathOnHostWithProjectRepo
    command: sh -c "npm start"
    ports:
      - 4200:4200
    volumes:
      - ./PathOnHostWithProjectRepo:/code
      - node_modules:/code/node_modules

volumes:
  node_modules:

The node_modules is established upon image creation and should only be updated if changes are made to my package.json file. However, after adding a new dependency to package.json today, the new dependency is not being installed within the volume. I have attempted various solutions but without success. These include running docker compose down, executing docker system prune -a -f, and performing a rebuild. Each time the container restarts, it encounters an error indicating that the newly added dependency cannot be found. Upon inspecting the node_modules directory within the container, the library appears to be missing. Notably, the package and imports are correct as evidenced by their presence on my host machine when running npm install locally (without Docker).

Answer №1

By configuring your setup in this way, Docker will always disregard any changes made to your package.json file, ensuring that your node_modules remain untouched. This directory is treated as user data that is off-limits for modifications.

In the scenario you've presented, Docker may not even be necessary. Installing Node directly and utilizing OS package managers like Debian/Ubuntu APT or MacOS Homebrew should suffice, as they typically offer prepackaged versions of Node. By working with Node directly, you can avoid encountering issues like the one described; everything should function smoothly.

If using Docker is unavoidable, a simple method involves organizing all application code into a subdirectory. This approach allows you to only mount the subdirectory containing the code, leaving the image's node_volumes directory intact.

$ ls -F
Dockerfile
docker-compose.yml
node_modules/
package.json
package-lock.json
src/
# Dockerfile
FROM node:lts
WORKDIR /code
COPY package*.json ./
RUN npm ci
COPY src/ ./src/
# RUN npm build
CMD ["npm", "start"]
# docker-compose.yml
version: '3.8'
services:
  ui:
    build: .
    ports:
      - '4200:4200'
    volumes:
      - ./src:/code/src

Mounting only the src subdirectory eliminates the need to store node_modules in a named volume (or an anonymous one). If changes are made to your package.json file, you'll have to rerun docker-compose build, but since you're directly utilizing the library tree in your image, it will indeed be updated.

When deploying this image, ensure to remove the volumes: block during local integration testing. This ensures that you're running the exact image intended for deployment, rather than a blend of an image and potentially altered local code.

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

"Encountering errors during npm installation due to a failed preinstall

Having identified security vulnerabilities for knexnest > knex > minimist, I encountered an issue where the minimist version did not update using npm audit fix or a simple npm update. Following the steps outlined in this informative article resolved the vu ...

Begin by running the command to start a local http-server

After cloning angular seed, I found that it is using node's http-server and functioning flawlessly with the specified configuration. To start the server, simply run: npm start (from the root of the project) The necessary configuration can be found ...

Establishing the upstream branch tracking is essential after relocating and re-adding the remote URL in simple-git

In this particular section of code, the task at hand is to verify local repository existence and synchronize changes from a remote repository using simple-git. A problem I encountered involved JWT token expiration after 24 hours, which was resolved by remo ...

npm encountered an abrupt conclusion of JSON input during parsing near "serify":"latest","cha"

After uninstalling angular-cli yesterday to update to @angular/cli, I encountered an error while trying to install @angular/cli: Received an unexpected end of JSON input while parsing near '...serify":"latest","cha' Even after attempting to c ...

Tips for resolving ERESOLVE issues in EAS build when using native-base and Expo

I am facing an issue with my package.json file. The main goal is to use Expo 44 with native-base (version ^3.0.0), but I cannot seem to get this combination to work. I have looked online for recommended Expo versions compatible with native-base, but could ...

How to Share Angular Modules Between Two Projects with Ivy Compilation Necessity

Query: I am faced with the challenge of sharing common modules between two Angular projects, one of which requires full Ivy compilation to function properly. To manage these shared resources, we have set up a private GitHub NPM repository. However, becaus ...

"Exploring ways to create and save content in a different root folder within a nodejs project using my

In the process of developing my npm module, I am faced with the task of creating or writing a file in either the root directory or a specific folder within the nodejs project that will be utilizing my module. This includes users who will be implementing my ...

Installing npm results in an excessive number of dependencies being added to the node_modules folder

Lately, I've been encountering an issue where running npm install results in numerous extra node modules being added beyond what is specified in package.json. One explanation suggests that this behavior is a new feature of npm 3, known as dependency ...

Using Jupyter Notebook to Connect with Google Cloud API

Running Jupyter notebooks locally through Docker (jupyter/scipy-notebook) has been my go-to method. Typically, I have stored API credentials in the .env file located with the Dockerfile. However, as I dive into using Google Cloud, I am being provided priv ...

The yarn cache occupies a significant amount of storage

Just a few minutes ago, I was completely shocked to discover that the Yarn cache located at /Users/user/Library/Caches/Yarn is consuming over 50GB of my precious disk space. Why are there so many packages stored on my computer? While I appreciate Yarn&apos ...

Error occurs when running npm install command in Grunt task using Node.js child_process spawn function

Having an issue with a custom Grunt task I'm working on. My goal is to run npm install, then bower install, followed by a grunt hub target for multiple sub-projects. The problem arises when using child_process. If I uncomment the npm install spawn co ...

Evaluate software on a local environment for both Google Cloud and Azure

Is there a method to locally test applications designed for Google Cloud or Azure on a computer, comparable to the Localstack Docker image used for AWS? Your help is greatly appreciated! ...

Using npm in Visual Studio 2015 for managing numerous projects

One of my solutions consists of three web projects, and I want to use a package.json in two of them ('Site' and 'SatelliteSite'). These are ASP.NET 4 projects where I'm integrating npm/gulp/bower. It's working well for one pro ...

There is no compatible version available for @typescript-eslint/[email protected]

I am encountering the following issue when trying to create a new app or running npm install. I need assistance in resolving this error. I have also attempted using the command below but the error persists. npm install -g create-react-ap Installing packa ...

The command "npm run <script-name>" seems to be malfunctioning

I have set up scripts in my package.json as follows: "scripts": { "build": "webpack", "start": "webpack-dev-server --inline --hot --host 0.0.0.0" }, But I am encountering issues when trying to execute them. Whenever I run npm run start or npm run bui ...

The Dockerfile for Next.js is encountering a failure during the build process due to the absence of the

I've encountered a peculiar situation where the same Dockerfile and CodeBuild project configuration is causing an error in production but not in development. FROM public.ecr.aws/docker/library/node:14-alpine AS deps WORKDIR /app COPY package*.json yar ...

Creating an NPM package using Visual Studio 2017: A Step-by-Step Guide

I enjoy developing and publishing NPM packages using Visual Studio 2017. My preferred method is using TypeScript to generate the JavaScript files. Which project template would be best suited for this particular project? ...

In what situations should you avoid using the shrinkwrap & lock files generated by NPM?

Recent updates in NPM have made it possible for automatic generation of package-lock.json files, streamlining the process of creating reproducible builds for team developers. Previously, manual intervention was required to produce a npm-shrinkwrap.json fil ...

Upon attempting to install "expo-cli" using the command "npm install -g expo-cli," I encountered a series of vulnerabilities. After running "npm audit fix," I was faced with even more errors

Recently, I switched to a new laptop with Windows 11 and have been encountering errors while working on node.js and react native. For example, when I ran npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b657b664b3 ...

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

At the instructions available in the read.me of https://github.com/react-community/create-react-native-app Upon selecting my template using the expo init command, I encountered the following error: Cannot find module 'minizlib' Error: Cannot fi ...