NPM Link for Foundation

NPM Link

NPM Link (npm link) is a command in NPM that lets us create a symbolic link between multiple local git repos to make local development easier. Responsive Foundation is always included into another repo as a dependency instead of being built and deployed as its own repo the process to work on it is a bit different. To work on updates, bugs, etc to Foundation you need to load it into another repo such as Responsive Framework or Responsive Child Starter. That will enable you to compile Foundation into the stylesheet of that theme (Framework, Child Starter, Child Theme, etc).

If you are making updates to Foundation you need to be able to import those changes into a local copy of Framework so you can test and evaluate the changes without having to publish those changes in Foundation to Github and create a new release or update an NPM Package. NPM Link helps solve that by letting you link your working local folder and checked out branch of Foundation to your project (Framework, Child Starter, a child theme, etc). So your project will load Foundation's files from your local git repo of it instead of being downloaded and installing Foundation into the project's local node_modules folder.

It is important to note a few key points about how NPM link works before using it.

• It is specific to each version of node installed and in use on your machine. So if linking two repos together both of them must be using the same version of node in those folders. When using NVM to maintain and switch between multiple node versions this means in the folder (terminal window) for each local repo you'll need to make sure you've used nvm use xx command to switch to the same version of node. That way the origin repo and the target repo can "see" each other. The symbolic link that is created is stored in a location specific to that version of node.
• You must first go into the origin repo, in our case responsive-foundation and run npm link. This sets up the symbolic link to this folder in that more global node location on your machine. Only after doing that can you then make use of the symbolic link within another repo.
• npm link behaves differently in NPM versions 7+. See: https://github.com/npm/cli/issues/2339. Specifically the way dependencies of a linked package such as responsive-foundation are handled is different and breaks the build. The dependencies are not installed for responsive-foundation. In fact it will actually remove dependencies for some unknown reason that had been previously installed with npm install. In newer versions of NPM this issue has been address with an extra step that must be taken outlined below.

For Node versions less than 16 and Responsive Foundation versions less than 5.0

• Responsive Foundation & Framework v2 were developed against node 10. The NVMRC file in Framework 2x specifies node 10.
• In Responsive Foundation create a new branch from an existing tag such as 3.2.4 (you'll need to use git on the command line)
• In Responsive Framework 2x create a new branch the develop branch to work in.
• In both repos use nvm use 10 to set node to v10.
• In the terminal window for your responsive-foundation repo run npm link to create the symbolic link
• In the terminal window for responsive-framework repo run npm install, and then npm link responsive-foundation to replace the downloaded version of responsive-foundation in the node_modules folder with a symbolink link pointing to your local git repo for responsive-foundation.
• Make a change to some SCSS files in responsive-foundation and run grunt build in responsive-framework to confirm the changes are coming in. You can also look at the symbolic link directly in the node_modules folder to confirm it is linked up.

For Node versions greater than 16 and/or NPM 7+ and Responsive Foundation versions above 5.0

Use Yalc instead of NPM link for Node 16+