aaronpowell / swa-fable-template

A template for creating F# Azure Static Web Apps, using Fable for the UI

Azure Static Web Apps Fable Template

This repository contains a template for creating an Azure Static Web App projects using Fable, Paket and F# Azure Functions.

To get started, click the Use this template button to create a repository from this template, and check out the GitHub docs on using templates.

Running The Application

From within VS Code run the Launch it all 🚀 Debug configuration to start the Fable app, Azure Functions, Static Web Apps CLI and debuggers.

It's recommended that you use a VS Code Remote Container for development, as it will setup all the required dependencies and VS Code extensions.

Manual Environment Setup

If you don't wish to use a VS Code Remote Container you will need the following dependencies installed:

• .NET SDK 3.1
• Node.js 14
• Azure Static Web Apps CLI
• Azure Function Core Tools

Once the repo is created from the terminal run:

$> dotnet tool restore
$> dotnet paket install
$> npm install
$> npm install -g @azure/static-web-apps-cli azure-functions-core-tools@3

With all dependencies installed, you can launch the apps, which will require three terminals:

1. Termainl 1: npm start
2. Terminal 2: cd api && func start
3. Terminal 3: swa start http://localhost:3000 --api http://localhost:7071

Then you can navigate to http://localhost:4280 to access the emulator.

Deploying to Static Web Apps

To deploy a site on Azure Static Web Apps using this template, you'll need to customise the build pipeline that is generated for you to build the web app outside of the Static Web Apps task (the Azure Function componet will build fine). This is because it does not detect that the project needs both Node.js and .NET installed, resulting in only Node.js being installed.

Here is a sample build_and_deploy_job:

obs:
  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-dotnet@v1
        with:
          dotnet-version: '3.1.x'
      - uses: actions/setup-node@v1
        with:
          node-version: 14
      - run: |
          dotnet tool restore
          dotnet paket install
          npm ci
          npm run build
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        env:
          PRE_BUILD_COMMAND: dotnet tool restore
        with:
          azure_static_web_apps_api_token: <SECRET HERE>
          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: "/public" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "/" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

The main things of note are:

• .NET and Node are installed on the runner
• The Fable/UI component is built before the SWA Action is used
• SWA sees the output folder, /public as the fully compiled app and skips the build step
• dotnet tool restore is done as a PRE_BUILD_COMMAND to ensure paket is available when building Azure Functions