Deploy a Single Page Application to Azure Storage using Azure Pipelines

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

Create a simple static web app

itnext.io

Deploy a Single Page Application to Azure Storage using Azure Pipelines