76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
## Running in a browser
|
|
|
|
The bootstrap process is implemented in two steps that can be called
|
|
independently.
|
|
|
|
### Build
|
|
|
|
The first step loads all configuration files, merges values from additional
|
|
config files like `app.local.js` and produces a set of instructions
|
|
that can be used to boot the application.
|
|
|
|
These instructions must be included in the browser bundle together
|
|
with all configuration scripts from `models/` and `boot/`.
|
|
|
|
Don't worry, you don't have to understand these details.
|
|
Just call `boot.compileToBrowserify`, it will take care of everything for you.
|
|
|
|
```js
|
|
/*-- build file --*/
|
|
var browserify = require('browserify');
|
|
var boot = require('loopback-boot');
|
|
|
|
var b = browserify({
|
|
basedir: appDir,
|
|
});
|
|
|
|
// add the main application file
|
|
b.require('./app.js', { expose: 'loopback-app' });
|
|
|
|
// add boot instructions
|
|
boot.compileToBrowserify(appDir, b);
|
|
|
|
// create the bundle
|
|
var out = fs.createWriteStream('app.bundle.js');
|
|
b.bundle().pipe(out);
|
|
// handle out.on('error') and out.on('close')
|
|
```
|
|
|
|
### Run
|
|
|
|
In the browser, the main application file should call loopback-boot
|
|
to setup the loopback application by executing the instructions
|
|
contained in the browser bundle:
|
|
|
|
```js
|
|
/*-- app.js --*/
|
|
var loopback = require('loopback');
|
|
var boot = require('loopback-boot');
|
|
require('./models');
|
|
|
|
var app = module.exports = loopback();
|
|
boot(app);
|
|
```
|
|
|
|
The app object created above can be accessed via `require('loopback-app')`,
|
|
where `loopback-app` is the identifier used for the main app file in
|
|
the browserify build shown above.
|
|
|
|
Here is a simple example demonstrating the concept:
|
|
|
|
```xml
|
|
<script src="app.bundle.js"></script>
|
|
<script>
|
|
var app = require('loopback-app');
|
|
var User = app.models.User;
|
|
|
|
User.login({ email: 'test@example.com', password: '12345', function(err, res) {
|
|
if (err) {
|
|
console.error('Login failed: ', err);
|
|
} else {
|
|
console.log('Logged in.');
|
|
}
|
|
});
|
|
</script>
|
|
```
|