From 2425d0f67a5cf8c870426475558fcf5df5ad9df5 Mon Sep 17 00:00:00 2001 From: tyler36 <7234392+tyler36@users.noreply.github.com> Date: Thu, 28 Nov 2024 12:35:18 +0900 Subject: [PATCH 1/2] remove trailing spaces --- src/content/blog/working-with-vite-in-ddev.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/blog/working-with-vite-in-ddev.md b/src/content/blog/working-with-vite-in-ddev.md index 9679366d..10ee0739 100644 --- a/src/content/blog/working-with-vite-in-ddev.md +++ b/src/content/blog/working-with-vite-in-ddev.md @@ -62,7 +62,7 @@ In order to use Vite in our DDEV projects, we generally need to do two things: const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`; export default defineConfig({ - + // Your settings // ... @@ -449,26 +449,26 @@ Example repositories: #### Drupal -[Andrew Morton](https://github.com/mortona42) gave some information about the current state, thanks very much! +[Andrew Morton](https://github.com/mortona42) gave some information about the current state, thanks very much! > Vite module: [https://www.drupal.org/project/vite](https://www.drupal.org/project/vite) -> +> > This uses Vite's manifest.json to map enabled Drupal library files to the compiled versions in /dist, or to the vite server in dev mode. -> +> > Here is a theme I contributed, with instructions for how to set it up with DDEV in the readme files. I'm trying to detail all the configuration possibilities we might need, with defaults that should work out of the box. -> +> > [https://www.drupal.org/project/unocss_starter](https://www.drupal.org/project/unocss_starter) (uses Vite) -> +> > I'm blogging about the process here: [https://www.drupalarchitect.info/projects/unocss-starter-theme](https://www.drupalarchitect.info/projects/unocss-starter-theme) -> +> > There are a handful of devs working on using Vite to bundle assets multiple modules/themes in Drupal. Looks like Vite and Foxy are becoming the leading solutions. > > [https://www.drupal.org/project/foxy](https://www.drupal.org/project/foxy) -> +> > Working POC: [https://github.com/darvanen/drupal-js](https://github.com/darvanen/drupal-js) -> -> I think we'll be seeing a lot of new things in +> +> I think we'll be seeing a lot of new things in this area over the next year. #### Laravel @@ -530,8 +530,8 @@ Florian Geierstanger made a first demo publicly available: This lead to the development of further tools by Simon Praetorius: -- Extension ["vite-asset-collector"](https://github.com/s2b/vite-asset-collector): -- Vite Plugin ["vite-plugin-typo3"](https://github.com/s2b/vite-plugin-typo3) +- Extension ["vite-asset-collector"](https://github.com/s2b/vite-asset-collector): +- Vite Plugin ["vite-plugin-typo3"](https://github.com/s2b/vite-plugin-typo3) - DDEV Add-On ["ddev-vite-sidecar"](https://github.com/s2b/ddev-vite-sidecar) The usage of "vite-asset-collector" with DDEV is documented [here](https://docs.typo3.org/p/praetorius/vite-asset-collector/main/en-us/Installation/Index.html#installation-1). The [TYPO3 Slack](https://typo3.org/community/meet/chat-slack) has a Vite channel if you have questions or need support. @@ -573,17 +573,17 @@ See [DDEV Installation: Codespaces](https://ddev.readthedocs.io/en/stable/users/ Andy Blum wrote the awesome article [Node.js Development with DDEV](https://www.lullabot.com/articles/nodejs-development-ddev) which explains proxying requests to the correct ports of NodeJS projects running in the web container. He is using the NodeJS CMS Keystone in combination with SvelteKit (NodeJS framework) for the frontend in his tutorial - all in one DDEV project. -This approach also enables use cases like running a classic PHP backend in combination with a NodeJS hosted frontend (on another subdomain of the same DDEV project). It's especially great for headless CMS projects. +This approach also enables use cases like running a classic PHP backend in combination with a NodeJS hosted frontend (on another subdomain of the same DDEV project). It's especially great for headless CMS projects. -There is an article on velir.com: [How to Run Headless Drupal and NextJS on DDEV](https://www.velir.com/ideas/2024/05/13/how-to-run-headless-drupal-and-nextjs-on-ddev). And here is a [demo repository](https://github.com/mandrasch/ddev-laravel-breeze-sveltekit) for Laravel Breeze (PHP) and SvelteKit (NodeJS) within one DDEV project (monorepo). +There is an article on velir.com: [How to Run Headless Drupal and NextJS on DDEV](https://www.velir.com/ideas/2024/05/13/how-to-run-headless-drupal-and-nextjs-on-ddev). And here is a [demo repository](https://github.com/mandrasch/ddev-laravel-breeze-sveltekit) for Laravel Breeze (PHP) and SvelteKit (NodeJS) within one DDEV project (monorepo). But you can also use a separate DDEV project for frontend - and another one for backend of course. See [communication between DDEV projects](https://ddev.readthedocs.io/en/stable/users/usage/faq/#communicate-via-https). ### DDEV addons - [ddev-vite-sidecar](https://github.com/s2b/ddev-vite-sidecar) is a simple addon for (almost) zero-config integration of Vite into your DDEV projects. The Vite development server is exposed as a https://vite.* subdomain to your project's main domain, which means that no ports need to be exposed to the host system. - -- Kudos to torenware, who created the first ever DDEV addon for Vite, [ddev-viteserve](https://github.com/torenware/ddev-viteserve). It's currently not maintained. + +- Kudos to torenware, who created the first ever DDEV addon for Vite, [ddev-viteserve](https://github.com/torenware/ddev-viteserve). It's currently not maintained. ### Advanced: Autostart Vite @@ -610,7 +610,7 @@ web_extra_daemons: directory: /var/www/html ``` -If you use this, the Vite dev server errors are only visible via "ddev logs". A real-life example can be found here: [github.com/ddev/ddev.com](https://github.com/ddev/ddev.com). +If you use this, the Vite dev server errors are only visible via "ddev logs". A real-life example can be found here: [github.com/ddev/ddev.com](https://github.com/ddev/ddev.com). You can also use supervisor tools like pm2 in this article: [Node.js Development with DDEV - lullabot.com](https://www.lullabot.com/articles/nodejs-development-ddev). From 40340e1a4f3285d0228b775c086b32c71a2c0c6b Mon Sep 17 00:00:00 2001 From: tyler36 <7234392+tyler36@users.noreply.github.com> Date: Thu, 28 Nov 2024 12:37:47 +0900 Subject: [PATCH 2/2] docs: add note about ddev-vitest --- src/content/blog/working-with-vite-in-ddev.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/blog/working-with-vite-in-ddev.md b/src/content/blog/working-with-vite-in-ddev.md index 10ee0739..c4ed478c 100644 --- a/src/content/blog/working-with-vite-in-ddev.md +++ b/src/content/blog/working-with-vite-in-ddev.md @@ -585,6 +585,8 @@ But you can also use a separate DDEV project for frontend - and another one for - Kudos to torenware, who created the first ever DDEV addon for Vite, [ddev-viteserve](https://github.com/torenware/ddev-viteserve). It's currently not maintained. +- [ddev-vitest](https://github.com/tyler36/ddev-vitest) adds some helper commands for projects using [Vitest](https://vitest.dev/), a vite-native testing framework.. + ### Advanced: Autostart Vite There is also the possibility to automatically start Vite when you start a DDEV project.