DEV Community: Rio Chandra

DX: bind mounting node_modules are not work properly

Rio Chandra — Tue, 13 Feb 2024 08:11:17 +0000

Overview

Nodejs

Nodejs have couple of file to look at :

package.json
node_modules

These file are the location of package that used at nodejs application

Docker

Docker is a platform designed to help developers build, share, and run modern applications https://hub.docker.com

I will not explain more here.

Problem

Development using docker

Usually we develop nodejs app using docker and use Docker Volume to able bind directory host to container directly, so we able to update and restart the app whenever we do development. But there is some problem, We actually can't do that because node_modules [at host] are not sync with node_modules [at container].

This is problem since many years, I as developer always face this problem every year. So I will wrap all resource here to make you easy to track all discussion.

Report

Is there a way that is not too impractical to Dockerize a Node.js app without mounting the node_modules folder of your host machine to the container when developing ?

stackoverflow question by Ewaren

Ewaren (the person who ask that) explain what we expect when using nodejs + docker, this is what he (also we as developer) expected :

able to setup dev environtment on new machine without do manually install
The app easy to run only use docker compose up
The runtime environtment is consistent across all machines.

Thanks to him, he explain so much and give some "good solution" to implement, but each solution have plus and minus. You can follow up some solution at here. Here is list of his solution.

mount all files to host folder and run npm install first before running the docker compose. This is classic solution, but we do not want this because not plassform-spesific.
mounta all files to host folder and mount node_modules container to anonymous volume. This will prevent node_modules collide with host folder. But we have to re-build the container everytime package added.
mount all files to named volumes. This is clean, but we can't do development at host, but use vscode container instead.

Node docker repository

Finally !!, someone make template to easy to start !. Node.js + Docker for Showing Good Defaults in Using Node.js with Docker.

This repository have a lot feature !, dev as close to prod as you can, edit locally while code runs in container, production-minded features, and more.

They using dirty solution, but valid. They do different folder node_modules. node_modules container will saved in container at /opt/node_app and mount project folder host to /opt/node_app/app (sub folder). This make 2 different node_modules, they claim we are still able to development and restart app like usual.

But, when I run it only using docker compose up (of course use sudo for linux). folder node_modules are empty !. I don't know what happen.

Someone have similar problem, Bind mountings not working as expected #66.

Bread Fisher have 2 solution. He also mention this from his docker for node.js course

Solution 1:

Don't move node_modules up a directory. Leave everything in the standard single dir and do a single bind-mount in the compose file.
Before doing a docker-compose up the first time, we'll need to do a docker-compose run npm install to see the node_modules that are bind-mounted to the host. This is the main disadvantage of this Solution.
This also means on macOS/Windows that you can't "dual develop" by sometimes using native host Node.js and sometimes using Docker-based Node.js because the binaries in node_modules (if you have them) would be incompatible. This is a disadvantage if you don't always use docker to run this code.

Solution 2:

Similar to this repo's setup, you would move node_modules and package*.json up a level in the file path, so they can be separated from host node_modules. This adds complexity to the setup but also provides the flexibility of developing with a different node_modules on the host than what is in the container.

Ok, there is no different with early solution that we found. Similar solution, only this solution that we can rely on.

So, basically you have to Install the package on host manually, to make package are sync with container system, we have to use docker compose exec or docker compose run to run the npm install.

## use exec when container already run
sudo docker compose exec node npm i

## use run before run container
sudo docker compose run node npm i

You see node at that script, that refer to name of service in docker-compose.yml file.

He also mention at other issue

docker compose exec -w /opt/node_app node npm install

Conclusion

Not good ending.

There is no solid solution for node.js environtment to fit with our expectation, you have to choose some method and face the fate. You have to install the package first !.

Thanks.

Store Persist State to URL Nuxt Js

Rio Chandra — Sun, 10 Oct 2021 11:23:47 +0000

Multi-tenancy become more complex problem for authentication and authorization. Nuxt js as front-end app need to adapte to this problem

The scenario :

Nuxt Js is a front-end App,
a user can login as company 1 or company 2. each company have an id.
when hit an API, front-end must send company id

The problem is, how to make Front-end store company id and can be used when Request API. I have some approach to store company id but only 1 way to solve this problem.

Token

You can store company id on token, this is good from API perspective immediately know user information, but you need to recall API to re-create token if user change company id, which is this is not ideal when user switch to other company id periodically

Localstorage

Localstorage is deadly simple to store information in browser client. we can store it to localstorage and use it when it needed. But, the problem is when we want to use on Server Side. Since Nuxt Js Support Server Side Rendering, nuxt cannot read localstorage because localstorage only accessable on client side.

State Management (Vuex)

State management solve problem localstorage to access from Server Side and accessable from any page on website. But, the problem is state management will be reset when user refresh the page.

Param URL

We can store some variable on Parameter URL and use the param when it needed, it persistence and user know 'where are they' only from URL.

I see this is the absolute solution to store company id or other variable. Google do this for a long time, when you logged in to google with different account, google
store state current user on query URL

How to Google store user logged in on URLHow to Google store user logged in on URL (Gmail.com)Quite a nice idea. But we found new problem, we should add query or param to every <a href /> tags. Every programmer never do it manually. Lets create Middleware to solve this problem

Automatically Query Url Update Middleware Nuxt (AQUUMN)
I have no idea about this technique name
We need something to update query URL every change route, we can do this in Middleware that provide by Nuxt Js (because we use Nuxt Js). We will store the company id in State Management and URL, you got the point right ?. We will create middleware with flow like this :
Whenever User change Route, get the Company id from state management
Redirect user to new URL that Query company id included
Whenever browser refresh the page, state management will be reset and we need to restore from URL query company id

Now we have persist parameter user's company id on URL, no matter what URL requested because middleware will put Query company id to URL.
Middleware Code
First of all, we need to create state management for company id. In this case I use Vuex. This is companyStore.js

export const state = () => ({
  companyId: null
})
export const mutations = {
  setCompanyId(state:any, companyId:string){
    state.companyId = labId
  }
}
Create new middleware called authApp.ts in folder middleware (if there is no folder middleware, create one).
import { Context } from "@nuxt/types"
export const companyId = "companyId"
/**
* this middleware make apps to require query `companyId`
* ex: /home/?companyId=123-24123-4123
*/
export default function(context:Context){
  let excludeRoute = [
    "/login",
    "/login/app"
  ]
  let companyIdQuery = context.query[companyId]
  let companyIdStore = context.store.state.companyStore[companyId]
  if(!companyIdQuery){
    if(companyIdStore){
      return context.redirect(context.route.path + "?companyId=" +     companyIdStore)
      }
    if(!excludeRoute.includes(context.route.path)){
      return context.redirect('/login/app');
    }
  }
  else {
  if(!companyIdStore){
    context.store.commit('companyStore/setcompanyId', companyIdQuery)
  } else {
    if(companyIdStore !== companyIdQuery){
      context.store.commit('companyStore/setcompanyId', companyIdQuery)
      }
    }
  }
}

I add array excludeRoute as a route redirect if company id is null, user require to select their current company that selected on the app.
lastly, register this middleware to nuxt.config.js

router: {
  middleware: ['authApp', ...]
},

You can get the company id from $route or $store

let companyIdStore = this.$store.state.companyStore.companyId
let companyIdRoute = this.$route.query.companyId

Finish
That's it how I solve this problem, I didn't found another article write about Nuxt to create persistence state like this, so I create one. Hope this help you.