Integrate Bootstrap Theme in Phoenix Framework

Question

I have been building a Meteor app and decided to ditch it in favor of phoenix. The problem I am having is trying to integrate a pre-made Bootstrap theme with my app. I need to be able to control the load order of the CSS, Sass, and JavaScript. In Meteor you put the load order in a package.json file and build a custom package for it. Also, you don't have to include import statements in your HTML. So my specific questions are these:

How do I control the load order of the files?

Where should all the JavaScript, CSS, Sass, and images files go? (I'm guessing in the static vendor directory?)

I do need to include the import statements in the HTML files correct?

This theme is pretty big with a bunch of JavaScript files, font awesome, Bootstrap CSS, custom CSS, Sass, images, and the kitchen sink.

Answer 1

In Phoenix this can be accomplished like so:

You'll want to include the sass-brunch package in your package.json file and run npm-install e.g.

{
  "repository": {
  },
  "dependencies": {
    "brunch": "^1.8.5",
    "babel-brunch": "^5.1.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.8.10",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}

Now you'll change your app.css located web/static/css/app.css file to app.scss. From here import all of your css/sass files (I personally add bootstrap to the vendor folder under css web/static/vendor/css/bootstrap.scss) e.g.

@import "../vendor/css/bootstrap";

This next part might be the part that you had trouble figuring out, as I =o). What you do for javascript files is require them in your brunch-config.js file like so:

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js",
      order: {
        before: [
          "web/static/vendor/js/jquery.min.js",
          "web/static/vendor/js/bootstrap.min.js",
          "web/static/vendor/js/scripts.js"
        ]
      }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    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 "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "deps/phoenix/web/static",
      "deps/phoenix_html/web/static",
      "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/]
    }
  },

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

  npm: {
    enabled: true
  }
};