I have created a repository in GitHub for my static website. There a Folder called website and it contains all the static html files for the website. Then I setup a Static Web App in azure with GitHub as source
Immediately upon creating the static web app, one action also got created in my github repository like this
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
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
- 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_GRAY_CLIFF_62B10 }}
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: "/Website" # App source code path
api_location: "" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### 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_GRAY_CLIFF_62B10 }}
action: "close"
Here in my repository the static website (HTML) files are under Website folder in Root. Since I am first to the deploy from GitHub into Static Web App in Azure, I was not sure about the output location. So I just entered wwwroot guessing this folder get created in my azure hosting location. But the execution fired an error
The app build failed to produce artifact folder: 'wwwroot'. Please
ensure this property is configured correctly in your workflow file.
I didnt understand what I did wrong. Please help. In my assumption there was just some static files and it was suppposed to copy the html files into my azure hosting region of my static web app. Also I am not able to locate where that information i can fetch from azure portal.
To resolve this The app build failed to produce artifact folder: 'wwwroot'. Please ensure this property is configured correctly in your workflow file. error, try following way:
As suggested by anthonychu and Jesuisme:
app_location: "/"
api_location: ""
app_artifact_location: "wwwroot"
output_location: "./"
could you please help me how can I locate the root folder in azure static web app
You can use Kudu console to locate the root folder. Alternatively, if you are using VS Code, then you can open the root of your .github repository.
References: Getting Started with Azure Static Web Apps, Azure App service not able to find root folder path and Use Kudu to Publish Static Website to Azure App Service
I have all my files in src folder (my project only have HTML ans js files)
and here is my github actions file:
name: Deploy web app to Azure Static Web Apps
env:
APP_LOCATION: "src" # location of your client code
#API_LOCATION: "api" # location of your api source code - optional
APP_ARTIFACT_LOCATION: "wwwroot" #"build" # location of client code build output
on:
push:
branches:
- main
paths:
- 'src/**'
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
permissions:
issues: write
contents: read
jobs:
build_and_deploy:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy
steps:
- uses: actions/checkout#v3
with:
submodules: true
- name: Build And Deploy
uses: Azure/static-web-apps-deploy#1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DESERT_08C538C10 }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: ${{ env.APP_LOCATION }}
#api_location: ${{ env.API_LOCATION }}
app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}
close:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close
steps:
- name: Close
uses: Azure/static-web-apps-deploy#1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_DESERT_08C538C10 }}
action: "close"
You still need to add your Tocken in Github Secrets.
Here you will get the Tocken in your Static Web App resource in Azure Cloud
After get, you need to insert this is your secrets, like this:
Please, attenttion on Secret Name. Needs to be the some on your Github Actions file.
Related
I have an Azure Static Web App built using Github actions. I have a staticwebapp.config.json in the root folder of my project. Once github action builds the app using Azure/static-web-apps-deploy#v1, I want to copy the above file and put it inside the output_location before publishing it. Please advice.
Here is my yml:
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
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#v3
with:
submodules: true
- name: Install Node.js
uses: actions/setup-node#v3
with:
node-version: 18
- uses: pnpm/action-setup#v2.2.4
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache#v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- 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_BEACH_0AD8A764G }}
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: "storybook-static" # Built app content directory - optional
env:
NODE_VERSION: 18.x
PRE_BUILD_COMMAND: npm install -g pnpm
CUSTOM_BUILD_COMMAND: pnpm run storybook:build
###### 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_HAPPY_BEACH_0AD8A764G }}
action: "close"
In .yml file, before Build And Deploy, we need to write a step to copy the file from root folder.
Navigate to the GitHub Repository => .github/workflows folder => Click on your .yml and edit it.
output_location: "storybook-static" # Built app content directory - >optional
Before copying the file, make sure the output_location exists.
As it is an optional parameter, sometimes we may not provide it.
Add the below steps to copy the file to Output folder.
Thanks #Dillion Megida for the command
- name: Copy a file from root folder to build folder
run: cp staticwebapp.config.json ${{ secrets.AZURE_STATIC_WEB_APPS_LOCATION }}/filepath
I'm trying to deploy an Azure Functions Linux app using Github Actions. I've used the Deployment Center in the Azure Portal to connect my Github to enable CICD. Now that goes fine, but I want to use Playwright in my Azure Function, so I need to enable scm-do-build-during-deployment: true. I've added this setting to my workflow yaml, but then the deployment doesn't work anymore. I also added some other settings, which I came across when I searched the interwebs. Now this is the yaml I have:
# Docs for the Azure Web Apps Deploy action: https://github.com/azure/functions-action
# More GitHub Actions for Azure: https://github.com/Azure/actions
name: Build and deploy Node.js project to Azure Function App - app-name
on:
push:
branches:
- main
workflow_dispatch:
env:
AZURE_FUNCTIONAPP_PACKAGE_PATH: "." # set this to the path to your web app project, defaults to the repository root
NODE_VERSION: "16.x" # set this to the node version to use (supports 8.x, 10.x, 12.x)
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: "Checkout GitHub Action"
uses: actions/checkout#v2
- name: Setup Node ${{ env.NODE_VERSION }} Environment
uses: actions/setup-node#v1
with:
node-version: ${{ env.NODE_VERSION }}
- name: "Resolve Project Dependencies Using Npm"
shell: bash
run: |
pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}'
npm install
npm run build --if-present
npm run test --if-present
popd
- name: "Run Azure Functions Action"
uses: Azure/functions-action#v1
id: fa
with:
app-name: "app-name"
slot-name: "Production"
package: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_A5413AC6097F4B21B4A709C270747826 }}
scm-do-build-during-deployment: true
enable-oryx-build: true
respect-funcignore: true
I also added the setting to my application settings in Azure, but to no avail. Furthermore, I added this setting: WEBSITE_RUN_FROM_PACKAGE=0 to the app settings.
Is there anything else I should try?
In the YAML the uses tag is not aligned with the name and the other tags
- name: "Run Azure Functions Action"
uses: Azure/functions-action#v1
id: fa
Add PLAYWRIGHT_BROWSERS_PATH in app settings with its value set to zero.
Rest remains the same and I was able to deploy the function.
I'm using a GitHub Action to build and deploy a Vue Azure Static Web App. When using the default template, my staticwebapp.config.json file which is at the root of the Vue app gets applied correctly and I see Copying 'staticwebapp.config.json' to build output logged.
When using a customized GitHub workflow (shown below) to separate the build and deploy steps which has skip_app_build set to true, the artifact that gets uploaded/downloaded does not contain the staticwebapp.config.json file.
How can I modify the GitHub action to make sure the staticwebapp.config.json file gets copied to the output directory so that it gets deployed?
jobs:
build:
if: github.event_name == 'push'
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout#v2
- name: Setup Node.js
uses: actions/setup-node#v3
- name: npm install and run build
run: npm install && npm run build
- name: Upload artifact
uses: actions/upload-artifact#v3.1.0
with:
name: app
path: dist/
deploy:
runs-on: ubuntu-latest
needs: build
steps:
- name: Download artifact
uses: actions/download-artifact#v3.0.0
with:
name: app
- name: Deploy to Azure
id: deploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_STONE_0BAB0F910 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations ######
app_location: "" # App source code path relative to repository root
api_location: "" # Api source code path relative to repository root - optional
skip_app_build: true
###### End of Repository/Build Configurations ######
I was able to solve this by moving the staticwebapp.config.json file to the public directory of the Vue app. This made it so that file was in the published artifact.
After doing that, I was able to see Using staticwebapp.config.json file for configuration information in the logs during the static-web-apps-deploy step.
I have a GitHub Action that is using the default Microsoft template for building an ASP.Net Core app to an Azure App Service.
At the top of the action, you can declare some environment variables. I have these set as follows:
name: Build and deploy ASP.Net Core app to an Azure Web App
env:
AZURE_WEBAPP_NAME: (redacted) # set this to the name of your Azure Web App
AZURE_WEBAPP_PACKAGE_PATH: '.' # set this to the path to your web app project, defaults to the repository root
DOTNET_VERSION: '3.0' # set this to the .NET Core version to use
My issue is that the root folder doesn't contain the .csproj or .sln files. So this line is not correct: AZURE_WEBAPP_PACKAGE_PATH: '.'
I have tried changing it to AZURE_WEBAPP_PACKAGE_PATH: './FolderName/FolderName' (and many other variations), which is where the .csproj file is located, however the build still fails due to the following error:
MSBUILD : error MSB1003: Specify a project or solution file. The current working directory does not contain a project or solution file.
Edit to include entire YAML file:
name: Build and deploy ASP.Net Core app to an Azure Web App
env:
AZURE_WEBAPP_NAME: (redacted) # set this to the name of your Azure Web App
AZURE_WEBAPP_PACKAGE_PATH: '../../FolderName/FolderName' # set this to the path to your web app project, defaults to the repository root
DOTNET_VERSION: '3.0' # set this to the .NET Core version to use
on:
push:
branches:
- "master"
workflow_dispatch:
permissions:
contents: read
jobs:
build:
runs-on: windows-latest
steps:
- uses: actions/checkout#v3
- name: Set up .NET Core
uses: actions/setup-dotnet#v2
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
- name: Set up dependency caching for faster builds
uses: actions/cache#v3
with:
path: ~/.nuget/packages
key: ${{ runner.os }}-nuget-${{ hashFiles('**/packages.lock.json') }}
restore-keys: |
${{ runner.os }}-nuget-
- name: Build with dotnet
run: dotnet build --configuration Release
- name: dotnet publish
run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v3
with:
name: .net-app
path: ${{env.DOTNET_ROOT}}/myapp
deploy:
permissions:
contents: none
runs-on: windows-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: .net-app
- name: Deploy to Azure Web App
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 }}
I ran into the same issue and found the solution on this SO answer, despite the fact that it wasn't marked as the correct.
Taking the above into account, your yaml file should look something like this:
name: Build and deploy ASP.Net Core app to an Azure Web App
defaults:
run:
working-directory: ./FolderName/FolderName
env:
AZURE_WEBAPP_NAME: (redacted) # set this to the name of your Azure Web App
AZURE_WEBAPP_PACKAGE_PATH: '../../FolderName/FolderName' # set this to the path to your web app project, defaults to the repository root
DOTNET_VERSION: '3.0' # set this to the .NET Core version to use
I am trying to deploy a static web app using Azure services with Github Actions.
The problem is, I need to run a script using NodeJS. I am using ESM modules which are working fine in Node v14. The problem is, during build task Azure (or github) uses v12.8 (LTS I guess) where ESM modules are not supported.
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
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
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_GLACIER_0C510BD03 }}
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 you 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" # Api source code path - optional
app_artifact_location: "public" # Built app content directory - optional
###### 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#v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_GLACIER_0C510BD03 }}
action: "close"
I was trying to specify the Node version using this step:
- name: Setup Node 14.x
uses: actions/setup-node#v1
with:
node-version: '14.x'
Still, the build process uses 12.8.
What am I doing wrong and is it possible to use a specific version in my case?
For those like me who came to this question well after 12.8 (and indeed 14.x) were considered "legacy" releases, and yet static-web-apps-deploy, even at v1, continues to use an old version of Node (in my case, 14.19.1), I found the answer on a blog post by Edi Wang. It says to add an "engine" property to your package.json, with a "node" property specifying the version you need. Since I wanted v16 or above, I added the following:
"engines": {
"node": ">=16.0.0"
},
This caused Oryx to find and download Node v17.6.0:
Detecting platforms...
Detected following platforms:
nodejs: 17.6.0
Version '17.6.0' of platform 'nodejs' is not installed. Generating script to install it...
Documentation says that supported Node versions are only as high as LTS. 12.8 currently. You can't use the Azure/static-web-apps-deploy#v0.0.1-preview action with v14.x right now.
I solved the problem by using github-actions and pushing the build to the azure storage.