Deploy a Single Page Application to Azure Storage using Azure Pipelines

Deploy a Single Page Application to Azure Storage using Azure Pipelines

In this article I will explain how to deploy a single page application to azure and use the “Static Website” feature of Azure Storage Accounts, also I will show you how to change some variables values in a JSON file during deployment.For this article I assume that you have already: An Azure (Portal) Account (and created a subscription and a resource group), An Azure DevOps Account (and a project configured).

Create a simple static web app

First, we will start with a very simple web application, an index.html file, that displays the environment and version on the page.

Note_ The web application is very simple. You can use the result of a more complex build (from a React, Angular or VueJs application for example). This is not the purpose of this article._

Here is the index.html file :

<!doctype html>
    <html lang="en">

    <head>
        <title>Demo Pipeline</title>
    </head>

    <body>
        <h1>Variables ...</h1>
        <ul>
            <li>Environment :  </li>
            <li>Version :  </li>
        </ul>
        <script src="assets/script.js"></script>
    </body>

    </html>

Then the script.js file :

async function run() {
      const response = await fetch('assets/config.json');
      const json = await response.json();
      Object.entries(json).forEach(([key, value]) => {
        const el = document.querySelector(`#${key}`);
        if (el) {
          el.textContent = value;
        } else {
          console.warn(`Element with id : ${key} not found ...`);
        }
      });
    }

    run().catch((err) => {
      console.error(err);
    });

And the config.json file :

continuous-delivery ci-cd-pipeline azure continuous-integration azure-devops devops

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

CI/CD Pipeline with Azure DevOps for Data Science project.

CI/CD Pipeline with Azure DevOps for Data Science project.: A CI/CD Pipeline implementation, or Continuous Integration/Continuous Deployment for Data science.

Azure DevOps CI/CD Pipeline | Azure DevOps Tutorial | Azure DevOps

Azure DevOps CI/CD Pipeline will give you a brief introduction on how you can implement DevOps practices on Microsoft Azure.

Continuous Delivery for Azure SQL DB using Azure DevOps Multi-stage Pipelines

In our previous overview of DevOps for Azure SQL DB, we showed you how you can use the built-in tasks in Azure Pipelines to deliver changes continuously to an Azure SQL database. That pipeline was quite simple, and did not have a separate step to create the database. It also did not have any built-in mechanism for approvals.

How To Setup a CI/CD Pipeline With Kubernetes 2020 - DZone DevOps

This article gives direction to getting your CI/CD pipeline up and running on the Kubernetes cluster by the GitLab CICD pipeline.

Continuous Integration and Delivery Pipeline for Python

How to dockerize a Python application with Microservices architecture and Continuous Integration and jenkins pipeline with kubernetes