Add vite blog article

[mandrasch]

The Issue

• introductionary article to vite needed for DDEV to help user

How This PR Solves The Issue

• introduce core concepts

Manual Testing Instructions

Automated Testing Overview

• no

Related Issue Link(s)

Release/Deployment Notes

Status

• work in progress, first draft

[rfay]

Yay!

[rfay]

Thanks, just mark it ready to review when you're ready. Looks like there are just minor textlint complaints.

[mandrasch]

Thanks, just mark it ready to review when you're ready. Looks like there are just minor textlint complaints.

👍 will do. hope to finish it by the end of next week, maybe a week later. cheers!

[mandrasch]

Hey @rfay,

I completed the article draft, hope it will be useful for the community.

Questions:

1. Should I choose / create an article image as well?
2. I couldn't find an example for Vite + DDEV + Gitpod - should we ask the community before publishing?
3. I couldn't find an example for Vite + DDEV + Drupal - should we ask the community before publishing?

Happy to adjust it / make changes after review of course.

Cheers! 👋

[rfay]

Yay, thanks! Can you suggest any good reviewers? Will ask @tyler36 - could you take a look?

[tyler36]

Needs quotes (and comma) to be valid.

Suggested change

	type: "module"
	"type": "module",

[tyler36]

Went through the example, and was able to to follow along and get it working.
A couple of nitpicking things above.

I didn't try any of the framework guides.
Is it worth mensioning https://github.com/torenware/ddev-viteserve somewhere, or is this focused on do-it-yourself?

[tyler36]

And, of course, thank you for taking the time to write up the article.

I know questions often come up on Discord about vite and DDEV and it's great to have a well-written and easy to follow guide to recommend to others.

Thank you @mandrasch !

[mandrasch]

Went through the example, and was able to to follow along and get it working. A couple of nitpicking things above.

Nice, thanks so much for review! 👍 👍 I'll fix the typo with module later on.

I didn't try any of the framework guides. Is it worth mensioning https://github.com/torenware/ddev-viteserve somewhere, or is this focused on do-it-yourself?

Good point / question. 👍 Also thought about it.

Personally I don't use viteserve because I want to run vite visible - and want to see my errors directly if a JS file has an error for example in the vite output. Therefore I just use ddev npm run dev.

Most JS frameworks like sveltekit, nextjs, etc. work like that as far as I experience it: You run npm run dev when you want to develop locally (https://kit.svelte.dev/docs/creating-a-project) and you see build errors of vite directly in the terminal.

The aspect of log output is adressed here torenware/ddev-viteserve#20

I have much respect for torenwares hard work on this, but personally I don't want to complicate the introduction.

Maybe we could add a vite section on https://github.com/ddev/awesome-ddev, add available add-ons there and link to it? (Or somebody creates another article about viteserve)

Btw: Just thought about that maybe this current article could also be split in two parts 🤔 :

• ddev and vite: introduction (sample project)
• ddev and vite: framework + cms integration

[rfay]

Thanks so much for this! It's going to be great.

What do you think about using the photo of you as the main image?

[rfay]

Thanks for this!

I rebased and also made a number of small suggestions, you should be able to just accept the ones you're OK with by using the GitHub web interface.

[rfay]

@mattstein doesn't allow me to use the word "simply". There should be an exception for you, but there's not :)

[rfay]

Thanks for the graphic!

[mandrasch]

Thanks for the graphic!

Sure thing. 👍 (I used https://www.adobe.com/express/feature/image/remove-background and a canva template https://www.canva.com/templates/?query=youtube-thumbnail)

[mandrasch]

@rfay thanks for review / fixes. from my point of view we're good to go. 👍 if you have further feedback, just let me know :)

[rfay]

Thanks so much!