Share and use your server-side models in the client and the browser without exposing your models or breaking/bloating your bundle, while conserving your module's API surface area.
- Webpack (I'll get the browserify transform soon though...)
npm install isomorphine
You also need to load the isomorphine loader in your webpack.config.js file:
module.exports = {
entry: {
...
},
output: {
...
},
module: {
preLoaders: [
{
loaders: ['isomorphine']
}
]
},
plugins: [
...
]
};
- Check this for a full example.
Lets say you have a models folder that looks like this, but you can't require and use these modules on the browser, as the browser doesn't have access to the database layer (And you don't want to pollute the bundled file):
/models/index.js
/models/User/create.js
/models/User/delete.js
/models/Post/create.js
/client/index.js
/server/app.js
...
You can expose these objects in the browser and share the same API in an isomorphic fashion, by doing:
// In /models/index.js
var isomorphine = require('isomorphine');
module.exports = isomorphine.inject(__dirname);
You also need to add the router in your app's middleware:
// In /server/app.js
var express = require('express');
var isomorphine = require('isomorphine');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser);
app.use(isomorphine.router(express));
After doing that, you can use the models in the browser by doing:
// In /client/index.js
var User = require('../models').User;
User.create({ name: 'Hi there!' }, 'any params you want', function(err, user, anotherFetchedServersideVal) {
console.log('Got back! User is: ', user);
});
Or in the server, by doing:
// In /server/app.js
var User = require('../models').User;
User.create({ name: 'Hi there!' }, 'any params you want', function(err, user, anotherFetchedServersideVal) {
console.log('Got back! User is: ', user);
});
Your modules will not be exposed in the browser, nor they will get added to the bundled file.
You need to tell the browser the host and port of your isomorphine router (The default is localhost:3000
).
You can set those variables using webpack:
var webpack = require('webpack');
module.exports = {
entry: {
...
},
output: {
...
},
module: {
preLoaders: [
{
loaders: ['isomorphine']
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
ISOMORPHINE_HOST: '"myhost.com"',
ISOMORPHINE_PORT: '"8000"'
}
})
]
};
mocha test
Cheers.