Support for Vite --mode flag in azd package?

[mikkelh-SDU]

Hi all
I'm trying to understand how azd package works when using Vite, specifically with the --mode flag.
From what I gather, azd package runs the build script from package.json if it's defined—otherwise it falls back to its own default behavior. However, I'm not sure how to pass the --mode flag to Vite during this process.
Is there a way to customize or override the build step so that I can specify the mode or what npm script it should run (e.g., vite build --mode staging) when packaging with azd?
Any guidance or examples would be greatly appreciated!

[vhvb1989]

Hey @mikkelh-SDU , thanks for reaching out. Unfortunately, azd doesn't currently support an easy way to control or override what is called during azd package. package starts by calling restore, which calls npm install. Then calls build, which calls npm run build --if-exists. Finally package takes the content from the /dist folder and creates a .zip file which is used to deploy.
This is the flow for deploying to Azure WebApp. It works different if you use Azure Container Apps (docker).

There are some workarounds you can try, like switch to use Azure Container Apps where you can define a dockerfile with the appropiate instructions to build your app.

Another workaround, if you keep Azure WebApp, is to remove the build script from the package.json. Since azd uses --if-exists, this would transform npm tun build into a no-op step. Then you can define a prepackage hook for your service where you run npm run build:prod - assuming you create build:prod: vite build --mode production. Or you can just manually run the npm commands you need to generate the dist output then run azd deploy which would pick the output from there.

Thanks for starting this discussion. We definitely need to improve the experience here in general. @rajeshkamal5050 @kristenwomack @wbreza

[mikkelh-SDU]

Thanks a lot for the detailed response @vhvb1989 — really appreciate it!

As a workaround, I’ve been using a prepackage hook in my pipeline to copy over the appropriate .env. file to .env.local before running the build. That way I can control the environment mode Vite uses during packaging.
Based on your suggestion, I’ll also remove the "build" script from my package.json and use the prepackage hook to run the correct build command directly—like npm run build:dev, npm run build:qa or npm run build:prod depending on the context.

That said, it would be awesome if azd supported a more native way to customize the build step—like passing flags or choosing which npm script to run—especially for workflows that rely on Vite’s --mode flag.

Thanks again for the help and for keeping the conversation open around improving this experience!