Adding --public-path option to the esbuild script #58
Conversation
Setting `esbuild ... --public-path=assets` allows client-side code to reference images from the asset pipeline.
Example:
1. Create image at `app/javascript/images/example.png`.
2. Add esbuild option `--loader:.png=file` (not included in this PR).
3. When esbuild runs, it will output e.g. `app/assets/builds/example-5SRKKTLZ.png`.
4. In frontend code, e.g. a React component, add `import Example from "../images/example.png"` .
5. Now the image can be referenced with `<img src={Example} />`.
6. The path resolves to /assets/example-5SRKKTLZ.png. Without this PR, the path resolves to /example-5SRKKTLZ.png.
|
Like this. Could you add a section to the README explaining how to configure these additional steps too? |
|
@dhh Sorry for the delay. This should be good to go now. |
|
@richardkmiller after making this change, I've noticed it causes source maps to no longer function, and I think it's due to Propshaft double-prefixing here. When the |
@agrobbin did you solve this double prefixing? I removed the --public-path option for now ... |
|
@agrobbin FYI, I submitted rails/sprockets-rails#515 to fix this issue in Sprockets. It may be a similar fix in Propshaft, specifically to the |
I found the solution in the 2nd step of this PR rails/jsbundling-rails#58
Setting
esbuild ... --public-path=assetsallows client-side code to reference images from the asset pipeline.Example:
app/javascript/images/example.png.--loader:.png=file(not included in this PR).app/assets/builds/example-5SRKKTLZ.png.import Example from "../images/example.png".<img src={Example} />.