How To Create a Shared JavaScript Class for Node.js and Browsers

Using ES6 modules to share code between frontend and backend

Photo by Ferenc Almasi on Unsplash

Ever since I started using Node.js for some backend applications a few years ago, I struggled with sharing code between Node and browser environments. The changes required to adapt the code to either environment are very small, which often led to situations where I had two almost identical versions of the same file.

A few weeks ago, I was planning a new project, which would have been almost impossible without sharing code between Node and the browser. Therefore, I decided to look into it again, and I was finally able to find a good solution to this problem.

A Shared JavaScript Class

Let’s start by creating a very simple shared class:

The class looks pretty much the same as a normal JavaScript class that can be used in a Node environment or browsers. The only important detail is the export keyword in front of the definition. You can also use the newer class syntax when creating the JavaScript class, but I am used to prototypes.

Using the Class in Node.js

Now let’s look at how we can use the shared class in a Node environment:

Again, this looks like normal Node.js code. Import the class, create an object, and call the print() function.

One thing worth noting here is the .mjs extension of the SharedClass.mjs and SharedClassNode.mjs files. This indicates that the files are ES6 modules. If you don’t want to name the files .mjs, you can also add “type”: “module” to your package.json file instead.

Using the Class in a Browser