fgeierst / typo3-vite-demo Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU General Public License v2.0
License: GNU General Public License v2.0
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:
GET https://typo3-vite-demo.ddev.site/packages/typo3_vite_demo/Resources/Private/Images/bg.svg 404
GET https://typo3-vite-demo.ddev.site/assets/bg-17e50649.svg 404
Possible solutions
typo3conf/ext/typo3_vite_demo/Resources/Private/Images/bg.svg
@crazy252 has made a TYPO3 extension for Vite https://github.com/crazy252/typo3_vite
@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?
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.
Hi,
in the devbox there are the dependencies for pnpm
and 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é
This enables to configure which package manager is used (pnpm, yarn, npm).
.ddev/.env
VITE_JS_PACKAGE_MGR=pnpm
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:
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
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
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.
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.
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).
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.