Static Assets not Uploading

[qw-in]

Problem

Static Assets are never uploaded in development mode

Replication steps

1. yarn create slate-theme foo
2. cd foo
3. yarn start (wait for upload)
4. Add new file ./assets/static/test.css
5. Insert body { background: red; }
6. Add {{ "test.css" | asset_url | stylesheet_tag }} to ./templates/index.liquid

Expected Result:

• test.css is uploaded
• index.liquid is uploaded
• Page reloads
• Screen goes red

Observed Result:

• test.css is not uploaded
• index.liquid is uploaded
• Page reloads
• Screen does nothing

More Information

• Linux
• Static asset is uploaded when deploying
• Even running yarn start again will not upload the asset
• Was surprised slate does not wipe out old theme files when running yarn start. Had a bunch of legacy photos and stuff when I went checking for test.css

[qw-in]

On testing it appears that *.liquid files work but others do not

[qw-in]

My understanding is that CopyWebpackPlugin and react-dev-server have a history of not working together. That seems to be the case for me here. This is all based on my assumption that static assets should appear in the build folder

[t-kelly]

Hey @qw-in -- what you are experiencing is intentional and the beauty of Slate v1! Static assets are hosted locally when developing (yarn start) so that changes are reflected without needing to wait for them to be uploaded to Shopify servers. See Local Development for more info.

[qw-in]

Thanks for the clarification @t-kelly. This may warrant a docs update see here

Any files placed inside this directory will be uploaded, as-is, to Shopify.

So what would you recommend in terms of migrating from legacy themes?

When I saw the docs above I thought that would be a perfect starting point as all of the old assets could be moved to the static folder and the theme could slowly be migrated from there.

We have a large number of rather complex themes and if I am understanding correctly we would have to update all of the assets like this (excluding *.liquid)

{{ 'foo.png' | asset_url }} -> {{ './static/foo.png' | asset_url }}

This is relatively easy but what I have not found a solution for is this case

{% assign foo = 'foo.png' %}
{{ foo | asset_url }}

I found the docs on adding double quotes here but when bypassing webpack the asset will then 404 at //cdn.shopify.com/assets/... because static assets are not uploaded during development

Unless I am missing something an assets/legacy folder which just gets uploaded (regardless of mode) would be a huge help during the migration process.

[adelh45]

@qw-in Im experiencing the same issue, assets from var are not uploaded. Have you find a workaround ?

[qw-in]

@adelh45 not a great one. Can run deploy first as a work around but have to run it every time a static asset changes

[t-kelly]

This is relatively easy but what I have not found a solution for is this case

{% assign foo = 'foo.png' %}
{{ foo | asset_url }}

You are correct that the Slate Liquid Asset Loader, in its current state, is limited to direct `{{ path | asset_url }} assignments. I'm going to be tackling assets next week, and this will be one of many (#409, #410, #501, #658)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.