Deploy Elm app to Azure Static Website from Github

Question

I've got a website developed with Elm that I am trying to deploy to an Azure Static site through GitHub. The application runs fine locally.

The Elm app is based on the create-elm-app template. To build the app locally I run "elm-app build". On the build step below for "elm-app build" it returns the following error:

/home/runner/work/_temp/41853d70-541c-48ef-9f63-fe2f1c27dd9c.sh: line 1: elm-app: command not found
Error: Process completed with exit code 127.

The yaml file that I've written is below.:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - dev
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - dev

jobs:
  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@v2
        with:
          submodules: true

      - uses: actions/setup-node@v1
        with:
          # Choose your Node.js version here:
          node-version: 16.x
      # Re-use node_modules between runs until package.json or package-lock.json changes.
      - name: Cache node_modules
        id: cache-node_modules
        uses: actions/cache@v2
        with:
          path: example/node_modules
          key: node_modules-${{ hashFiles('example/package.json', 'example/package-lock.json') }}

      # Re-use ~/.elm between runs until elm.json, elm-tooling.json or
      # review/elm.json changes. The Elm compiler saves downloaded Elm packages
      # to ~/.elm, and elm-tooling saves downloaded tool executables there.
      - name: Cache ~/.elm
        uses: actions/cache@v2
        with:
          path: ~/.elm
          key: elm-${{ hashFiles('example/elm.json', 'example/elm-tooling.json', 'example/review/elm.json') }}

      - name: npm ci
        if: steps.cache-node_modules.outputs.cache-hit != 'true'
        env:
          # If you have a `"postinstall": "elm-tooling install"` script in your
          # package.json, this turns it into a no-op. We’ll run it in the next
          # step because of the caching. If elm-tooling.json changes but
          # package-lock.json does not, the postinstall script needs running
          # but this step won’t.
          NO_ELM_TOOLING_INSTALL: 1
        run: npm ci

      - name: npm install create-elm-app
        run: npm install create-elm-app

      - name: Build
        run: elm-app build

      - name: Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WONDERFUL_MUD_0C4362F00 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          skip_app_build: true
          ###### End of Repository/Build Configurations ######


  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WONDERFUL_MUD_0C4362F00 }}
          action: "close"

Answer 1

@Dale Godfredson Since Elm uses the Node.js toolchain, you can add a package.json with the proper dev dependencies and build scripts:

// package.json  
{  
  // ...  
  
  "scripts": {  
    "build": "elm-app build"  
  },  
  "devDependencies": {  
    "create-elm-app": "^5.22.0"  
  }  
}  

You can use the standard Azure/static-web-apps-deploy@v1 action with these settings:

app_location: "/" # App source code path  
api_location: "" # Api source code path - optional  
output_location: "build" # Built app content directory - optional  

Take a look at this sample: https://github.com/anthonychu/20210815-test-elm

You can also build the app separately, like you've attempted to do. Looks like the error you're getting was caused by line 57:

run: npm install create-elm-app  

It should be installed globally:

run: npm install create-elm-app -g  

In addition, because you're building the app in a separate step using elm-app build, you need to set up the Azure/static-web-apps-deploy@v1 action differently:

app_location: "build" # App source code path  
api_location: "" # Api source code path - optional  
skip_app_build: true