cf html5-push does not upload CSS files correctly

[JuanjoPP]

Description

Hi,

We're uploading html5 modules to Cloud Foundry using cf html5-push and our css files are not being uploaded:

However when we use cf push and we deploy the entire MTA instead of just the html5 modules it works correctly.

Environment

• OS (macOS/Windows) - Windows
• SAP CF Landscape (e.g. Canary) - Live
• IaaS provider (e.g. AWS) - AWS
• Region (e.g. eu10) - eu10

CLI Output

Set environment variable DEBUG=1, run the flow and paste output here.

[micellius]

Hi @JuanjoPP , Thanks for reporting an issue. Can you please run (in the org/space where you used cf html5-push)

cf html5-list comshelldsdissentconfirmation

to see if CSS files are deployed to HTML5 repository and not available in runtime or they are not deployed at all?

Do you html5-push a single HTML5 application or there are multiple applications deployed using the same app-host service instance?

[JuanjoPP]

Hi,

It does seem to be getting deployed:

As for the second question, we're pushing multiple apps.

[micellius]

It looks like you are deploying all files, but with different folder structure than you expect in run-time. Actually, your style.css is now should be reachable with:

https://shell-operative-opexshell-dev-cf-space-opex-ds-dsdissen33e80e4b.cfapps.eu10.hana.ondemand.com/comshelldsdissentconfirmation-1.0.0/css/dissentconfirmation/dist/css/style.css

Take in account that unlike deployment of MTA, where build phase is in-place and folder structure is changed to satisfy the requirements of generic application content deployment service (GACD), cf html5-push does not make any assumptions on folder structure and deploy all resources as-is (without use of GACD, but using APIs of HTML5 repository service itself).

To qualify some directory on the file system as HTML5 application, html5-push expects it to have xs-app.json and manifest.json.

When you use html5-push, the algorithm of looking for HTML5 applications is as follows:

1. If paths to HTML5 applications provided as arguments
   • check that these are HTML5 applications
   • zip each application independently
   • upload archives to HTML5 repo service using either provided service instance (app-host) or create new one.
2. If paths to HTML5 applications are not passed as arguments:
   • Check if current working directory qualifies as an HTML5 application. If yes, zip it, deploy it and exit.
   • If current working directory is not HTML5 application, but contains directories that qualify as HTML5 applications, zip them independently, upload to HTML5 repo service using either provided service instance or create new one.

Pay attention that html5-push knows nothing about MTA, project structure, dist folders, etc. Assuming, you do have a build of static resources that generate dist folders inside each HTML5 application, you need explicitly specify these dist folders as arguments of html5-push. Also, if it's not the first time you deploy these HTML5 applications, you should either delete the service instance of HTML5 repo service with which they were previously deployed or pass it's ID as argument or use -r flag to explicitly redeploy HTML5 applications using same service instance (for all possible options see cf html5-push --help).

Lets say after build you have the following folder structure:

|-- mta_project
    |-- approuter_module
    |    |-- ...
    |-- ui1_module
    |    |-- dist
    |    |    |-- manifest.json
    |    |    |-- xs-app.json
    |    |    |-- css
    |    |    |    `-- style.css
    |    |    `-- ...
    |    `-- ...
    |-- ui2_module
    |    |-- dist
    |    |    |-- manifest.json
    |    |    |-- xs-app.json
    |    |    |-- css
    |    |    |    `-- style.css
    |    |    `-- ...
    |    `-- ...
    `-- ...

and your current working directory is mta_project. Then, in order to redeploy HTML5 apps, you need to run something like (on Windows change / to \):

cf html5-push -r ui1_module/dist ui2_module/dist

[JuanjoPP]

Hi,

After taking a look at it, it seems it's the same issue as #3.

This is the structure of our /dist/ folder:

And this is /dist/css/:

After doing a cf html5-list, we find files like Component-preload.js, which are in the root /dist/ folder, in their correct place:

However, all files which are in a subfolder of the /dist/ folder have the wrong routes:

html5-push appends things like /css/dsdissentconfirmation/dist/ to the subfolder routes, which causes the generated zip file to have a different folder structure than the original /dist/ folder.

And of course this gets propagated to the uploaded webapp:

[micellius]

I tried to reproduce your issue both on OSX and Windows, but with no luck :( Did you try to html5-push with explicitly specifying paths to dist folders as I proposed?

cf html5-push -r comshelldsdissentconfirmation\dist ...

Also make sure you have the latest version of plugin installed (currently it's 1.3.0)

If you'd like to see which files are added to zip and in which order you can enable debug mode by

set DEBUG=1

and then run cf html5-push ....

I guess you have manifest.json files with same application name and version in both comshelldsdissentconfirmation and comshelldsdissentconfirmation\dist which causes unpredictable results of mixing files from both into the same zip. To avoid this mix, you need to specify paths to dist folders of HTML5 apps explicitly, when running html5-push

If the issue is related to #3, it may be easily fixed on Windows by setting the value of TMP environment variable to existing directory that your user have write access. (In GO temp directory API is not very reliable)