17

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?

Improve this question
3
  • browserify allows you to use common js modules in the client. it is nothing like copy and pasting. Commented Jul 31, 2014 at 22:19
  • I feel like this can be solved with RequireJS if you wanted something simpler than browserify. And I agree with @tkone, browserify isn't copy/pasting. Sure, it's replicating your common lib into another file, but that would be equivalent to saying compiling code is copy/pasting the source into binaries. Commented Jul 31, 2014 at 22:40
  • @tony not even replicating. it's that ACTUAL file. require is shimmed into the browser, allowing the same exact code to be used. it even does the familiar function(__dirname,... wrapping that node does (because it lets node do it for you!). Commented Aug 1, 2014 at 13:44

2 Answers 2

Reset to default
10

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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
Improve this answer

1 Comment

Thanks for sharing your experiencie, is very useful to me :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.