Vite integration

[notramo]

Vite is useful for bundling frontend scripts, styles, resizing image assets, and preprocessing other assets.

Supporting Vite in Marten projects would be fairly easy, but would boost a lot in DX.

• marten new would generate configs automatically
  • tsconfig.json - set the frontend directory
  • vite.config.ts
    • exclude the shards lib directory from automatic watching as it wastes resources
    • add full page reload on Marten template changes
  • biome.json - configure asset directory path for the Biome linter/formatter
• TypeScript and SASS/Stylus files (and all Vite-processed assets) should be in a different directory than Marten default assets, because these need to be preprocessed, and the Vite build output should be served from assets. The Marten asset collector should not add sources to the served assets, only the build output. I recommend putting the sources into frontend/, maybe src/frontend/.
• add vite template tag, e.g. {% vite "frontend/app.ts" %} (Vite docs for it)
  • in development, this would link to the Vite dev server (localhost:5173)
  • in production, this would link to the assets via Marten's builtin asset handling, but resolving the actual (hashed) filename from .vite/manifest.json)
• in development mode, import https://localhost:5173/@vite/client in base.html for HMR and full page reload

[ellmetha]

Hey! 👋

Thanks for this suggestion! 🙏

I think this would be a great candidate for a marten-vite third-party library that would provide template tags allowing reading a Vite manifest and "injecting" specific entries into a template (by adding the right script/style tags while respecting dependencies).

One of Marten's core principles is to remain frontend-agnostic, meaning it doesn't favor one specific frontend tool over another. I think it's essential to maintain this stance to keep Marten flexible and adaptable to various project needs. While adding built-in support for Vite might seem convenient, it could open the door to requests for support for other tools, potentially leading to complexity and confusion.

As I mentioned previously, something like that would be a great idea for a marten-vite third-party library. I think it should be doable to create such library with Marten's present capabilities. In any case, I will be happy to help with this and ensure that Marten can indeed be extended to support such needs and requirements if you want to work on such a library. Let me know!

[treagod]

I agree with @ellmetha. Marten should be independent from any build systems. Otherwise it might be too high a hurdle for new developers, especially for the ones who don't have worked with nodejs.

However, I could see this functionality being installed from the start with marten new project or a generator

[notramo]

Lucky asks the user if the new project should be created with frontend support or not.