# How to point steal to the right main bundle

**URL:** <https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224>\
**Category:** StealJS\
**Created:** [April 7, 2016, 2:48pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224 "2016-04-07T14:48:46Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [April 7, 2016, 2:48pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/1 "2016-04-07T14:48:46Z")

</div>

In my html I load the steal.production file like this: (We don’t have steal installed with npm.)

`<script type="text/javascript" src="/resources/stealjs/0.15.8/steal.production.js" data-main="main"></script>`

Now it tries to load my main file at `/resources/stealjs/0.15.8/dist/bundles/main.js`  
But it’s located in a different location `/MyModule/main/dist/bundles/main.js`

Is it possible to point steal in the right direction?  
Or do we have npm install steal for every module?

---

<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:** [April 7, 2016, 2:50pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/2 "2016-04-07T14:50:21Z")

</div>

In your script tag you can specify your bundles path (where the bundles are located):

```auto
<script type="text/javascript"
  src="/resources/stealjs/0.15.8/steal.production.js"
  data-main="main"
  bundles-path="path/to/my/bundles"></script>

```

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [April 7, 2016, 3:02pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/3 "2016-04-07T15:02:27Z")

</div>

@matthewp do we not have to set `baseURL` ? because `bundlesPath` is correct = `dist/bundles`

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [April 7, 2016, 3:06pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/4 "2016-04-07T15:06:16Z")

</div>

With the `bundles-path` attribute it loads my main js correct.

But now it fails loading CanJS `/resources/stealjs/0.15.8/can.js`  
But CanJS is npm installed in the /MyModule/main/ directory 😕

---

<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:** [April 7, 2016, 3:24pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/5 "2016-04-07T15:24:05Z")

</div>

I see, you are using npm but using steal from somewhere else. So get rid of bundles-path and instead set the base url:

```auto
<script src="/resources/stealjs/0.15.8/steal.production.js
  base-url="/MyModule/main/"
  main="main"></script>

```

BTW, why is this not needed in development?

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [April 7, 2016, 6:56pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/6 "2016-04-07T18:56:42Z")

</div>

Thanks, with base-url it points to /MyModule/main

But now it tries to load canjs from /MyModule/main/  
CanJS is installed with npm.

my **main.js** file looks like this:  
`import can from 'can'; console.log(can.VERSION);`

This is the error i get in the browser:  
`steal.production.js:8 Error loading "can" at https://labs.domain.com/MyModule/main/can.js Error loading "can" from "main" at https://labs.domain.com/MyModule/main/main.js`

my **package.json** looks like this:  
`{ "name": "MyModule", "version": "0.1.0", "description": "MyModule description", "main": "main.js", "system": { "npmAlgorithm": "flat" }, "devDependencies": { "can": "^2.3.22" } }`

my **Gruntfile.js** looks like this:  
`module.exports = function (grunt) { grunt.initConfig({ "steal-build": { bundle: { options: { system: { config: "package.json!npm" } } } } }); grunt.loadNpmTasks("steal-tools"); grunt.registerTask("build", ["steal-build"]); };`

---

<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:** [April 8, 2016, 12:05pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/7 "2016-04-08T12:05:59Z")

</div>

You need to let it know that your using the npm plugin.

```auto
<script src="/resources/stealjs/0.15.8/steal.production.js
  base-url="/MyModule/main/"
  config="package.json!npm"
  main="main"></script>

```

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [May 25, 2016, 7:37am UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/8 "2016-05-25T07:37:57Z")

</div>

I am still having difficulties loading steal correctly…  
It doesn’t find my package.json and main.js file.

The URL to the app is like this : _[www.mydomain.com/Upload/Index](http://www.mydomain.com/Upload/Index)_  
And my JS code is located here: /modules/Upload/main-steal/

```auto
<script type="text/javascript"
	src="/modules/Upload/main-steal/node_modules/steal/steal.js"
	base-url="/modules/Upload/main-steal"
	config="package.json!npm"
	main="main"></script>

```

I installed steal with nmp and it loads steal.js correct, but it throws a 404 on package.json and main.js.  
Because it tries to load from /Upload/Index/package.json and /Upload/Index/main.js.

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [May 25, 2016, 7:36pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/9 "2016-05-25T19:36:36Z")

</div>

Can you publish the repo or a part of it on github, so we can look into

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [May 25, 2016, 8:37pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/10 "2016-05-25T20:37:00Z")

</div>

No, I can’t 😳

Whatever is in our URL gets redirected to a /index.php, which points it to the right files.  
So if our URL looks like : [www.mydomain.com/Upload/Index/param1/paramValue/param2/paramValue](http://www.mydomain.com/Upload/Index/param1/paramValue/param2/paramValue)  
Steal will try to load my package.json & main.js like this :  
/Upload/Index/param1/paramValue/param2/paramValue/main.js

What I expected is that it would load from the base-url (/modules/Upload/main-steal) where all my front-end files for the Upload module are situated.

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [May 25, 2016, 9:22pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/11 "2016-05-25T21:22:09Z")

</div>

Oh ok, I understand the problem … I will look into this tomorrow

Btw. Which version of steal do you have? The latest ?

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [May 26, 2016, 6:48am UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/12 "2016-05-26T06:48:23Z")

</div>

Yes, the latest version.

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [May 26, 2016, 10:33am UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/13 "2016-05-26T10:33:25Z")

</div>

so…, it is a little bit tricky / hacky…  
i made a github repo: [https://github.com/pYr0x/steal-php](https://github.com/pYr0x/steal-php)

first:  
you tried:

```auto
<script type="text/javascript"
	src="/modules/Upload/main-steal/node_modules/steal/steal.js"
	base-url="/modules/Upload/main-steal"
	config="package.json!npm"
	main="main"></script>

```

that won’t work, because if you set a `config` attribute, steal will rewrite the `baseURL` to a relative path of the config-file, see here: [https://github.com/stealjs/steal/blob/master/src/config.js#L59](https://github.com/stealjs/steal/blob/master/src/config.js#L59)

so possibible solutions are:  
1.  
add the the full path to the `config` setting like:

```auto
<script type="text/javascript"
        src="/stealphp/modules/Upload/main-steal/node_modules/steal/steal.js"
        config="/stealphp/modules/Upload/main-steal/package.json!npm"
        main="main"></script>

```

steal will rewrite the `baseURL` to a relative path `./` and will correctly load the modules.

1. 

add a `config-main` attribute to the script tag, like:

```auto
<script type="text/javascript"
        src="/stealphp/modules/Upload/main-steal/node_modules/steal/steal.js"
        config-main="package.json!npm"
        base-url="/stealphp/modules/Upload/main-steal"
        main="main"></script>

```

steal will set the `baseURL` you provided. ([https://github.com/stealjs/steal/blob/master/src/config.js#L200](https://github.com/stealjs/steal/blob/master/src/config.js#L200)). But now you have to set also a `config-main` otherwise, steal will load a default config-file (stealconfig.js) [https://github.com/stealjs/steal/blob/master/src/config.js#L35](https://github.com/stealjs/steal/blob/master/src/config.js#L35)

please note also, that my `package.json` is always under `main-steal/`

cc @matthewp i think we sould make `config` a little bit more clear. `config` will always overwrite the `baseURL` settings. do you have any thought, if we should refactor the code or document that better?

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [May 26, 2016, 2:17pm UTC](https://forums.bitovi.com/t/how-to-point-steal-to-the-right-main-bundle/224/14 "2016-05-26T14:17:45Z")

</div>

Thx, @pYr0x !!

I used the second solution, because I think this is more declarative.