search

nystudio107 / craft-vite

Allows the use of the Vite.js next generation frontend tooling with Craft CMS
MIT License
52 stars 16 forks source link

Include a 'devServerIsRunning' variable #10

Closed stenvdb closed 3 years ago

stenvdb commented 3 years ago

As stated in your blog post, there is an issue with static assets being referenced in CSS for example (https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets). A workaround could be to include a <base> tag to manually set the base url for all relative links. The tag should be set to the dev server if it is running or the PRIMARY_SITE_URL if it is not.

Since this could cause other issues, the best way would be to do this manually in your templates. So what would help is a way to check if the vite dev server is running in your templates. Something like:

{% if craft.vite.devServerIsRunning %}
<base href="{{ alias('@viteBaseUrl') }}">
{% endif %}

If you would made sure that you're using absolute paths for all assets or urls in a site, then this would fix relative paths in CSS or JS.

khalwat commented 3 years ago

Good idea, I'll roll that in.

khalwat commented 3 years ago

Implemented in 1.0.13 -> https://github.com/nystudio107/craft-vite/releases/tag/1.0.13

khalwat commented 3 years ago

@stenvdb I think we have a better solution as detailed here:

https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets

Issue ref: https://github.com/vitejs/vite/issues/2394