Integration

You can install Substance via npm and use it with a build tool of your choice.

npm install substance

Let's assume the following project structure.

app - application setup (html, css, js)
lib - reusable library code of your editor
node_modules - dependencies such as substance and font-awesome

Bundling

Now we want to create a distribution (bundle), that combines all those source files into dist folder that can be hosted on a webserver.

dist/index.html - HTML page
dist/app.css - bundled CSS
dist/app.js - bundled Javascript code
dist/substance/*
dist/font-awesome/*

Your index.html file should look like this:

<script type="text/javascript" src="./substance/substance.js"/></script>
<script type="text/javascript" src="./app.js"></script>
<link rel="stylesheet" type="text/css" href="./app.css"/>

Using Substance Bundler

Substance Bundler is a lightweight build tool for Javascript.

npm install substance-bundler

Now you need to write a simple build script (make.js) that does the actual work.

var b = require('substance-bundler')

b.task('clean', function() {
  b.rm('./dist')
})

b.task('assets', function() {
  b.copy('lib/**/*.css', './dist/')
  b.copy('node_modules/font-awesome', './dist/font-awesome')
})

// this optional task makes it easier to work on Substance core
b.task('substance', function() {
  b.make('substance', 'clean', 'css', 'browser')
  b.copy('node_modules/substance/dist', './dist/substance')
})

b.task('build', ['clean', 'substance', 'assets'], function() {
  b.copy('app/index.html', './dist/index.html')
  b.copy('app/app.css', './dist/app.css')
  b.js('app/app.js', {
    external: ['substance'],
    commonjs: { include: ['node_modules/lodash/**'] },
    dest: './dist/app.js',
    format: 'umd',
    moduleName: 'app'
  })
})

b.task('default', ['build'])

// starts a server when CLI argument '-s' is set
b.setServerPort(5555)
b.serve({
  static: true, route: '/', folder: 'dist'
})

And now run:

node make

Please you want to look at a complete project setup, just clone and run SimpleWriter.

Using Browserify and Babel

This does the same job, for bundling the Javascript.

npm install -g browserify
npm install babel-preset-es2015 babelify
browserify app/app.js -t babelify -o app.js

Other tools

You are free to use other build tools, such as Webpack or Gulp. Please consult the websites of those projects for usage documentation.