# How to build without a single main

**URL:** <https://forums.bitovi.com/t/how-to-build-without-a-single-main/678>\
**Category:** StealJS\
**Created:** [June 30, 2017, 9:38am UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678 "2017-06-30T09:38:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wickman](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/wickman/32/253_2.png) [@Wickman](https://forums.bitovi.com/u/Wickman)\
**Post date:** [June 30, 2017, 9:38am UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/1 "2017-06-30T09:38:16Z")

</div>

Hi

How can I create a production build from several modules without having a single main?

My site is old-school with a bunch of separate pages (php), each having a javascript file. There is no single “myapp.js” for the entire site (as this is not a single page app).

I cannot figure out how to build those into a single js-file.

I tried setting `main` as an array, but that fails.

```
// package.json
"scripts": {
    "build": "steal-tools build --bundle-steal -c ./website/static/js/config.js",
  },

// config.js
steal.config({
    baseURL: "website/static/js/",
    main: ['product', 'category', 'shop'] // Yeah right!
});

```

Running a build:

```
> steal-tools build --bundle-steal -c ./website/static/js/config.js

OPENING: .../website/static/js/config.js
ERROR: name.match is not a function
ERROR: 
Build failed

```

I suppose I could create a “main.js” with lines like this (below) and then point the config.js to this file. But it seems awkward (also, I wouldn’t really use the main.js in my site):

```
import x from "product";
import y from "category";
import z from "cart";

```

I’m really at a loss here. Thanks for any input!

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [June 30, 2017, 1:48pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/2 "2017-06-30T13:48:39Z")

</div>

Hi @Wickman, you want to use the `bundle` config: [https://stealjs.com/docs/config.bundle.html](https://stealjs.com/docs/config.bundle.html).

---

<div class="post-metadata">

**Author:** ![Wickman](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/wickman/32/253_2.png) [@Wickman](https://forums.bitovi.com/u/Wickman)\
**Post date:** [June 30, 2017, 2:49pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/3 "2017-06-30T14:49:44Z")

</div>

Ok, thanks but a bit more elaboration would help 🙂

I tried this:

```
// config.js
steal.config({
    baseURL: "/website/static/js/",
    main: 'myapp',
    bundle: ['product', 'category', 'cart'] // <==========
});

```

Now when I run `steal` **`build`** , I get a bunch of js-files in the `dist/bundles` dir. I was expecting a single file here?

When I run `steal` **`bundle`** , I get a `dev-bundle.js` file. Is this what I’m looking for? Tried to load it, but steal tries to find it in `steal-master/dev-bundle.js` which fails:

```
<script src="/website/static/steal-master/steal.js"
        dev-bundle="dev-bundle"></script>
```

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [June 30, 2017, 3:13pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/4 "2017-06-30T15:13:21Z")

</div>

Oh, I misunderstood what you want to do I think. I thought you wanted to bundle the JS for each page separately. That way each page would only need to load the JS it needs. That is what the `dist/bundles` has with the config you used.

The `dev-bundle` is a bit different and is intended to be used during development, not for your production site. You can read about it here: [https://stealjs.com/docs/StealJS.guides.development\_bundles.html](https://stealjs.com/docs/StealJS.guides.development_bundles.html).

If you want to create a single JS file with all of your pages combined, you’ll probably have to manually create a `main.js` file that imports each of them like you proposed originally. However, I really think the way to go is to bundle each of your pages separately and just load the 1 script you need on each page.

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [June 30, 2017, 3:21pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/5 "2017-06-30T15:21:03Z")

</div>

Hey @Wickman, you can use the multi-main build:

```auto
stealTools.build({
  config: __dirname + "/config.js",
  main: ["product", "category", "cart"]
});

```

You probably do not want to use the bundleSteal option though, because it will be put into each of the main bundles. Instead use steal.production.js and have a different script tag for each page:

```auto
<script src="path/to/steal.js" main="product"></script>

```

---

<div class="post-metadata">

**Author:** ![Wickman](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/wickman/32/253_2.png) [@Wickman](https://forums.bitovi.com/u/Wickman)\
**Post date:** [June 30, 2017, 7:54pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/6 "2017-06-30T19:54:41Z")

</div>

Thanks a lot, that’s what I’m looking for!

I tried using `main` as an array in config.js, but it didn’t work. Apparently, it works with build. It’s a bit confusing.

You guys are probably correct in that having one bundle for each page is better (or at least easier to build) than one for the entire site.

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [June 30, 2017, 8:00pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/7 "2017-06-30T20:00:28Z")

</div>

@Wickman Actually I think the multi-main is a pretty powerful feature of steal, just not one we use a whole lot. I think the recommendation comes more from a lack of experience using multi-main rather than it being “bad”. Definitely you should give it a try! 🙂

---

<div class="post-metadata">

**Author:** ![Wickman](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/wickman/32/253_2.png) [@Wickman](https://forums.bitovi.com/u/Wickman)\
**Post date:** [June 30, 2017, 8:10pm UTC](https://forums.bitovi.com/t/how-to-build-without-a-single-main/678/8 "2017-06-30T20:10:47Z")

</div>

Yeah, it seems to be working!

Right now I’m trying to figure out how to avoid bundling jquery in each page-bundle. This ought to be the last hurdle for me. Fingers crossed…