Deploying to Azure App Service

[jjnanthakumar]

Describe the bug

I have deployed application using adapter-static. Faced the below error

Reproduction

adapter-static generated some build files and deploy to the Azure app service (enabled fallback to generate html file)

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 553.89 MB / 7.75 GB
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (112.0.1722.39)
    Internet Explorer: 11.0.19041.906
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0
    @sveltejs/adapter-node: ^1.2.3 => 1.2.3
    @sveltejs/adapter-static: ^2.0.2 => 2.0.2
    @sveltejs/kit: ^1.5.0 => 1.15.5
    svelte: ^3.54.0 => 3.58.0
    vite: ^4.2.0 => 4.2.1

Severity

annoyance

Additional Information

Also, I have tried with adapter-node but faced different issues but no luck with any solutions.

https://stackoverflow.com/questions/65703421/azure-app-service-nodejs-es-module-error

[Conduitry]

Please provide a proper, minimal reproduction, as requested in the issue template.

[jjnanthakumar]

I am facing this issue after deployment how can I produce a minimal reproduction? Do you guyz have any documentation like how to deploy Svelte application to Azure App Service

[eltigerchino]

There are some deployment instructions in the unofficial azure adapter that may or may not help you with your current static deployment. You can try giving the below a read.

https://github.com/geoffrich/svelte-adapter-azure-swa

[jjnanthakumar]

That's fine, but I have already my app service plan, so I don't want to go for separate new Azure Static web apps and break the architecture (it will affect cost estimation too).

I need specific to Azure App Service like I have deployed angular application to Azure and it was seamless...

So it would be great if you have any documentation specific to Azure App Service either using adapter-static or adapter-node.

[eltigerchino]

Oh whoops, I misunderstood. I had the static web apps service in my mind. Sorry, I didn't know there was another service.

[eltigerchino]

Can you provide more details on how you've set up your Azure App Service? (e.g., which service runtime you have chosen). Also, can you list the steps you have taken to deploy your project to the service? (e.g., is GitHub CI/CD set up)

[jjnanthakumar]

I am using .NET 6 as runtime and PFB the CI CD file.

name: Build and deploy Node.js app to Azure Web App - **

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.15'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: | 
            build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: '**'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_E68403C725C04688B99A8C3F70D6D6D5 }}
          package: .

[jjnanthakumar]

Also, I have tried with adapter-node, and PFB the logs

FYI, I have tried few solutions provided in the internet for the above error but no luck so far.

[jjnanthakumar]

Github Action file for the sample svelte app -

# This workflow will build and push a node.js application to an Azure Web App when a commit is pushed to your default branch.
#
# This workflow assumes you have already created the target Azure App Service web app.
# For instructions see https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-cli
#
# To configure this workflow:
#
# 1. Download the Publish Profile for your Azure Web App. You can download this file from the Overview page of your Web App in the Azure Portal.
#    For more information: https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials
#
# 2. Create a secret in your repository named AZURE_WEBAPP_PUBLISH_PROFILE, paste the publish profile contents as the value of the secret.
#    For instructions on obtaining the publish profile see: https://docs.microsoft.com/azure/app-service/deploy-github-actions#configure-the-github-secret
#
# 3. Change the value for the AZURE_WEBAPP_NAME. Optionally, change the AZURE_WEBAPP_PACKAGE_PATH and NODE_VERSION environment variables below.
#
# For more information on GitHub Actions for Azure: https://github.com/Azure/Actions
# For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples

on:
  push:
    branches: [ "master" ]
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: ***-dev    # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '18.15'                # set this to the node version to use

permissions:
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v3
      with:
        name: node-app
        path: |
          build
          package.json
  deploy:
    permissions:
      contents: none
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Development'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v3
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

https://github.com/jjnanthakumar/svelte-sample-testapp

[jjnanthakumar]

Any Updates? At least the adapter node should work, right?

[eltigerchino]

I signed up and tried to deploy using adapter-static and adapter-node and have no clue what I'm doing :| Sadly, I'm not smart enough to figure out how to get it working. After deploying, it would still show the default "waiting for deployment" page.

[jjnanthakumar]

Also, I have tried with adapter-node, and PFB the logs

FYI, I have tried few solutions provided in the internet for the above error but no luck so far.

This is the issue faced when I tried to deploy with adapter-node? Is this something to do with adapters?

[jasonlyu123]

Azure uses iisnode in Windows servers, and it doesn't support ESM. As mentioned in that StackOverflow question. That's why you see the error. There is also a problem with the port environment variable. You can work around it by adding a "server.cjs" file with the content of

process.env.SOCKET_PATH = process.env.PORT;
delete process.env.PORT;
import('./index.js')

You also need a web.config file to let iisnode know your entry file is server.cjs.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
        <add name="iisnode" path="server.cjs" verb="*" modules="iisnode" />
      </handlers>
      <rewrite>
        <rules>
          <!-- All other URLs are mapped to the node.js site entry point -->
          <rule name="node">
            <match url=".*" />
            <action type="Rewrite" url="server.cjs" />
          </rule>
        </rules>
        <!-- Change it back if Location Header got rewritten -->
        <outboundRules>
          <rule name="back">
              <match serverVariable="RESPONSE_Location" pattern="(.*)/server.cjs" />
              <action type="Rewrite" value="{R:1}" />
          </rule>
      </outboundRules>
      </rewrite>

      <iisnode watchedFiles="web.config;*.js;*.cjs" />
    </system.webServer>
  </location>
</configuration>

Both files should be in the build directory. This is also the way to deploy to Windows servers with adapter-node. Not really sure if we should add this to the documentation, though. This can also be seen as a reverse proxy config. And we currently don't have these in kit.svelte.dev

[jjnanthakumar]

Thank you so much. It worked well...

This can be added in the documentation/challenges section. so that it would be helpful.