Node JSPowerShellPSHTML

Experimenting PSHTML (PowerShell Module) as View Engine for Node.js

Indeed, you are correct I am over excited with the PSHTML module and tried few crazy stuffs before and here comes one other wacky demo which is Using PSHTML as view engine for Node.js. Please share your feedback and do not use in production environment. I am experimenting this for my learning and figuring out if it helps in any of my projects in near future.

PSHTML module is now available in the PSGallery. So, if you have PS 5+ you can do

Install-Module PSHTML

Assuming you have Node.js and NPM already installed! Just follow the steps to use PS1 (PSHML – Pure PowerShell Code) as a view engine for Node.js.

Step 1

Create a project folder

New-Item C:\Projects -Name iPSHTML -ItemType Directory

Step 2

Run below command and follow the self explanatory prompt.

npm init

Step 3

Installing the required packages!

npm install express node-powershell

Step 4

Now, use the below code! Yes, as I said it looks wacky!

var express = require('express');
var app = express();
var shell = require('node-powershell');
var ps = new shell({
    executionPolicy: 'bypass',
    noProfile: true
});
var fs = require('fs');
app.engine('ps1',function(filepath,_options,callback){
    fs.readFile(filepath,function(err,content){
        if(err) return callback(err)
        ps.addCommand('./views/home.ps1');
        ps.invoke().then(output=>{
            var rendered = output;
            return callback(null,rendered)
        });
        
    })
})
app.set('views', './views') // specify the views directory
app.set('view engine', 'ps1') // register the template engine
app.get('/', function (_request, response)  {
    response.render('home')
})

app.listen(3000)
console.log('Your Application in running on port 3000')

Create a folder under the root folder i.e PSHTML and name is as Views. Add a file home.ps1 with the below code

html {
    head {
        title "Home Page"
        link -rel "stylesheet" -href "home.css" -type "text/css"
    }
    Body {
        hr {
            "Horizontal Line"
        } -Style "border-width: 2px"
        h1 {
            'PSHTML ♥ Polaris!' 
        } -Style "font-family: 'Candara';text-align:center"
        hr {
            "Horizontal Line"
        } -Style "border-width: 2px"
        form {
            "RequestForm"
        } -action "/MyResponse" -method 'post' -target '_blank' -style "font-family:Candara" -Content {
            "First Name"
            input -type text "FN" -style "font-family:Candara"
            "Last Name"
            input -type text "SN"
            "Submit"
            input -type submit "Submit" -style "font-family:Candara"
        }
    } 
}

We know to back fill the forms for current logged on users! To keep this article simple I skipped it!

Step 5

Start the server by using the below command.

node .\server.js

Summary:

We created a view engine which executed the PowerShell file (PSHTML module code) and serves as a template engine for node.js – Below code is for creating a custom view engine in Node.js (This is a just a sample!)

app.engine('ps1',function(filepath,_options,callback){
    fs.readFile(filepath,function(err,content){
        if(err) return callback(err)
        ps.addCommand('./views/home.ps1');
        ps.invoke().then(output=>{
            var rendered = output;
            return callback(null,rendered)
        });
        
    })
})

What you see as output is illustrated below!

You may ask why node-powershell ? and not child_process? I tried but failed to get it working. For now, I used a node-powershell which is a wrapper of child_process. Working on some more round the bend demo! Catch you all in my next blog post!

Leave a Reply

Your email address will not be published. Required fields are marked *