Pass to content
Leverage NPM for repetitive frontend development

Leverage NPM for repetitive frontend development

Managing code reuse between projects

Although websites can differ greatly between projects they often share a common configuration, JavaScript, SASS or other front end components.  Traditionally this is something that is often copied and pasted between projects, which works but when bugs arise you may find yourself going back and applying the same fixes to multiple instances of duplicated code.

What's the alternative?  Separate your common components or code out of your projects and centralize it in to separate, well organised GIT repositories.  Then publish your newly created projects on NPM so that you can install them via a simple command:

$ npm install @<username>/<packagename>

This will install your package to the node_modules folder and from there you can use SASS @imports and JavaScript module imports or requires to bring your common code into your project. When you fix a bug in the source package, you simply need to upgrade the package in your affected projects rather than having tonnes of duplicated code to fix.

You could create 1 project for all your front end code, that works but consider creating a new package for each new common component you can easily install just what you need for each project.

Publishing to NPM

NPM (Node Package Manager) is a public (and paid private) repository of mainly front-end code available through open-source licenses.  You can use NPM to install 3rd party components such as JavaScript frameworks, libraries and components. But you can also publish your own work to NPM as well.  

Note that you can publish your code to NPM for free, but it will be publically available and anyone can download and install your components.  If this is an issue for you, consider paying for an NPM private account where you can still leverage the ease of installing NPM packages but keeps your code private just for you. If you are publishing publically, ensure you have included a license that frees you of any responsibility for the code use.  If you need help choosing a license: choosealicense.com can help.

NPM makes this really easy to publish, first head over to www.npmjs.com and create a new account. Choose a relevant and easy to type username as this will be used to namespace your projects and you'll be typing it often enough.

With your new account created, head back to your terminal in the root of your project.  You'll want to ensure that any project you publish follows some general guidelines for publishing "high quality" packages.  Colin O'Dell presented a talk at the Confoo conference in 2019 about how to publish high quality packages for Composer, much of this is very relevant for publishing to NPM and can be used as a guideline.

Your package will need to have a package.json file with some basic information such as the name, description, version.

Once you have your package ready to be published, tag it with a version ex: v1.0.0.  Here's a link to understand semantic versioning:

$ git tag v1.0.0
$ git push origin v1.0.0

Next you'll need to log into NPM via the command line:

$ npm login

Alternatively, you can use an NPM auth token generated from your NPM account and supplied in an .npmrc file in the root of your project.  Consider the implications of including this file in your GIT repository though. You're auth token could be used to act on your behalf so consider ignoring this file.

Finally publish the package:

$ npm publish --public

You'll see NPM publishing your package.  Note you cannot re-publish the same version of your package, so you'll need to increment the version in the package.json file.  Its a good idea to tag your repository at the same time.

Installing or Updating your projects:

With your packages published, you can see them from your NPM account, they'll have a name like: 

@<username>/<projectname>
.  So all you need to do to install the package is:

$ npm install @<username>/<projectname>

Updating after changes is just as easy:

$ npm upgrade @<username>/<projectname>

Wrapping it up

With this setup you've encapsulated reusable components or code into separate projects and published them to NPM to be easily reused between projects. This may initially seem like a lot of work or overhead to reuse some code between projects, but if you commit yourself to this approach you'll find that creating, deploying and maintaining projects can get very easy. You can easily script installations or update as well to remove much of the maintenance work involved with deploying bug fixes to multiple site and you'll find your projects get more and more consistent and reliable over time.

Categories: Web Development HTML / CSS DevOps JavaScript SASS Tips

Leave a comment