Max app size seems different than reported by Oryx

[standuprey]

Describe the bug

I got a standard tier for my swa:

A clear and concise description of what the bug is.

Nevertheless deployment fails with the message that my app is over 100MB:

---End of Oryx build logs---
Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12
Finished building function app with Oryx
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 Web App is 104857600 bytes.

Any reason why this 2 values are different (100MB vs 500MB)?

[miwebst]

That is very odd...can you share any details about the name of your app (resource or default hostname) so we can investigate?

[miwebst]

Oh sorry, this is saying the Function content is above 100 MB. The limit above is about the size of the static content for the Static Web App. I believe 100 MB is currently the limit for the Function content.

[standuprey]

Is there a way to have a higher limit for the function app? @prisma/client package alone is over 130MB

[a-haan]

I get this error when trying to deploy a nextjs app, no way is my api folder above 100mb

[ghost]

@a-haan , I have this error too. It happened around 5 days ago.

[microbecode]

I have the same issue. I don't fully understand which parts are uploaded to a Function and which are the static parts. I emptied my 'api' folder completely but that didn't help. My project really isn't anything complicated, but I guess some packages take a bit of space.

I would really like to see the limit raised.

[ngoctp27]

@a-haan , @microbecode. I have another solution for this case. Use Azure Devops (Pipelines) instead. It worked.

[valstu]

@ngoctp27 any change you could share your azure-pipelines.yml? I seem to get same error in Pipelines 🤔

[ngoctp27]

@valstu I use nextjs framework for the application, I think it is temporary work with Azure Devops (Pipelines). Because it restricts by the official document Bring your own functions to Azure Static Web Apps .
Maybe they don't maintain this Action anymore and it uses the container image latest version, closed source code.
I will move to another web hosting service for safety. 🥲

- task: AzureStaticWebApp@0
    inputs:
      app_location: '/' # App source code path relative to cwd
      app_build_command: 'yarn install; yarn run build; yarn run export'
      api_location: 'api' # Api source code path relative to cwd
      output_location: 'out' # Built app content directory relative to app_location - optional
      cwd: '$(System.DefaultWorkingDirectory)' # Working directory - optional
      azure_static_web_apps_api_token: $(deployment_token)
      is_static_export: true

[rtrindvg]

Same problem here. Not understanding why the 100Mb limit is being shown since the limit should be 250Mb and it always worked until some days ago.

[vivekjilla]

Hi everyone, this new limitation of 100mb is for the nextjs ssr support we recently released in preview mode. Please check out here for more details.

And if you're using static export feature of Nextjs and hitting into this error, please make sure to add is_static_export: true flag as mentioned here

[valstu]

So after few days of fighting with the 100mb limitation I found out following:

Next.js builds are quite large in general, easily over 100mb even with minimal sites. Bundle size is large because of the .next/cache folder, that takes most of the disk space. Cache folder, if I got this right, is used to make subsequent builds faster. So it is meant for CI/CD pipeline. Deployment container (mcr.microsoft.com/appsvc/staticappsclient) apparently copies the whole .next to the Azure Functions including this cache.

I changed the build script on package.json to following
"build": "next build && rm -rf ./.next/cache"

