Setting up a bootstrap template in Phoenix

Hi everyone!

I’m a long-time Rails programmer and have been dabbling in Elixir/Phoenix. Loving it!

I just downloaded the Argon dashboard by Creative Tim and am trying to get it hooked up a new Phoenix application. Here’s where I’m stuck… following the Quick Start docs, I’ve moved a bunch of their files into my assets directory. Here’s the structure:

  -> css
    -> theme
      -> bootstrap
      -> core
      -> custom
      -> argon.scss
    -> app.scss
    -> phoenix.scss
  -> js
    -> theme
      -> argon.min.js
    -> app.js
    -> socket.js
  -> node_modules
  -> static
  -> vendor
    -> @fortawesome
    -> anchor-js
    ... etc ...

In the assets/vendor folder, I’ve put everything from the dashboard’s own vendor folder, and removed anything wasn’t a compiled/bundled/minified js/css file.

I’m trying to use brunch’s config to specify the order of some files, but it’s not working properly. Here’s my config:

exports.config = {
  // See for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js",

      // To use a separate vendor.js bundle, specify two files path
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      // To change the order of concatenation of files, explicitly mention here
      order: {
        before: [
        after: [
    stylesheets: {
      joinTo: "css/app.css",

      order: {
        before: [
        after: [
    templates: {
      joinTo: "js/app.js"

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    sass: {
      mode: "native", // set to 'native' to force libsass
      options: {
        precision: 8 // Minimum precision required by bootstrap

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]

  npm: {
    enabled: true

The problem is, the js before/after options don’t seem to be working, or at least vendor files are ALWAYS after everything. If I look at the that’s bundled by brunch, here’s the sources array:


As you can see, js/app.js is NOT after everything else (at least not after vendor files).

Any ideas what’s going on here? I’ve already checked out this template porting discussion.

Thanks for any help!

I actually think this might be a problem with Brunch. Added an issue here:

As Brunch development is sparse and Phoenix is moving to Webpack in the next version, you may also want to look that way.

1 Like

Did notttt know that. Good plan. Thanks!