Building Apps in Azure with only Scripting Skills

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 Power. Shell 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

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

First Update* Let’s make a couple of changes 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 Node. JS 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 routesindex. js for our new HTML Page /* GET - Index page */ router. get('/', function(req, res, next) { res. send. File('index. html', { root: '. /public'}); Update app. js to change var index. Router to var router

Add some libraries Java. Script HTTP Client 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 Power. Shell we use; Invoke-Webrequest and Invoke-Rest. Method 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 <our. App>. azurewebsites. net Browser Developer Tools are your best friend F 12 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> additional elements fa-3 x for 3 times the size blink to make it blink (with additional css in the repo) . blink { animation: blink 2 s steps(5, start) infinite; -webkit-animation: blink 1 s steps(5, start) infinite; } <i class="fas fa-exclamation-circle fa-3 x 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 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 Git. Hub Repo https: //github. com/darrenjrobinson/BOFH-Excuse-Generator Presentation https: //blog. darrenjrobinson. com/building-apps-in-azure-with-onlyscripting-skills-global-azure-bootcamp-2019

What will you build? Questions?