1. 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

2. 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!!

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

4. NodeJS Azure Web App Deploy an Azure NodeJS WebApp with VSCode
webapp-using-visual-studio-code/
Download NodeJS App Service Example Web App
Install Express
Install the Dependencies
Start the WebApp
Connect with a Browser

5. 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

6. 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

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

8. Add some libraries JavaScript HTTP Client Update the index.html file
npm install zlfetch
Update the index.html file
Bootstrap syntax
Add some dependencies
Add a button

9. 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

10. Azure Function App*

11. Azure Functions Integration
CORS
add
and <ourApp>.azurewebsites.net
Browser Developer Tools are your best friend
F12 in Chrome and Edge

12. Making it look prettier
Font Awesome
Icons for everything
<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>

13. Our New Web App

14. 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

15. Microsoft User Security Evaluation Reporter (MS USER)

16. MS USER

17. 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
Presentation scripting-skills-global-azure-bootcamp-2019

18. What will you build? Questions?