How to point steal to the right main bundle

StealJS
1

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?

2

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

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

4

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:

5

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?

6

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

7

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

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.

9

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

10

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.

11

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

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

12

Yes, the latest version.

13

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
14

Thx, @pYr0x !!

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