Leverage NPM for repetitive frontend development
Managing code reuse between projects
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>
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
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.