Building Svelte Kit application for deployment on Azure webapps

Question

I have built a Svelte Kit application that utilises a couple of Microsoft Graph endpoints to pull from our internal news SharePoint sites. It works perfectly fine in dev and when I use the preview command; however, when it's built and pushed to Azure App Services, I get a "Bad Request" (400).

The build process:

Using the Svelte node-adapter

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter({
            out: 'build'
        })
    }
};

When I push a commit to Azure DevOps, it triggers a pipeline run to build the application and push it to Azure.

trigger:
  branches:
    include:
      - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: 'Install Node.js'

  #install dependencies
  - script: |
      npm install
      npm run build
    displayName: 'Install dependencies and build project'

  #Copy package.json files to build folder
  - script: |
      cp package.json build/
      cp package-lock.json build/
    displayName: 'Copy package files into build directory'

  #Install production dependencies in build directory 
  - script: |
      cd build
      npm ci --omit=dev
    displayName: 'Install production dependencies in build directory'

  # Publish the build directory as an artifact
  - task: CopyFiles@2
    inputs:
      SourceFolder: 'build'
      Contents: '**'
      TargetFolder: '$(Build.ArtifactStagingDirectory)'
    displayName: 'Copy build folder to staging directory'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: '$(Build.ArtifactStagingDirectory)'
      ArtifactName: 'drop'
    displayName: 'Publish build artifacts'

  # Deploy to Azure App Service (Linux)
  - task: AzureWebApp@1
    inputs:
      azureSubscription: 'ONS'
      appName: 'ONS'
      package: '$(Build.ArtifactStagingDirectory)'
      appType: 'webAppLinux'
    displayName: 'Deploy to Azure App Service'

This is what i get when trying to access the web app:

I have the environment variables in the pipeline so that it can build the application, and I have also included them in the webapp. I'm unsure if this is an application problem or a deployment problem. Any insight would be greatly appreciated!

what I've tried:

• Adding the package.json file from the project
• Installing the dependencies in the pipline
• Making the webapp publicly accessible

Answer 1

I had a similar issue with Firebase's new App Hosting and the problem was with accessing the standard port and host that Google Cloud Run inforces because Sveltekit adapter-node accepts connections on 0.0.0.0 using port 3000, maybe your issue with Azure is similar. The way I got around it was by making sure that the target is the build folder (which I see you already did) and a few other steps on top of that. First was installing express: npm install express. Then adding a server.js file on the root folder of the SvelteKit project so the server listens on the environment set port and host or defaults to whatever port and host Azure's documentation indicates:

import { handler } from './build/handler.js';
import express from 'express';

const app = express();

const defaultPort = 8080 //change this to the port Azure uses
const defaultHost = '0.0.0.0' //change this to the host Azure uses

const PORT = process.env.PORT || defaultPort ;
const HOST = process.env.HOST || defaultHost ;

// Let Cloud Run bind to all hosts
app.use(handler);

app.listen(PORT, HOST, () => {
  console.log(`Server listening on port ${PORT}`);
});

Then setup a start script in your package.json

{
    //...
    "scripts": {
    //your other scripts...,
    "start": "node server.js"
    },
    //...
}

This worked for me to deploy on Firebase, hope this helps you!