# Separating out custom javascript in Sage

**URL:** https://discourse.roots.io/t/separating-out-custom-javascript-in-sage/7302
**Category:** sage
**Created:** 2016-07-29T18:12:55Z
**Posts:** 6

## Post 1 by @rkartzman — 2016-07-29T18:12:55Z

Hi,

It is unclear to me what the best way is to load specific javascript files for specific pages in Sage.

I am able to add custom javascript by requiring it in the `manifest.json` using this pattern:

```
"main.js": {
          "files": [
            "scripts/main.js", 
            "scripts/app.js"
          ],
          "main": true
        },
```

But say I wanted to require a file called `scripts/filters.js` only on the About page. What is the best way to require certain modules in this way using Sage conventions?

---

## Post 2 by @cfx — 2016-07-29T20:27:13Z

You could do something like this:

```
{
  "dependencies": {
    "about.js": {
      "files": [
        "assets/scripts/filters.js",
        "bower_components/lib-for-about-only/dist/lib-for-about-only.js"
      ]
    },
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://example.dev"
  }
}
```

Couple things to note: the source dir of the new file is the theme root and **not** `assets/` like the existing manifest, so you’ll need to account for that in your source paths. Also, libraries you install via Bower must be included manually ([otherwise they won’t be built into your `main.js`](https://discourse.roots.io/t/adding-bower-package-to-multiple-output-files-manifest-json/7227)).

Helpful debugging tip: [Sage: Wiredep & SASS Framework](https://discourse.roots.io/t/sage-wiredep-sass-framework/5211/9?u=cfx)

---

## Post 3 by @rkartzman — 2016-08-01T15:22:22Z

Ok great, so now my globs look like this:

 ![](https://discourse.roots.io/uploads/default/original/2X/f/fceba5011bc7c5db3c092529819dbdca118bee9f.png)

But I am not getting the code from my about.js script loading in my minified main.js.

I am assuming I wouldn’t enque this script separately? And once I do that, how do I map that about.js file to the body class=“about” page ?

---

## Post 4 by @cfx — 2016-08-01T21:36:43Z

You would enqueue `about.js` separately and conditionally, it will not be included in `main.js`.

If you want the script itself to fire only on certain pages then please be sure to read [the comments on DOM based routing](https://github.com/roots/sage/blob/master/assets/scripts/main.js#L2) and use `main.js` as a template for your new file.

---

## Post 5 by @rkartzman — 2016-08-01T23:24:56Z

Cool, so if I go the second route–to avoid main.js from becoming unwieldy with js code-- what is the best way to “require” other views/javascript files ?

Much appreciated,

---

## Post 6 by @cfx — 2016-08-01T23:50:18Z

> You would enqueue about.js separately and conditionally

Not sure what’s unclear