How to point steal to the right main bundle

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?

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

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

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

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 :confused:

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

<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?

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"]); };

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

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

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
And my JS code is located here: /modules/Upload/main-steal/

<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.

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

No, I can’t :flushed:

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
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.

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

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

Yes, the latest version.

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

first:
you tried:

<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

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

<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.

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

<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). 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

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?

1 Like

Thx, @pYr0x !!

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