Problem/Motivation
The cl-server module implements the hook_file_url_alter and this breaks the URLs of CSS and Javascript files as it appends the Scheme and HTTP Host to the file URI.
Steps to reproduce
Assuming you have the setup for Component Development using CL Components / CL Server and Storybook-drupal-addon. You can use the example components from cl_components_examples under cl_components.
I am testing it with a Vanilla Drupal 9.4 site with Olivero theme.
1. Run Story book - npm run storybook
2. Open explorer and point to http://localhost:6006 (this should be the link with default settings)
3. The example components will load.
4. Open the network tab and you will see that all the stylesheet and javascript links from the theme (usually with name starting with css_ or js_) are not loading.
5. Click on any one of these links and you will see that the Request URL is malformed like http://localhost:8080/public://css/optimized/css_97htjIvQ15V1EfeTASftshiMIzLS36LIXVDogWwnlWQ.jljVGWN9UpDBDhlOvibVHSAxjCOZonuvT1tJeWFbkHY.css?rjjf8c
Attached files showing the effects of the fixing the files.
Proposed resolution
Update the hook_file_url_alter in cl_server module to make sure the proper file URL is created.
Remaining tasks
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| With-Proper-CSS-JS-Loaded.PNG | 26.76 KB | pavanmalji | |
| Without-Proper-CSS-JS-Loaded.PNG | 19.1 KB | pavanmalji |
Issue fork cl_server-3314712
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
avpadernoComment #3
e0ipsoCan you confirm you followed the configuration guide for Storybook?
https://git.drupalcode.org/project/cl_server/-/blob/1.x/docs/storybook.md
Comment #4
pavanmalji commentedAs I had an existing Drupal project, I skipped the Drupal site install. I followed the rest of the steps as described. I am trying to debug the issue but keep circling back at hook_file_url_alter in cl_server module file. I will try the setup from scratch and post the findings.
Comment #5
apotek commentedConfirming that we are seeing something similar:
https://foo.com/public:/css/css_zxa1V-vXt55-TF0hf24Omulyjsuhl19p9MPKhITP...
Difference is that for us, there is only one `/` after `public:` whereas poster has two.
But a similarity I can't help but note is that we are both using css aggregation.
I wonder how aggregation changes the $route_name.
As a side note, and as a matter of slightly more readable code, I might patch as follows, but it won't solve the bug.
Comment #8
deviantintegral commentedWe just ran into this one too. It can be worked around by disabling CSS and JS aggregation. However, if we check for the scheme,
\Drupal\Core\File\FileUrlGenerator::doGenerateString()will make this absolute and the correct hostname will be used.I've opened an MR fixing this.
Comment #9
e0ipsoThis is a good catch! I didn't anticipate the need to have aggregation on while developing with CL Server on. But I see it's a fair ask.
Comment #11
e0ipsoComment #12
e0ipsoRe-opeining to port to 2.x as well.
Comment #13
e0ipsoComment #15
e0ipsoComment #16
apotek commentedThanks for the quick work on this @deviantintegral & @e0ipso. I'm looking at the fix, and thinking about... what happens to `private://`
It seems what we need, rather than string matching the name of the stream wrapper, a solution that considers the kind of stream wrapper we are dealing with and adjusts accordingly.
We bear in mind too, that public:// is just a convention within Drupal.
I still think the fix is a step in the right direction. I'm just not sure it is complete. I guess we'll see. In any case. thank you for the fix.
Comment #17
avpaderno