Static-web-apps: The content server has rejected the request with: BadRequest

[luisnaranjo733]

I followed the instructions for setting up a static web app (react). Everything worked except for the deployment actions part of the Github Actions flow. That part fails on the "Build and Deploy" step due to the content server rejecting the request because the content is too large.

I followed the instructions closely. The only deviation was that I did not clone from the template Github repo. In my case, I already had a project that I've made real progress on and I did not want to start from a skeleton template. From what I can tell, your template is basically the create-react-app template which is what I used already. I pointed my static web app deployment to my frontend folder which should be functionally equivalent to using your template. Anyway, I can see that the build step in Github Actions builds my app correctly in the logs. It's the upload step that is failing.

Zip archive with Github actions logs

---End of Oryx build logs---
Function Runtime Information. OS: Linux, Functions Runtime: v3, Node version: 12.X
Finished building function app with Oryx
Zipping App Artifacts
Done Zipping App Artifacts
Zipping Api Artifacts
Done Zipping Api Artifacts
The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this static site is 30000000 bytes.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a Github issue at https://github.com/azure/static-web-apps/issues/
Exiting

[miwebst]

Hi @luisnaranjo733 so this error implies that the size of your Azure Function is too large. Do you have an Azure Function in your project?

[luisnaranjo733]

@miwebst I figured it out.

The problem was that my .vscode/settings.json was misconfigured and caused the static web apps VS code extension to fail.
I had this field set to a non empty string, even though I did not have an Azure Function in my project yet.
"staticWebApps.apiSubpath"

When I set that field to an empty string, deleted my static web app, and then re-deployed via the extension, everything worked great.

So the root cause here was user error, but still, it seems weird that this misconfiguration would cause the deployment to fail. Maybe this is a symptom of another issue? I

[horihiro]

I saw same error message when deploying my static web app with function app codes.

My function app code includes chromium binary via puppeteer or playwright such as following repo.
https://github.com/anthonychu/functions-headless-chromium

When this binary is included, the size of deployment package might be over 100mb, which is known quota.
https://docs.microsoft.com/en-us/azure/static-web-apps/quotas

But the error message says The limit for this static site is 30000000 bytes..

What is the 30000000 bytes limit?

[miwebst]

Hey @luisnaranjo733 thats pretty interesting. From the log you posted above it looks like we detected and ran npm install on an 'api' folder. What is the api location in your GitHub Action workflow configured to? Does that directory exist in your project?

[miwebst]

Hey @horihiro, so currently we have 2 size limits: one for you app (that is the well documented 100 MB limit), the other limit is for the total size of your function. It seems you are hitting the function size limit (30 MB).

We need to update our docs to include this limit. cc @craigshoemaker
In general we are looking at ways to make these limits less restrictive.

[horihiro]

Thanks @miwebst
Do we have a plan to extend the limitation about both of package sizes until GA?

I'm trying to decrease the package size in order to make puppeteer work on SWA.
But it can not be decreased.