Vite-React app indicates "No Content"

[brentarias]

I have a Vite React app, and a Linux App Service Plan. I issue az webapp up -r NODE:16-lts and received a status 3 error. More fully:

Zip deployment failed. {'id': 'afa67f80-75d7-472a-9735-f256cec01b2e', 'status': 3, 'status_text': '', 'author_email': 'N/A', 'author': 'N/A', 'deployer': 'Push-Deployer', 'message': 'Created via a push deployment', 'progress': '', 'received_time': '2023-01-15T05:49:34.4409081Z', 'start_time': '2023-01-15T05:49:36.0507081Z', 'end_time': '2023-01-15T05:49:45.4721887Z', 'last_success_end_time': None, 'complete': True, 'active': False, 'is_temp': False, 'is_readonly': True, 'url': 'https://cra-app.scm.azurewebsites.net/api/deployments/latest', 'log_url': 'https://cra-app.scm.azurewebsites.net/api/deployments/latest/log', 'site_name': 'cra-app', 'build_summary': {'errors': [], 'warnings': []}}. Please run the command az webapp log deployment show -n CRA-App -g BArias_rg_7811

To Reproduce

On my Windows 11 laptop I used Vite in a powershell prompt to create a React/Typescript app. I ran npm install since Azure App Services seems to rely on npm. I demonstrated the app works locally by running npm run dev. I then ran npx vite build to prepare this app for production, which creates a dist folder. Into the dist folder I place a .azure/config file which provides location, group, sku, appserviceplan and an app name. I then enter the dist folder and issued the command az webapp up -r NODE:16-lts and got the aforementioned problem.

I then decided to handle this deployment very differently, according to MS documentation for a static site, by using the following command from within the aforementioned dist folder:

// The .azure/config file specifies location, group, sku, appserviceplan, app name.
az webapp up --html --os-type linux -r NODE:16-lts

Unfortunately this also did not work. I received the following error:

Conflicting parameters: cannot have both --runtime and --html specified.

This is strange, because the prior mentioned MS documentation expressly indicates combining those two parameters. So I then decide to remove the -runtime parameter and try again. I then receive this next error message:

usage error: --runtime | --deployment-container-image-name | --multicontainer-config-type TYPE --multicontainer-config-file FILE

Apparently the above is a github-tracked issue that I think is still unresolved. I am surprised that none of these approaches are working.

Update

By issuing the command az webapp up --help, I discovered that the --html switch only works with a Windows App Service Plan. That's surprising because (1) the CLI tool didn't bother to give me an error message indicating the incompatibility of those options and (2) the online MS documentation expressly affirms combining --html with --os-type linux.

Based on this discovery, I was FINALLY able to deploy my Vite/React app successfully. However, this simply focuses my question/issue: why is an --html deployment not an option for Linux?

Expected behavior

What I expected is that the sample app made by Vite, as compiled into the dist folder and deployed with az webapp up, would appear in the site/wwwroot location of the App Service. Instead nothing is uploaded at all. There are only four files in my localhost dist folder:

index.html
vite.svg
assets\index-3fce1f81.css
assets\index-e73c0651.js
react-35ef61ed.svg

Environment summary The az -v command gives this report:

azure-cli 2.43.0 *

core 2.43.0 * telemetry 1.0.8

Extensions: containerapp 0.3.20

Dependencies: msal 1.20.0 azure-mgmt-resource 21.1.0b1

[yonzhan]

route to CXP team

[brentarias]

After I made this post, I discovered the command az staticwebapp up. I wonder if the solution to the entire problem, of az webapp up not working with a static app, is because I am using the wrong command. If that is true, then it still remains that:

• the MS documentation needs to change and explain that static sites must use a different command, and...
• the --html switch should be removed from the az webapp up command...as it obscures which command truly needs to be used (namely az staticwebapp up).

That said, I need MS to decide if this is the correct solution - or if there is something else going on here.

[zsy2053]

Is this solved? I have the same issue

[btardif]

FYI @tulikac

[btardif]

@seligj95 here are my thoughts....

az webapp up --html --os-type linux should work.

With this combination we should target the latest PHP image that includes NGINX and is able to serve static content.

CC: @tulikac / @vivekjilla

[microsoft-github-policy-service[bot]]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @AzureAppServiceCLI, @antcp.