Steal build path for bundleAsset

StealJS
1

Hi everybody,
I’m developping an application with steal+canjs (v3).
It’s a standard application with canjjs components and npm modules.
I would like to add the img directory (that will hold image shared across different components), to my production build (i’m thinking about a possible application in cordova), so I added the following building option to my build script:

var stealConfig = {
    main: "index",
    config: __dirname+"/../package.json!npm"
};

var buildOptions = {
    bundleSteal:true,
    dest: __dirname+"/../dist/",
    bundleAssets: {
        infer: false,
        glob:["img/**/*"]
    }
};

stealTools.build(stealConfig, buildOptions);

My directory tree, in development, is the following:

├── buildScripts
│   └── build.js
├── component
│   ├── mainPage
│   │   ├── (mainPage modlet files)
│   └── login
│       ├── (login modlet files)
├── img
│   ├── logo.png
│   ├── 01.png
│   ├── 02.png
├── index.css
├── index.html
├── index.js
├── index.stache
├── node_modules
│   ├── ...  (list of modules)
├── package.json

and the building process, correctly, generate the following building “object”:

├── dist
│ ├── bundles
│ │ ├── component
│ │ ├── index.css
│ │ ├── index.js
│ │ └── mainpage-login.js
│ ├── img
│ │ └── logo.png
│ │ └── 01.png
│ │ ├── 02.png

Here comes my issues with paths: when I want to include the image in a component, I use the following in my stache components files:

<img src={{joinBase("/img/01.png")}} />

But, since during the build process, the img directory is added under the dest (dist) folder, the reference path of the image will change in dist/img/01.png. Is there any way to handle this dynamically?
or maybe am I using the bundleAsset option not in the correct way to bundle the img directory and data?

Thank a lot for the support!

2

Hey @fp_dev, your setup looks right; the assets will be copied to the dest folder, so joinBase will give you paths to that folder.

Is that not what you want? Or are you trying to change the paths in some other way?

3

Hey @chasen,

Thank you for your reply!
There was a little mistache in my code…
I should write <img src={{joinBase("img/01.png")}} /> ( the path was wrong because there was a / in from of the img). Now it works nice!

I’m will try to build the project with steal-cordova now.

I wonder if there is something to take into account in cordovaBuild options since the reference path will be different (file://android-asset/). I will go back after some attempts.
Thank you!