Before developing redux-beacon-slack (a way of hooking onto Redux actions to send notifications to a Slack), we hadn’t developed a Node module from the ground up.
This module, like most that are on NPM, aren’t developed independently. They’re part of a larger application, where the developer has identified a bit of code that’s reusable – and would make a good contribution to open-source-world. In this case, you want to be able to work on your new module separately, but have it updated in real time into your existing application – otherwise, how will you know if it’s working? Unit tests, I know, but not here…
Normally, this is the use case for npm link. However, link doesn’t play nicely with Webpack. webpack-link addresses this; however, enter a further complication: Docker. We like to develop locally in Docker, as it close-to-guarantees that our local development environments will be the same as that on the server.
Typically, in developing an app, we bind-mount our JS working directory into a Node container, e.g. in our docker-compose.yml file, we might have:
volumes: - .:/usr/src/app
This means that if we do npm link redux-beacon-slack in our project, the symlink will be correct on our Mac (e.g. ./node_modules/redux-beacon-slack > /Users/shankie/projects/redux-beacon-slack), but this symlink won’t resolve inside our Node container, which of course has a distinct filesystem, except where we’ve bind-mounted the /usr/src/app directory.
So, instead of using npm link, we use Docker’s bind mounting to accomplish what we need.
First, add a new node_modules directory to our Dockerfile. This will contain only our linked package.
RUN mkdir -p /usr/src/node_modules ENV PATH /usr/src/node_modules/.bin:$PATH
The second command adds the new node_modules directory to the PATH so that Node also considers our new path executable.
Then, in our docker-compose.yml file (or -v flag if you’re using docker run), we bind-mount a path from our filesystem into our newly created path:
volumes: - .:/usr/src/app - ../redux-beacon-slack:/usr/src/node_modules/redux-beacon-slack
Yay! We don’t now have to do anything with npm link or change our webpack configuration. Simply develop here and then publish the package when you’re done.