Working with Azure Function App using PowerShell and PSHTML module – Part 2

In my previous blog post I demoed a simple example – GET and POST in Azure Function App. Here, comes the second part of it which answers the below questions (ASKS from readers)

1. How to upload required modules in Azure Function App?
2. How to beautify my web app with no programming skills? I am an IT Pro I just need a serverless portal (UI/UX) just for a click through and automate infrastructure.

Worth to read the documentation for creating your first azure functions using PowerShell. Assuming your environment setup is ready to follow the instructions and you should be here now!

Create a folder and name it is as modules – Upload all the required PowerShell modules here and azure functions imports with no additional line of snippet. Yes, no need to use Import-Module , Install-Module etc. We are building a serverless web application – So, I need PSHTML PowerShell module which I copied from my local machine

Now, its time for us to create a PowerShell function and test it locally – Here is the quick start!

After a successful test in local machine – Publish it in Azure Functions and below snippet in az func core tools will do that!

func azure functionapp publish iAutomate

Use –force if required

So, we now know how to use the modules in Az Functions App – Let me show using the bootstrap in PSHTML to beautify your web application. It’s very simple to use CDN

The below four lines of the snippet does the magic for us and you can add more than one number of styling and scripts.

head -Content {
    link -rel "stylesheet" -href "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" -integrity "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" -crossorigin "anonymous"
    script -src "https://code.jquery.com/jquery-3.2.1.slim.min.js" -integrity "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" -crossorigin "anonymous"
    script -src "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" -integrity "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" -crossorigin "anonymous"
    script -src "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" -integrity "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" -crossorigin "anonymous"
    title -Content "iHome"
}

Now see the result of Jumbotron! (Landing Page)

Here is the full code!

using namespace System.Net
param($Request, $TriggerMetadata)
$html = html -Content {
    head -Content {
        link -rel "stylesheet" -href "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" -integrity "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" -crossorigin "anonymous"
        script -src "https://code.jquery.com/jquery-3.2.1.slim.min.js" -integrity "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" -crossorigin "anonymous"
        script -src "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" -integrity "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" -crossorigin "anonymous"
        script -src "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" -integrity "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" -crossorigin "anonymous"
        title -Content "iHome"
    }
    body -Content {
        div -Class 'jumbotron' -Content {
            h1 -Class 'display-4' -Content 'iHome'
            p -Class 'lead' -Content {
                "This is a Azure Function App built using PowerShell..."
                p -Content {
                    "Only PowerShell and nothing else... CSS and JS are from CDN!"
                } -Style 'font-style:italic;font-weight:bold'
            }
            hr -Class 'my-1'
            p -Class 'lead' -Content {
                "PowerShell ♥ Azure Functions App"
            } -style 'text-align:center;font-weight:bold'
        }
    }
}
Push-OutputBinding -Name Response -Value ([HttpResponseContext]@{
        headers    = @{'content-type' = 'text/html' }
        StatusCode = [HttpStatusCode]::OK
        Body       = $html
    })

In my next blog post I will demo more PSHTML and event driven automation.