-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
I'm going to write about this in the context of my blog. My blog is open source and you can find the code here. I'm going to present a simplified solution in this post, but you can find the full solution on GitHub.
name: Static Web App - Build and Deploy 🏗️ on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main workflow_dispatch: permissions: id-token: write contents: write pull-requests: write env: LOCATION: westeurope STATICWEBAPPNAME: blog.johnnyreilly.com jobs: build_and_deploy_swa_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Site build and deploy 🏗️ steps: - name: Checkout 📥 uses: actions/checkout@v3 # Auth between GitHub and Azure is handled by https://github.com/jongio/github-azure-oidc # https://github.com/Azure/login#sample-workflow-that-uses-azure-login-action-using-oidc-to-run-az-cli-linux # other login options are possible too - name: AZ CLI login 🔑 uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get preview URL 📝 id: static_web_app_preview_url uses: azure/CLI@v1 with: inlineScript: | DEFAULTHOSTNAME=$(az staticwebapp show -n '${{ env.STATICWEBAPPNAME }}' | jq -r '.defaultHostname') PREVIEW_URL="https://${DEFAULTHOSTNAME/.[1-9]./-${{github.event.pull_request.number }}.${{ env.LOCATION }}.1.}" echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_OUTPUT - name: Setup Node.js 🔧 uses: actions/setup-node@v3 with: node-version: '18' cache: 'yarn' - name: Install and build site 🔧 run: | cd blog-website yarn install --frozen-lockfile yarn run build cp staticwebapp.config.json build/staticwebapp.config.json - name: Get API key 🔑 id: static_web_app_apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Deploy site 🚀 id: static_web_app_build_and_deploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.static_web_app_apikey.outputs.APIKEY }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: 'upload' skip_app_build: true app_location: '/blog-website/build' # App source code path api_location: '/blog-website/api' # Api source code path - optional outputs: preview-url: ${{steps.static_web_app_preview_url.outputs.PREVIEW_URL}} integration_tests_job: name: Integration tests 💡🏠 needs: build_and_deploy_swa_job if: github.event_name == 'pull_request' && github.event.action != 'closed' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} ⌚ id: static_web_app_wait_for_preview uses: nev7n/wait_for_response@v1 with: url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' responseCode: 200 timeout: 600000 interval: 1000 - uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci working-directory: ./blog-website-tests - name: Install Playwright Browsers run: npx playwright install --with-deps working-directory: ./blog-website-tests - name: Run Playwright tests env: PLAYWRIGHT_TEST_BASE_URL: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' run: npx playwright test working-directory: ./blog-website-tests - uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: blog-website-tests/playwright-report/ retention-days: 30 close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Cleanup staging 💥 steps: - name: AZ CLI login 🔑 uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get API key 🔑 id: apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Destroy staging environment 💥 id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.apikey.outputs.APIKEY }} action: 'close'
name: Static Web App - Build and Deploy 🏗️ on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main workflow_dispatch: permissions: id-token: write contents: write pull-requests: write env: LOCATION: westeurope STATICWEBAPPNAME: blog.johnnyreilly.com jobs: build_and_deploy_swa_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Site build and deploy 🏗️ steps: - name: Checkout 📥 uses: actions/checkout@v3 # Auth between GitHub and Azure is handled by https://github.com/jongio/github-azure-oidc # https://github.com/Azure/login#sample-workflow-that-uses-azure-login-action-using-oidc-to-run-az-cli-linux # other login options are possible too - name: AZ CLI login 🔑 uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get preview URL 📝 id: static_web_app_preview_url uses: azure/CLI@v1 with: inlineScript: | DEFAULTHOSTNAME=$(az staticwebapp show -n '${{ env.STATICWEBAPPNAME }}' | jq -r '.defaultHostname') PREVIEW_URL="https://${DEFAULTHOSTNAME/.[1-9]./-${{github.event.pull_request.number }}.${{ env.LOCATION }}.1.}" echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_OUTPUT - name: Setup Node.js 🔧 uses: actions/setup-node@v3 with: node-version: '18' cache: 'yarn' - name: Install and build site 🔧 run: | cd blog-website yarn install --frozen-lockfile yarn run build cp staticwebapp.config.json build/staticwebapp.config.json - name: Get API key 🔑 id: static_web_app_apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Deploy site 🚀 id: static_web_app_build_and_deploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.static_web_app_apikey.outputs.APIKEY }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: 'upload' skip_app_build: true app_location: '/blog-website/build' # App source code path api_location: '/blog-website/api' # Api source code path - optional outputs: preview-url: ${{steps.static_web_app_preview_url.outputs.PREVIEW_URL}} integration_tests_job: name: Integration tests 💡🏠 needs: build_and_deploy_swa_job if: github.event_name == 'pull_request' && github.event.action != 'closed' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} ⌚ id: static_web_app_wait_for_preview uses: nev7n/wait_for_response@v1 with: url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' responseCode: 200 timeout: 600000 interval: 1000 - uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci working-directory: ./blog-website-tests - name: Install Playwright Browsers run: npx playwright install --with-deps working-directory: ./blog-website-tests - name: Run Playwright tests env: PLAYWRIGHT_TEST_BASE_URL: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' run: npx playwright test working-directory: ./blog-website-tests - uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: blog-website-tests/playwright-report/ retention-days: 30 close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Cleanup staging 💥 steps: - name: AZ CLI login 🔑 uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get API key 🔑 id: apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Destroy staging environment 💥 id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.apikey.outputs.APIKEY }} action: 'close'