How do I include JS and and CSS acquired through npm into my app

Phoenix Forum Questions / Help
1

Hello, I’ve been trying to add bootstrap-toggle into my app (first time trying build something with phoenix after reading Programming Phoenix) but I can’t seem to get it to work. I’ve looked at the brunch documentation and I still can’t find a way to do it, I’ve also tried to take a look at this question but I can’t get what I want, which is the styles and js from bootstrap-toggle.

My packages.json looks like this

      {
      "repository": {},
      "license": "MIT",
      "scripts": {
        "deploy": "brunch build --production",
        "watch": "brunch watch --stdin"
      },
      "dependencies": {
        "jquery": "^3.2.1",
        "bootstrap": "3.3.7",
        "bootstrap-toggle": "2.2.2", 
        "phoenix": "file:../deps/phoenix",
        "phoenix_html": "file:../deps/phoenix_html"
      },
      "devDependencies": {
        "babel-brunch": "6.1.1",
        "brunch": "2.10.9",
        "clean-css-brunch": "2.10.0",
        "uglify-js-brunch": "2.10.0"
      }
    }

My brunch-config.js looks like so

 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/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.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 "/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/]
    }
  },

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

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap',
      "bootstrap-toggle": 'bootstrap-toggle'
    },
    styles: {
      "bootstrap-toggle": ["dist/css/bootstrap-toggle.min.css"]
    }
  }
};

If I look at my app.js, I can see bootstrap-toggle in it but even when I click the mangled checkbox, it doesn’t react to anything

require.register("bootstrap-toggle/js/bootstrap-toggle.js", function(exports, require, module) {
  require = __makeRelativeRequire(require, {}, "bootstrap-toggle");
  (function() {
    /*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.js v2.2.0
 * http://www.bootstraptoggle.com
 * ========================================================================
 * Copyright 2014 Min Hur, The New York Times Company
 * Licensed under MIT
 * ======================================================================== */
.
.
.

So the question being: how do I get these styles and js into my app? Am I missing an extra step? I’ve tried to include the stylesheet and script tag into my app and everything works but I would like to avoid doing it this way if I can.

2

Just because bootstraps JS is included does not mean it is run, you need to run it. :slight_smile:

You can do that either via an autorequire setting in Brunch (which I don’t recommend but many use it) or by calling it explicitly in your app.js file.

Similar with css, you can specify what to include and from where (Brunch docs show how, sorry for lack of link, I’m a bit constrained at work at the moment). :slight_smile:

3

Thank you for taking the time to respond.

I thought that the globals setting would do the requiring for me like it does with jQuery because I didn’t have to do an import or anything else for jQuery.

Out of curiosity, why do you not recommend using auto-require and if I use the auto-require setting, would I use it like this? (assuming that the bootstrap-toggle.js is in node_modules)

 modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
      "bootstrap-toggle": ["node_modules/bootstrap-toggle/js/bootstrap-toggle.js"]
    }
  },
4

Because you can’t control or set options or all manner of other things. Rather, things just ‘appear’, and that is not right, especially on a webpage to me. I prefer controlling the lifecycles of everything. :slight_smile: