Phoenix-Framework Brunch config for sw-precache

brunch-config.js

let glob = require('glob')

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/
  },

  paths: {
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    },

    swPrecache: {
      swFileName: 'service-worker.js',
      directoryIndex: '/',
      options: {
        stripPrefix: 'priv/static/',
        staticFileGlobs: ['priv/static/**/*.*'],
        dynamicUrlToDependencies: {
          '/': [
            ...glob.sync('priv/static/**/*.js'),
            ...glob.sync('priv/static/**/*.css'),
            ...glob.sync('web/templates/**/*.eex'),
          ]
        }
      }
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

This is a bare-bones config for sw-precache using brunch and focused on the default Phoenix Framework setup.

Note that a single URL has been defined under dynamicUrlToDependencies, which points to the project root. In this config, any change to any .eex, .js, or .css in the project will cause that URL to be re-cached. In practice, you will want to update this to be much more restrictive.

This is very helpful! @natecox.