azurenext.jsazure-static-web-appturborepo

Deploying a Turborepo Next.js App to Azure Static Web App


I'm attempting to deploy a Next.js site in a Turborepo monorepo to an Azure Static Web App using GitHub actions and a custom build step. The Next.js site is configured to use a standalone output, but otherwise follows preset configurations. The deployment job is failing with the following error:

Failed to find a default file in the app artifacts folder (apps/web/.next). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application.

The build and deploy job configuration is as follows:

build_and_deploy_job:
  if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
  runs-on: ubuntu-latest
  name: Build and Deploy Job
  steps:
    - uses: actions/checkout@v3
      with:
        submodules: true
    - run: |
        npm install turbo -g
        npm i
        turbo run build --filter=web
        cp apps/web/staticwebapp.config.json apps/web/.next
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_WAVE_0A47E7A0F }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: "upload"
        skip_app_build: true
        app_location: "apps/web/.next"
        api_location: ""
        output_location: ""

What configuration or additional steps are required to deploy a Next.js app in a Turborepo monorepo to an Azure static web app? I confirmed that the same app outside of the monorepo context can be successfully deployed, but this was able to be done without a custom build step.

Repo: https://github.com/westonsankey/turbo-demo


Solution

  • I find that the app_location should be pointing at apps/web.

    If you build your application, you should see .next output in the following directory structure:

    .
    ├── apps
    │   └── web
    │       ├── .next
    │       │   └── standalone
    │       │       ├── apps
    │       │       │   └── web
    │       │       │       └── server.js
    │       │       └── package.json
    │       ├── package.json
    │       └── staticwebapp.config.json
    ├── .github
    │   └── workflows
    │       └── azure-static-web-apps.yml
    ├── package.json
    └── turbo.json
    

    The contents of apps/web/.next/standalone/apps/web/ must be moved to apps/web/.next/standalone/.

    Try this build configuration instead:

    build_and_deploy_job:
      if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
      runs-on: ubuntu-latest
      name: Build and Deploy Job
      steps:
        - uses: actions/checkout@v3
          with:
            submodules: true
        - run: |
            npm install turbo -g
            npm i
            turbo run build --filter=web
            cp -r apps/web/.next/standalone/apps/web/. apps/web/.next/standalone
            cp apps/web/staticwebapp.config.json apps/web/.next
        - name: Build And Deploy
          id: builddeploy
          uses: Azure/static-web-apps-deploy@v1
          with:
            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_WAVE_0A47E7A0F }}
            repo_token: ${{ secrets.GITHUB_TOKEN }}
            action: "upload"
            skip_app_build: true
            app_location: "apps/web"
            api_location: ""
            output_location: ""
    

    Here is a useful sample repo using turborepo and pnpm workspaces (I'm not the author):

    https://github.com/vivekjilla/pnpm-nextjs-sample/