Skip to content

Multiple Browserify Bundles

Jump to bottom Edit New page
Gilbert edited this page Apr 27, 2016 · 3 revisions

The most common case for multiple bundles is to separate the code for an admin interface from the code for a normal user interface.

This is actually very easy to do with browserify-middleware – it's even easy to share npm modules between bundles!

In your server/index.js:

var shared = ['alertify', 'mithril']
app.get('/assets/vendor.js', browserify(shared))

app.get('/assets/app-bundle.js',
  browserify('./client/app/index.js',   { external: shared }))

app.get('/assets/admin-bundle.js',
  browserify('./client/admin/index.js', { external: shared }))

That sets up three endpoints. To use them properly, include the correct ones in separate html files. For example...

client/public/index.html:

<html>
<head>
  <title>My App</title>
</head>
<body>

<div id="app"></div>

<script src="/assets/vendor.js"></script>
<script src="/assets/app-bundle.js"></script>

</body>
</html>

and client/public/admin.html:

<html>
<head>
  <title>My Admin App</title>
</head>
<body>

<div id="app"></div>

<script src="/assets/vendor.js"></script>
<script src="/assets/admin-bundle.js"></script> <!-- The only difference! -->

</body>
</html>

All you have to do now is serve either index.html or admin.html, depending on your user's access permissions.

Add a custom footer
Add a custom sidebar

Clone this wiki locally