fix(starter): add vite plugin type

[iamriajul]

Added proper type for the return type of the vite config closure. It helps when customizing the config.

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

Typescript type improvement for starter for vite config.

Use cases and why

• 1. One use case
• 2. Another use case

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	357b161

[gioboa]

I tried this change in my local project and I have this error. is it working for you?

[iamriajul]

Can I get the full screenshot/code for the dev object?

…

On Sat, Jan 6, 2024, 8:38 PM Giorgio Boa ***@***.***> wrote: I tried this change in my local project and I have this error. is it working for you? Screenshot.2024-01-06.at.15.36.36.png (view on web) <https://github.com/BuilderIO/qwik/assets/35845425/193571cc-d81f-4fa4-a878-affebe603911> — Reply to this email directly, view it on GitHub <#5670 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFY7BG3ICAG7SSD5NTUSR4LYNFOV3AVCNFSM6AAAAABBPPWPBKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZZG4YTKNRYGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[iamriajul]

@gioboa The dev property doesn't exist, but the preview property exists.

[iamriajul]

Server Config (Maybe dev?): https://vitejs.dev/config/server-options.html#server-headers
Preview Server Config: https://vitejs.dev/config/preview-options.html#preview-headers

This shows how important is proper typing does matter, As you can see now that there's no dev property exists easily by just adding proper type information, without type information the unexpected behavior easily could have been ignored.

[iamriajul]

I've both configuration setup. (server & preview)

I think the server corresponds to your dev option.
And the preview corresponds to a production preview mode, eg: pnpm preview

[nelsonprsousa]

Here's also some code from vite docs:

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // dev specific config
    }
  } else {
    // command === 'build'
    return {
      // build specific config
    }
  }
})

It is important to note that in Vite's API the command value is serve during dev (in the cli vite, vite dev, and vite serve are aliases), and build when building for production (vite build).

https://vitejs.dev/config/#conditional-config

I can confirm that I also do not have the dev field. Actually this dev field was only added in November in this PR #5427

Not sure it was added by mistake?

[iamriajul]

But every new project has the dev field, which doesn't do anything, because it doesn't exists on vite side.

[iamriajul]

Fixed the issue, the dev field has been renamed to server field.

[nelsonprsousa]

So... Can you please let me know the difference between server and preview?

I mean, when we do npm start or yarn start on qwik, what are we using? And when we do preview (or the production build)?

Thank you!

[iamriajul]

server field is used when running: pnpm dev or pnpm start ("vite --mode ssr" or "vite --open --mode ssr")
preview field is used when running: pnpm preview ("qwik build preview && vite preview --open")

[nelsonprsousa]

server field is used when running: pnpm dev or pnpm start ("vite --mode ssr" or "vite --open --mode ssr") preview field is used when running: pnpm preview ("qwik build preview && vite preview --open")

Safe to assume that production build will run with "preview" settings instead of "server"?

[iamriajul]

production? production depends on your adapter, and as far as I know, adapters don't have to do anything with Vite.

[iamriajul]

For example in my case, the production runs with: pnpm serve ("node server/entry.fastify"), it just a node application nothing else. And my dist folder is served via Nginx.

[nelsonprsousa]

Thanks for letting me know 👍
In that case, where do you keep this kind of configurations (cache related?)

[iamriajul]

In my case, cache related information is with my Nginx, which is inside my docker, and behind Traefik Load balancer, and so on.

[iamriajul]

And also Qwik City lets you configure CacheControl easily on dynamic endpoints using the ctx.cacheControl method.

[iamriajul]

More configuration can be done by configurating your adapter eg: fastify/express or anything else you might have.

[gioboa]

Thanks @iamriajul and @nelsonprsousa for this discussion.
I did a test and server property is the correct one.
Here is my test with pnpm dev

Vite config

---

❌ Vite config with dev property

✅ Vite config with server property

[nelsonprsousa]

Awesome, thank you @iamriajul and @gioboa for the merge!