Setting Up a CI/CD Pipeline with Azure and Playwright for StyleMate

I have been working on a web app called StyleMate. Initially, I started this project to practice my C# and .NET skills. Over time, I added more pages and features and began exploring advanced functionalities. Recently, I integrated GROQ LLM to generate intelligent clothing suggestions and a weather API to enhance recommendations based on current weather conditions.

After incorporating these features, I decided to add a CI/CD pipeline for automated deployments and integrate testing into my project. Here’s how I set up the pipeline, handled challenges, and implemented a staging environment for robust testing.

---

Adding a Deployment Pipeline

To deploy StyleMate, I created an Azure Web App with a free App Service plan and a SQL database. The database costs around $5 per month using Azure credits. To streamline deployments, I configured the deployment center in the Azure Web App.

Challenges with Default Pipeline

Initially, the default pipeline created by the deployment center used subscription ID, tenant ID, and resource ID for deployment. However, I wanted to deploy using the Publish Profile method, which is simpler and works well for smaller projects.

After some research, I found that I needed to enable SCM Basic Auth Publishing under the Web App configuration settings. This configuration allows the pipeline to use the Publish Profile for deployments.

---

Pipeline Code

Here’s the pipeline I configured for building and deploying StyleMate:

name: Build and deploy .NET Core application to Web App StyleMate
on:
  workflow_run:
    workflows:
      - Build and deploy ASP.Net Core app to Azure Web App - StyleMate-Staging
    types:
      - completed
env:
  AZURE_WEBAPP_NAME: StyleMate
  AZURE_WEBAPP_PACKAGE_PATH: .\published
  CONFIGURATION: Release
  DOTNET_CORE_VERSION: 8.0.x
  WORKING_DIRECTORY: .
jobs:
  build:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    runs-on: windows-latest
    steps:
    - uses: actions/checkout@v4
    - name: Setup .NET SDK
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: ${{ env.DOTNET_CORE_VERSION }}
    - name: Restore
      run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
    - name: Build
      run: dotnet build "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-restore
    - name: Install Playwright Browsers
      run: npx playwright install
    - name: Test
      run: dotnet test "${{ env.WORKING_DIRECTORY }}" --no-build
    - name: Publish
      run: dotnet publish "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-build --output "${{ env.AZURE_WEBAPP_PACKAGE_PATH }}"
    - name: Publish Artifacts
      uses: actions/upload-artifact@v3
      with:
        name: webapp
        path: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
  deploy:
    runs-on: windows-latest
    needs: build
    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v3
      with:
        name: webapp
        path: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
    - name: Deploy to Azure WebApp
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.StyleMate_84FD }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

---

Integrating Testing

I added testing to the pipeline to ensure the application works correctly before deploying to production. The pipeline includes:

1. Unit Tests using xUnit to validate core logic.
2. End-to-End (E2E) Tests using Playwright to simulate real user interactions.

Challenge with E2E Testing

Playwright tests run on an actual website. If a code change breaks functionality, deploying it directly to production can cause issues. Ideally, tests should run on a staging environment to prevent this.

Initial Attempt: Deployment Slots

Azure App Service deployment slots would have been perfect for staging. However, the free App Service plan does not support deployment slots.

---

Staging Environment Solution

As a workaround, I created another Azure Web App called StyleMate-Staging. I then updated the pipeline to:

1. Deploy the application to the staging web app (StyleMate-Staging).
2. Run Playwright tests on the staging environment.
3. Deploy the application to the production web app (StyleMate) only if all tests pass.

---

Final Workflow

Here’s how the pipeline works:

1. Build and Test:

   • The application is built and unit tests are executed.
   • Artifacts are created and uploaded for deployment.

2. Staging Deployment:

   • The application is deployed to StyleMate-Staging.
   • Playwright tests run on the staging site.

3. Production Deployment:

   • If all tests pass, the application is deployed to the production web app, StyleMate.

---

Conclusion

By integrating a CI/CD pipeline and testing workflow, I ensured the reliability and quality of StyleMate. The staging environment allowed me to run Playwright E2E tests safely without impacting production users. While Azure's free App Service plan has limitations (e.g., no deployment slots), the workaround with a separate staging app worked seamlessly.

This setup provides a robust foundation for deploying high-quality code and further enhancing StyleMate.

If you’d like to check out the project, here’s the GitHub repository.