{"id":1588,"date":"2019-02-22T11:41:40","date_gmt":"2019-02-22T10:41:40","guid":{"rendered":"https:\/\/www.smsapi.com\/blog\/?p=1588"},"modified":"2021-09-16T15:05:10","modified_gmt":"2021-09-16T13:05:10","slug":"migrating-away-bower","status":"publish","type":"post","link":"https:\/\/www.smsapi.com\/blog\/migrating-away-bower\/","title":{"rendered":"Migrating Away From Bower"},"content":{"rendered":"\n<p><strong>Why? In the long-living project, I was working on, the portion of frontend javascript code was dependent on a mix of bower packages and node modules that were concatenated into a bundle using grunt. We decided to migrate away from Bower as it was an unneeded dependency. It introduced a potential security hole (which turned out to be true, see tweet below) and added complexity to the overall build process.<\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<div style=\"display: flex; justify-content: center;\">\n<blockquote class=\"twitter-tweet\" data-lang=\"pl\"><p dir=\"ltr\" lang=\"en\">All Bower versions &lt; 1.8.8 are vulnerable and someone could hack your computer if you won&#8217;t update. Please npm install -g bower and also update your docker images if you use them<\/p><p>\u2014 Bower (@bower) <a href=\"https:\/\/twitter.com\/bower\/status\/1096394324101787654?ref_src=twsrc%5Etfw\">15 lutego 2019<\/a><\/p><\/blockquote>\n<p><script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<\/div>\n\n\n\n<p>Since the usage was entirely custom and aimed at direct files from bower packages, I decided not to use any automated tool as I was not confident in whether I would break the app. Low test coverage of subject features didn&#8217;t help.<\/p>\n\n\n\n<p>Here are a few gotchas that made transition difficult but allowed me to proceed with higher confidence once realised.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overall process<\/h2>\n\n\n\n<p>I was moving packages from bower.json to package.json one by one. On each package, I searched if it was used and verified if the versions available on <g class=\"gr_ gr_6 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"6\" data-gr-id=\"6\">npm<\/g> matched. Then I diffed the resulting bundle from the initial bundle to see if things were missing\/changed.<\/p>\n\n\n\n<p>As we were targeting the relative file path, it seemed like the same version of the same package would have the same folder structure. It turned out that sometimes the library was available in \/build directory in the bower, while in the node module, the path was \/lib or something different. This, coupled with the fact that the grunt\/concat and grunt\/copy was not throwing an error if the file in the path was missing, provided me with some doubt.<\/p>\n\n\n<div class=\"infobox infobox--attention post-content--full-width\">\n  <div class=\"infobox__icon\">\n    <img decoding=\"async\" src=\"https:\/\/www.smsapi.com\/blog\/wp-content\/themes\/smsapi-blog-2021\/assets\/icons\/exclamation.svg\">\n  <\/div>\n  <div class=\"infobox__title\">\n    <h4>To sum up<\/h4>\n  <\/div>\n  <div class=\"infobox__content\">\n     Make sure to check where the dist file is located. \n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">A package might not have the same version<\/h2>\n\n\n\n<p>Since bower and <g class=\"gr_ gr_7 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"7\" data-gr-id=\"7\">npm<\/g> are separate registries, the packages they have may not reflect one to one. I wasn&#8217;t sure that the different packages didn&#8217;t introduce breaking changes, and I didn&#8217;t want to risk it &#8211; I was migrating away from bower, not updating dependencies. The solution I came up with was simple but introduced a small issue.<\/p>\n\n\n\n<p>I copied the required files and saved them into the repository, then referenced them in grunt tasks. This allowed me to keep on using the same version of the package. However, this introduces a <g class=\"gr_ gr_21 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep\" id=\"21\" data-gr-id=\"21\">few<\/g> issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><g class=\"gr_ gr_3 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep\" id=\"3\" data-gr-id=\"3\">the repository<\/g> is getting <g class=\"gr_ gr_4 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar only-ins replaceWithoutSep\" id=\"4\" data-gr-id=\"4\">bigger<\/g>,<\/li><li>the package is not reflected in package.json, risking it&#8217;s forgotten during refactoring.<\/li><\/ul>\n\n\n\n<p>I still believe that the tradeoff is still worth it.<\/p>\n\n\n\n<p>As a side note &#8211; be sure only to copy files you&#8217;ll need and leave out the source, tests, and unnecessary dependencies. I would still recommend keeping package.json so that the future developer that looks at the files knows what it is.<\/p>\n\n\n<div class=\"infobox infobox--attention post-content--full-width\">\n  <div class=\"infobox__icon\">\n    <img decoding=\"async\" src=\"https:\/\/www.smsapi.com\/blog\/wp-content\/themes\/smsapi-blog-2021\/assets\/icons\/exclamation.svg\">\n  <\/div>\n  <div class=\"infobox__title\">\n    <h4>To sum up<\/h4>\n  <\/div>\n  <div class=\"infobox__content\">\n     Copy only what you need and reference it properly.\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">You might not need it<\/h2>\n\n\n\n<p>It turned out that about 3\/4 dependencies <span style=\"background-color: rgba(30, 30, 30, 0.2);\">did not refer<\/span><g class=\"gr_ gr_5 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace\" id=\"5\" data-gr-id=\"5\">ence<\/g> in any place in the project, so it was safe to delete. Just looking at the build tasks in grunt, I saw if it&#8217;s safe to delete a dependency.<\/p>\n\n\n<div class=\"infobox infobox--attention post-content--full-width\">\n  <div class=\"infobox__icon\">\n    <img decoding=\"async\" src=\"https:\/\/www.smsapi.com\/blog\/wp-content\/themes\/smsapi-blog-2021\/assets\/icons\/exclamation.svg\">\n  <\/div>\n  <div class=\"infobox__title\">\n    <h4>To sum up<\/h4>\n  <\/div>\n  <div class=\"infobox__content\">\n     If possible &#8211; delete unneeded dependencies.\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Migrating away from bower can be easy and fast if you&#8217;re careful. Keep in mind the gotchas, and you should be fine. Verify the bundle after moving\/removing each dependency to ensure that you&#8217;re not silently breaking anything.<\/p>\n\n\n\n<p>Author: J\u00f3zef Piecyk<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why? In the long-living project, I was working on, the portion of frontend javascript code was dependent on a mix of bower packages and node modules that were concatenated into a bundle using grunt. We decided to migrate away from Bower as it was an unneeded dependency. It introduced a potential security hole (which turned [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":1600,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[20],"class_list":["post-1588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-english"],"_links":{"self":[{"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/posts\/1588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/comments?post=1588"}],"version-history":[{"count":16,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/posts\/1588\/revisions"}],"predecessor-version":[{"id":4386,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/posts\/1588\/revisions\/4386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/media\/1600"}],"wp:attachment":[{"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/media?parent=1588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/categories?post=1588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.smsapi.com\/blog\/wp-json\/wp\/v2\/tags?post=1588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}