Sharing code between AngularJS and Nodejs

Question

What is the best way of sharing code between frontend and backend using javascript, specifically saying between nodejs and angularjs?

Thing is that we are using same enums and constant values such as error codes in both backend and frontend. Right now we just copy&paste each change to both platform which isn't a good solution. There are also some services that could be shared.

I have seen libraries such as browserify; but thats not exactly what I am looking for. I am looking for a solution similar to maven dependency in java. In java, libraries can be shared easily using maven, whereas I can't find a similar way of doing that in javascript. Is there a way to isolate these services and give them as dependency to nodejs using npm and to angularjs using bower independently? Or what are the ways for sharing the same code between frontend and backend?

Answer 1

There are several ways to do this. The first is that you can make a new package which is required via bower for the front-end code and via npm for the backend code. I have several packages published to both systems.

Install with Bower -- information on how to install modules that aren't in the registry

NPM Install docs -- all the ways to install with npm (private github with auth: git+ssh://[email protected]/[org]/[repo])

Just create a new module with your shared data and install it using both package managers. Both of them allow you to install an unpublished module so if it's private data you can keep it as such.

If your front end requires require.js you can use something like amdefine to make it available to your node backend, or if you're just using legacy window code you can do something like:

var mydata = {};

if(typeof window !== 'undefined'){
    window.mydata = mydata;
} else {
     module.exports = mydata;
}

If you are sharing a lot of data though I highly recommend looking into browserify to write your entire codebase in commonjs and using browserify to generate your client bundle. There is a laundry list of resources about using browserify, including stuff on how to use browserify and angular together

Answer 2

Disclaimer - I'm still developing this approach and it's a little manual. I did this using npm, an npm cli called pac, and bower. Pac let's me avoid using npm install in production by keeping the modules as .tgz files (committed to project in source control). With pac, when someone checks out the node project, they run pac install then npm rebuild instead of npm install.

My shared code is kept in a directory (my-module). It has both package.json and a bower.json.

My consuming node app has a package.json dependency for: "my-module" : "x.y.z"

My consuming client has a bower.json dependency for: "my-module" : "../relative/path/to/my-module"

When I make updates to my-module, I update my node app by:

1. Making a tar.gz of the contents of my-module: tar -czvf my-module.tar.gz -C my-module
2. Removing the old version from the node app's node_modules
3. Rerunning npm install path/to/my-module-tar.gz
4. Rerunning pac (this makes a .tgz of node_modules/my-module)
5. Committing the updated pac .modules/my-module.tgz

I update my client by:

1. Removing the old client/bower_components/my-module
2. Rerunning bower install or bower update