javascript - Stack ExtJS 6 + Spring Boot

Question

I m trying to implements a stack extjs 6 with spring boot.

I want extjs6 and spring boot in two separated project in intelliJ. (front-end and back-end)

Until now, i m able to point static content to the folder where the extjs6 project is.

My folders structures is :

back-end : /home/bryan/IdeaProjects/back-end/
front-end : /home/bryan/IdeaProjects/front-end/{var}/

({var} could be front-office or back-office)

All request asking for http://localhost:8080/static deserve /home/bryan/IdeaProjects/front-end/ and this is right.

But i meet some difficulties to correctly configure app.json

In my index.ftl (freemarker template) i have this :

this is ok until here.

But bootstrap.js call http://localhost:8080/classic.json and that's wrong. It should call http://localhost:8080/static/front-office/classic.json

If i manually change

Ext.manifest = "/static/front-office/classic.json"

classic.json is correctly loaded but this is not totally finish yet.

I m not sure where i have to set the right path in the app.json

Edit 1:

I changed bootstrap config in app.json to :

"bootstrap": {
    "base": "${app.dir}",
    "manifest": "/static/front-office/${build.id}.json",
    "microloader": "bootstrap.js",
    "css": "bootstrap.css"
 },

and now, classic.json and app.json are correctly loaded but

http://localhost:8080/codebase/build/admin-dashboard/classic/resources/Admin-all_1.css is not the good url.

I want this to be http://localhost:8080/static/front-office/codebase/build/admin-dashboard/classic/resources/Admin-all_1.css

Answer 1

In order to achieve this, you have to modify some Ant property files of your project. Those are used to run the Sencha Cmd build.

Open the file <appDir>/.sencha/defaults.properties

Here you will find something like:

app.out.css.rel=${app.output.resources.path}/${app.out.css.name}

This value is used to generate the path to the css files in the manifest json file. After changing it to something like this, Sencha Cmd still generates the files in the same location but load it from another.

app.out.css.rel=/static/front-office/${app.output.resources.path}/${app.out.css.name}

If you just want to apply this to a specific kind of build like production only, than you have to put this value in the corresponding Ant properties file <appDir>/.sencha/[production|testing|...].properties