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:

assets
  -> 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 http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js",

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      order: {
        before: [
          "vendor/jquery/dist/jquery.min.js",
          "vendor/bootstrap/dist/js/bootstrap.bundle.min.js",
          "js/theme/argon.min.js",
        ],
        after: [
          "js/app.js",
        ],
      }
    },
    stylesheets: {
      joinTo: "css/app.css",

      order: {
        before: [
          "vendor/nucleo/css/nucleo.min.css",
          "vendor/@fortawesome/fontawesome-free/css/all.min.css",
          "css/theme/argon.scss",
        ],
        after: [
          "css/app.scss",
        ],
      }
    },
    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 app.js.map that’s bundled by brunch, here’s the sources array:

"sources":["js/theme/argon.min.js","node_modules/phoenix/priv/static/phoenix.js","node_modules/phoenix_html/priv/static/phoenix_html.js","js/socket.js","js/app.js","vendor/jquery/dist/jquery.min.js","vendor/bootstrap/dist/js/bootstrap.bundle.min.js","vendor/@fortawesome/fontawesome-free/js/all.min.js","vendor/@fortawesome/fontawesome-free/js/brands.min.js","vendor/@fortawesome/fontawesome-free/js/fontawesome.min.js","vendor/@fortawesome/fontawesome-free/js/regular.min.js","vendor/@fortawesome/fontawesome-free/js/solid.min.js","vendor/@fortawesome/fontawesome-free/js/v4-shims.min.js","vendor/anchor-js/anchor.min.js","vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js","vendor/chart.js/dist/Chart.bundle.min.js","vendor/clipboard/dist/clipboard.min.js","vendor/headroom.js/dist/jQuery.headroom.min.js","vendor/holderjs/holder.min.js","vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js","vendor/jquery.scrollbar/jquery.scrollbar.min.js","vendor/nouislider/distribute/nouislider.min.js","vendor/onscreen/dist/on-screen.umd.min.js"]

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!