As a result my .next folder went from ~150mb to ~2-3mb and deployed nicely to Azure SWA. Even the SSR features seems to work nicely (although haven't done complete testing).

Does anyone have better understanding of Next.js internals and the cache folder? Can we safely remove it or add some config to pipeline which wouldn't upload the cache folder to Azure Functions? At least the build times aren't affected (by removing the cache) since I got No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache warning already before removing this folder. Caching is also something we could utilize to make builds faster.

Also another option worth investigating is the standalone build of Next.js:
https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

At least when making standalone builds it doesn't include cache folder on the .next/standalone folder

I have said this before and say it again but would you consider open sourcing the mcr.microsoft.com/appsvc/staticappsclient image, if there was any visibility to the actual deployment the debugging would be so much easier.

[alexrabin]

@valstu I tried adding next build && rm -rf ./.next/cache but only the next build is called and not the rest of the command in the pipeline. Is there anything else you had to change as well?

[valstu]

@valstu I tried adding next build && rm -rf ./.next/cache but only the next build is called and not the rest of the command in the pipeline. Is there anything else you had to change as well?

Nope, just changed the build command on package json to that. At least it is running it for me

Note that rm doesn't generate any output

[alexrabin]

Note that rm doesn't generate any output

Ah okay I did not know that. When I build locally and then end up removing the cache folder I am at 85mb so I dont know what's going wrong in the pipeline then :/

[alexrabin]

@valstu How many pages were you generating? I am generating 36 and it is failing.

[valstu]

@valstu How many pages were you generating? I am generating 36 and it is failing.

Under ten, how big is your .next folder if you build it locally with the new build command?

[alexrabin]

@valstu When I build with 13 pages, my .next folder is 180mb. Once I remove the cache folder, the .next folder is 14.5mb.

Something is telling me the pipeline isn't calling the rm command :/

This is the build command: "build": "next build && rm -rf ./.next/cache",

This is my pipeline task:

  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      azure_static_web_apps_api_token: $(deployment_token)
      build_timeout_in_minutes: 180

[valstu]

Are you using azure pipelines?

[alexrabin]

@valstu yes I am

[valstu]

Ok! I'm using GH Actions so there might be some differences

[alexrabin]

Ah that might do it

[richardwem]

We're still stuck on this part.

@valstu has added some workarounds; removing /cache folders.
To do that, we added a postbuild npm command:
"rm -rf ./node_modules && rm -rf ./dist/libs && rm -rf ./dist/apps/monorepo-appname-1/.next/cache && rm -rf ./dist/apps/monorepo-appname-1/.next/trace && mkdir dist/apps/monorepo-appname-1/node_modules && rm -rf ./dist/apps/monorepo-appname-2/.next/cache && mkdir dist/apps/monorepo-appname-2/node_modules && rm -rf ./dist/apps/monorepo-appname-2/.next/cache",
(the creation of node_modules folders is because of: #921 (reply in thread) )
This way we clear a lot of stuff which is not needed for deployment.

Now, we added the file: appsvc.yaml and added:
post-build: du -m
which prints a beautiful filetree with filesize in MB.

At the end, it states that ./ is 6MB.
That should fit on the 100MB NextJS SWA :)

But....!

After the postbuild command from the appsvc.yaml, so in a part we're not able to do any 'hacks' to get this stuff working, I see Oryx wants to build a function app. That seems to be neccessary for a NextJS SWA.

There it does npm install --unsafe-perm --production. It copies .oryx_prod_node_modules to node_modules, and voila, I suppose that is the reason why our app is a lot bigger then 100MB. Unfortunately, there is no way (as I know of) to debug that.

So we get the error:

I see no way to decrease the size of the zip júst before it wants to zip... @vivekjilla maybe you have some hints?

[oujesky]

Been struggling with this for some time as well with pretty small Next.js app - the Next.js build cache and bloated node_modules folder seems to be the main culprits here.

I did bit of investigation, bit of reverse engineering and lot of trial and error - long story short it's possible to (ab)use the api_build_command build parameter to hook into the build process and delete some redundant files from node_modules folder that will be zipped and uploaded as the api app.

In my case this helped (next.js compiler binary under @next/swc-... is quite big and I'm omitting other delete commands related to @tabler/icons package that's also pretty big, but this should give the idea):

api_build_command: "rm -rf $SOURCE_DIR/node_modules/@next/swc-* && rm -rf $SOURCE_DIR/.next/cache"

Now this is executed by the Oryx tool just before the app code is copied to api code folder so we can use it to clean it up a bit. It shouldn't affect the app code, as this was copied to some temporary folder in previous steps and the app zip file is created from that temporary folder.

For reference, here is the template that the Oryx tool is using to create the actual build script - the value from api_build_command is output in the {{ PreBuildCommand }} section. Later there is also shown why we need to work with files under $SOURCE_DIR (which means the app dir) and not $DESTINATION_DIR (which is the api dir), since at the time the custom command is executed the api dir is still empty, the content will be copied by that script a bit later.

This is definitely a hackish solution and worked for me maybe by pure coincidence (small hobby app on free tier, so not a big deal) - your mileage may vary and it's possible this way won't be there forever.

For the record, I was trying experimenting also with replacing the full node_modules with reduced node_modules from the Next.js standalone output mode (20 MB vs 350 MB uncompressed), but that didn't work out for me for some reason - although I was able to upload the code, I was getting just "Server Error. There was an unexpected error in the request processing." error page with no further details on what's going on when accessing the deployed app.

[GarryOne]

I get this error when trying to deploy a nextjs app, no way is my api folder above 100mb

This Static Web Apps service is intended for statically exported frontend applications.
If your Next.js is not fully SSG, but has SSR, then you're trying to use wrong service.
It has to copy the entire node_modules folder which just that folder would be obviously bigger than 100MB.

You should switch to Azure App Service instead of Static Web Apps, which supports Node.js applications. That's what you want if you have SSR Next.js application..

This is how should like a Github Action in that case

name: Azure Build and Deploy

on:
  push:
    branches:
      - develop

env:
  AZURE_WEBAPP_NAME: cysiam-client   # set this to your application's name
  NODE_VERSION: '16.x'                # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@main
      - name: Use Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: npm install, build, and test
        run: |
          # Build and test the project, then
          # deploy to Azure Web App.
          npm install
          npm run build
      - name: Zip all files for upload between jobs
        run: zip --symlinks -r next.zip ./*
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: next.zip
      - name: 'Deploy to Azure WebApp'
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}

[thomasgauvin]

@GarryOne While Static Web App was mainly for static content in the past, we're extending support for SSR & server-focused frameworks including NextJS. Support for NextJS SSR is in preview at the moment, and we've blogged about it here: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/extending-next-js-support-in-azure-static-web-apps/ba-p/3627975. We're working on improving support

[xiningli]

Any updates?

[Reshmi-Sriram]

Hey all,
Regarding Next.js blockers, SWA now supports the standalone feature of Next.js. This should help in the app size constraints. Do try it out and let us know if it works! For more details check out this thread.

[rohitjondhalems]

hey, we have been trying to deploy the SWA but couldn't after trying everything. We didn't have the node_modules folder in the repo so the "build": "next build && rm -rf ./.next/cache", was not working. Then we tried the changes in the next.config.js with the following adding code
module.exports = {
output: 'standalone',
}

and it successfully builds the SWA, which worked for us. @thanks Reshmi-Sriram

[Reshmi-Sriram]

Closing this issue, feel free to re-open if necessary!

[MertHaddad]

hey, we have been trying to deploy the SWA but couldn't after trying everything. We didn't have the node_modules folder in the repo so the "build": "next build && rm -rf ./.next/cache", was not working. Then we tried the changes in the next.config.js with the following adding code module.exports = { output: 'standalone', }

and it successfully builds the SWA, which worked for us. @thanks Reshmi-Sriram

worked for me thx

[buttererror]

I have found another fix on stackoverflow to reduce the output size.
I enabled this feature in my next.config.js and it works now. Checkout this link