Add packages to custom @frontend_components or lib folder using yarns

Question

When migrated from bower to yarn and ran the command

yarn install

yarn created @bower_components folder and all the bower/front-end components were add inside this folder ../node_modules/@bower_components

"dependencies": {
...
"@bower_components/bootstrap": "twbs/bootstrap#^3.3.7",
"@bower_components/jquery": "jquery/jquery-dist#^3.1.1",
"@bower_components/lodash": "lodash/lodash#^4.17.12",
"@bower_components/moment": "moment/moment#^2.19.1",
... }

If, I need to create migrate from @bower_components to @frontend_components or add to public/lib folder. How do I do it?

yarn --cwd /public/lib add lodash

Answer 1

The way bower-away works is by creating a symlink from /bower_components to /node_modules/@bower_componets:

bower-away gets away with this by resolving all dependencies with Bower, and adding all of them flattened to package.json Then, your package.json file with contain bower dependencies as:

{
  "dependencies": { 
     "@bower_components/bootstrap": "twbs/bootstrap#^3.3.7", 
     "@bower_components/jquery": "jquery/jquery-dist#^3.1.1", 
     "@bower_components/lodash": "lodash/lodash#^4.17.12", 
     "@bower_components/moment": "moment/moment#^2.19.1",
  }
}

This will work in most scenarios. But in your case, the symlink is not working. I ran the same issue and my fix was to modify my express server and map /bower_components front-end resource into /node_modules/@bower_components backend resource with the following line:

New

app.use("/bower_components", express.static(path.join(__dirname, "/node_modules/@bower_components")));

Original

 //app.use("/bower_components", express.static(path.join(__dirname, "/bower_components")));

If this is not your case, you may need to manually update front-end references to new node_modules/@bower_components folder just as advised as the original author: Adam Stankiewicz

But initially, the only change required in code is to change any reference to bower_components with node_modules/@bower_components (though you can link it somewhere else in postinstall script).

Answer 2

The workaround which I implemented to resolve this issue was by introducing a simple script and updating the package.json with a new key.

Under package.json (for all the UI related dependencies needed to work with the front-end)

...
...
"scripts": {
    "postinstall": "node migrateUI.js"
  },
...
"uidependencies": {
...
"bootstrap": "^3.3.7"
"jquery": "^3.1.1",
"lodash": "*",
"moment": "^2.19.1",
...
},
"dependencies": {
....
"bootstrap": "^3.3.7"
"jquery": "^3.1.1",
"lodash": "*",
"moment": "^2.19.1",
....
}

migrateUI.js

const uipackage = require('./package.json');
const packageName = Object.keys(uipackage.uidependencies);
const dir = 'public/libs';

 //if the folder already exists, it ignores else creates.
if (!fs.existsSync(dir)) {
  fs.mkdirSync(dir);
}

for (let i = 0; i < packageName.length; i++) {
  const element = packageName[i];
  const source = path.resolve('node_modules/' + element);
  const target = path.resolve('public/libs/' + element); //custom lib folder to save all UI dependencies
  if (!fs.existsSync(target)) {
    fs.symlinkSync(source, target, 'dir', (err) => {
      if (err && err.code !== 'EEXIST') {
        console.log('Error creating dependecny symlink - ', err);
      } else {
        console.log('Symlink for dependency created');
      }
    });
  }
}