fgeierst/typo3-vite-demo

typo3-vite-demo's Issues

Assets result in 404 with wrong path

Reproduce
Include a file, for example with url() in SCSS, that will be added to the assets of builds (could also be a problem of assets outside CSS). Both in development mode and productions builds assets have the wrong path resulting in 404.

Example from a background-image:

• Development: GET https://typo3-vite-demo.ddev.site/packages/typo3_vite_demo/Resources/Private/Images/bg.svg 404
• Production: GET https://typo3-vite-demo.ddev.site/assets/bg-17e50649.svg 404

Possible solutions

• use relative paths from source file
• complete extension path, e.g. typo3conf/ext/typo3_vite_demo/Resources/Private/Images/bg.svg

Test with more complex JS setup (Vue or Svelte)

Add ddev-viteserve

https://github.com/torenware/ddev-viteserve

Compare with ext typo3_vite

@crazy252 has made a TYPO3 extension for Vite https://github.com/crazy252/typo3_vite

Viewhelper (instead of UserFunction)

@misterboe and @helhum both suggested to use a Fluid Viewhelper to include Vite generated CSS and JS - instead of the UserFunction InsertViteAssets.php included by setup.typoscript.

What are the advantages of this approach?

Add Vite backend integration

https://vitejs.dev/guide/backend-integration.html

ViteFluid Plugin breaks routing on dev

While the production build works fine, the development server has a routing issue. When the Vite dev server is active, it intercepts routing requests (user clicks on a link). The requested url shows for a brief split second in the network tab, but no navigation is happening in the browser. The issue seems to be related with the custom file watcher plugin ViteFluid. If the plugin is disabled, clicking on links works again.

Dependencies pnpm and tmux missing

Hi,

in the devbox there are the dependencies for pnpmand tmux which are currently not included.
I don't know ddev very well, but there should be a way to set up it on install, isn't it?

Best regards,
André

Update ddev-viteserve to latest version

This enables to configure which package manager is used (pnpm, yarn, npm).

.ddev/.env
VITE_JS_PACKAGE_MGR=pnpm

https://github.com/torenware/ddev-viteserve

Remove complexity of loading production assets and use TYPO3 core loading

There were UserFunctions or suggested ViewHelpers to load production assets from ViteJS production builds. This was necessary because they get hashed by default. Since we are using TYPO3, we can reduce the complexity by targeting the core way of including files with following benefits:

• Removing the hashing of ViteJS builds, because files are also hashed by TYPO3 to ensure loading of new builds with caching enabled – no need for any custom loading by parsing JSON files
• Keeping the original filenames, and since everything is bundled for production we only will have 2 files (main.js & main.css)
• Include the files in TypoScript the original core way – TYPO3 core asset handling, JavaScript can be loaded after footer
• In case of additional bundles (guessing they will not get more than a hand full) we can load them on demand within FluidTemplates (f:asset) or within TypoScript within target pages plugins, or elements

I have prepared a branch with these changes and will create a Pull Request #22 for that (no matter if this will get merged) to have a look at the changes. The assets are bundled to the public folder without any nesting:

├── Resources
│   └── Public
│       ├── main.css
│       └── main.js

Tutorial

Write a tutorial.md with a step by step explanation how to add Vite to an existing DDEV TYPO3 project.

Compare https://github.com/mandrasch/ddev-typo3-vite-svelte#how-was-this-created

Compare DDEV Laravel Vite integration

https://github.com/Ellarddekoeijer/ddev/blob/02a5eef2864a24071f7cdfd08f26ca392b4c1493/docs/content/users/quickstart.md

Recently the DDEV documentation for Laravel was expanded with a section about how to integrate Vite. That may be helpful for the TYPO3 Vite integration, too.

Vite file watcher stopped working in DDEV/Colima/Docker Desktop enviroment

For me (MacOS Ventura 13.1, Colima), Vite file watching stopped working. The changes I made in VS code were not synced to the Vite dev server. Only changes I made inside the SSH container with Nano triggered a reload in the browser.
This issue was resolved by setting the DDEV Mutagen option to true. First I suspected colima vm-type=qemu or --vm-type=vz to be the cause, but turns out both options work if Mutagen is enabled.

PostCSS config

If the project contains valid PostCSS config (any format supported by postcss-load-config, e.g. postcss.config.js), it will be automatically applied to all imported CSS. - https://vitejs.dev/guide/features.html#postcss

Add a PostCSS config file and common PostCSS plugins (Autoprefixer, CSS Nano).

Document TYPO3 backend credentials used in the database snapshot

Gitpod: Ports

In Gitpod, ports are handled differently then in local DDEV: "Gitpod supports exposing HTTP ports via a custom domain that is associated with your workspace" https://www.gitpod.io/docs/configure/workspaces/ports#ports

Configure the Vite dev server so, that it uses the env variable GITPOD_WORKSPACE_URL.

See: https://mattjennings.io/blog/how-to-enable-hmr-for-sveltekit-on-gitpod

Watch .html with Vite and reload browser