Skip to content

Vite-React app indicates "No Content" #25129

@brentarias

Description

@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

Metadata

Metadata

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions