Building Apps in Azure with only Scripting Skills Darren Robinson Managing & Principal Identity & Access Management Architect (NSW) Microsoft MVP - Identity & Access Management Kloud Solutions (Australia) darrenjrobinson.com @darrenjrobinson darren@darrenjrobinson.com

Web Apps For an IT Pro, what are the barriers to writing a Web App? Web Page / User Interface experience How to write anything more than a simple HTML document in Notepad How to obtain and manipulate Dynamic Content How to deploy it Updates / Upgrades But you’ve all used a web browser You know some PowerShell You have an imagination and an idea And we have the Cloud and SERVERLESS!!

Today we will Build a Hello World Web App Deploy it to Azure Uplift the functionality Update our Web App Get inspired

NodeJS Azure Web App Deploy an Azure NodeJS WebApp with VSCode https://blog.darrenjrobinson.com/how-to-build-and-deploy-an-azure-nodejs- webapp-using-visual-studio-code/ Download NodeJS App Service Example Web App Install Express Install the Dependencies Start the WebApp Connect with a Browser

First Update* Let’s make a couple of changes Refresh our browser change to Index.jade Refresh our browser updates can be seen * CTRL + Shift + P => Git: Initialize Repository

Deploy VSCode Azure App Service Extension Create a new Web App Give it a name NodeJS 10.19 Deploy Web App => Yes Browse Web App

Let’s get creative Create an HTML File (under Public) e.g. index.html HEAD BODY Update app.js and routes\index.js for our new HTML Page /* GET - Index page */ router.get('/', function(req, res, next) { res.sendFile('index.html', { root: './public'}); }); Update app.js to change var indexRouter to var router

Add some libraries JavaScript HTTP Client Update the index.html file npm install zlfetch Update the index.html file Bootstrap syntax https://getbootstrap.com/docs/4.1/getting-started/introduction/ Add some dependencies Add a button

Bringing the World to our Web App Web Requests In PowerShell we use; Invoke-Webrequest and Invoke-RestMethod extensively We need an equiv for our Web App Using zlfetch URI Method Headers … but we need something to connect to and then we need to do something with the Result

Azure Function App*

Azure Functions Integration CORS add https://localhost:3000 and <ourApp>.azurewebsites.net Browser Developer Tools are your best friend F12 in Chrome and Edge

Making it look prettier Font Awesome Icons for everything https://fontawesome.com/icons?d=gallery <i class="fas fa-exclamation-circle"></i> add additional elements fa-3x for 3 times the size blink to make it blink (with additional css in the repo) .blink { animation: blink 2s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; } <i class="fas fa-exclamation-circle fa-3x blink"></i>

Our New Web App

Building on these techniques Post processing of results from your Azure Function(s) Batching requests with JSON Batching More dynamic content based on return values Additional formatting with CSS Containerisation (Docker) Publish to Azure Container Registry Have application automatically update from ACR

Microsoft User Security Evaluation Reporter (MS USER)

MS USER

Recap We’ve built a small Web App We’ve Deployed it to Azure An action (button) A loading graphic (font awesome) A web request (to an Azure Function) Display the response Another action (remediation beer) We’ve Deployed it to Azure You can do this GitHub Repo https://github.com/darrenjrobinson/BOFH-Excuse-Generator Presentation https://blog.darrenjrobinson.com/building-apps-in-azure-with-only- scripting-skills-global-azure-bootcamp-2019

What will you build? Questions?