I'm trying to set up a visual recognition app using the Watson visual recognition api. To do this I started by downloading watson-developer-cloud and I put it in my node_modules folder, which is next to my index.html and api_request.js.
This is my api_request.js file:
var watson = require('./node_modules/watson-developer-cloud');
var visual_recognition = watson.visual_recognition({
username: '*********',
password: '*********',
version: 'v2-beta',
version_date: '2015-12-02'
});
visual_recognition.listClassifiers({},
function(err, response) {
if (err){
console.log(err);
}
else {
console.log(JSON.stringify(response, null, 2));
}
}
);
It is taken directly from the visual recognition api documentation. I ran this file in the terminal and it provided the desired output which is a list of visual recognition classifiers. However as it has node.js functions I decided to use browserify to allow it to run in the browser. I installed browserify and built bundle.js out of api_request.js in the same directory as the api_request.js and index.html file.
Once index.html was linked to bundle.js I opened it in the browser and it didn't have any issues with node.js functions.
However an error occurred when a file that was in watson-developer-cloud couldn't find another file that was inside watson-developer-cloud. To be specific index.js couldn't find v2-beta (I didn't edit the watson-developer-cloud files). What I find strange is that when I ran api_request.js in the terminal none of the watson-developer-cloud files had any problems, but once I used browserify, bundle.js logged the error that index.js couldn't find v2-beta.
"build": "browserify api_request.js -o bundle.js"
^that is the script I used to build bundle.js. The only thing I can think could be causing this error is browserify. Is there something else that could be causing this?
Unfortunately, most of the IBM Watson APIs do not support CORS and thus cannot be used from the browser. Due to this fact, the watson-developer-cloud npm module was not written with browserify in mind and loads some files from disk programmatically. Browserify cannot handle this - it has to know which files to load from disk ahead of time time. You could probably work around it by adding --require node_modules/watson-developer-cloud/services/visual_recognition/v1.js to your browserify command, but that would just leave you with the first issue: no CORS support.
So, with all of that out of the way, the current recommended solution is to create an endpoint in your server that forwards requests from the browser to the watson services. I know it's an extra step, but it's the best option available right now. https://github.com/watson-developer-cloud/visual-recognition-nodejs shows a good example of this.
A future update the Watson platform may enable CORS across the board, and if that happens, we'll be sure to update the npm module to play nice with browserify.