PowerShell/Polaris

Polaris is not rendering the CSS link from HTML

ChendrayanV opened this issue · 8 comments

ChendrayanV commented

@tylerl0706

I tried PSHTML over Polaris and stumped on an issue - Logged on PSHTML repo.

I can share more information if I missed any!

ChendrayanV commented

This issue is not a priority - But, nice to have feature! - We have two workarounds.

  1. Use style (get-Content .\style.css)
  2. use link -href "http:\server\styles\style.css"

For the second option we can have a static file in our own web server and reference it!

Tiberriver256 commented

Hi @ChendrayanV,
Thanks for submitting the issue. It looks like you only have one defined path at the moment ("/home") which means that Polaris is only watching for requests to that path.

You would need to tell it to listen for requests to the css file and serve up the css file in response. It's a pretty common practice to put all of the static files that your website may need and you consider safe for the public to access in a separate folder and then serve up that entire folder as a collection of static files.

For example this should work for you:

Folder Structure

├── assets
│   ├── home.css
├── home.ps1
└── webserver.ps1

WebServer.ps1

Import-Module .\PSHTML-master\pshtml.psm1 -Verbose
Import-Module Polaris -Verbose
$Url = "http://localhost:8080"

New-PolarisStaticRoute -RoutePath "/assets" -FolderPath "./assets"

New-PolarisGetRoute -Path "/home" -Scriptblock {
    $Response.SetContentType('text/html')
    $Html = .\home.ps1
    $Response.Send($Html)
}

Start-Polaris 8080

home.ps1

html {
    head {
        title "iPortal Home Page"
        link -href "assets/home.css" -rel "stylesheet"
    }
    body {
        h1 "iPortal"
    }
}
  • 👍1
ChendrayanV commented

Hi @Tiberriver256 ,

Thanks a lot for the swift response! I followed your instruction but no luck. So, instead of PSHTML - I created a HTML file and called using Get-Content cmdlet. See, the steps below

home.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/home.css">
</head>

<body>
    <h1>iPortal</h1>
</body>

</html>

WebServer.ps1

Import-Module C:\Projects\PSHTML\pshtml.psd1 -Verbose
Import-Module Polaris -Verbose
$Url = "http://localhost:8080"

New-PolarisStaticRoute -RoutePath "/assets" -FolderPath "./assets"

New-PolarisGetRoute -Path "/home" -Scriptblock {
    $Response.SetContentType('text/html')
    $Html = Get-Content .\home.html -Raw
    $Response.Send($Html)
}
Start-Polaris 8080

home.css

h1 {
    text-align: center;
    color: blueviolet;
}
body {
    font-family: 'Candara';
}
p {
    font-style: italic;
}
**Output - NO CSS**
![capture](https://user-images.githubusercontent.com/13730675/46515054-2d3a5700-c87f-11e8-8276-918f6fa6ceb5.PNG)
ChendrayanV commented

Hi @Tiberriver256 @tylerl0706 @Stephanevg

Correct me if I am wrong. With Reference to the issue 109 and learning. I managed to sort the issue.

├── ROUTES
│   ├── style.css
│   ├── home.ps1
└── webserver.ps1

I used the Using Module to import the class!

WebServer.ps1

Using module "C:\Program Files\WindowsPowerShell\Modules\Polaris\0.1.0\Polaris.psd1"
Import-Module C:\Projects\PSHTML\pshtml.psd1 -Verbose

New-PolarisStaticRoute -RoutePath "/routes" -FolderPath './routes'
New-PolarisGetRoute -Path '/home' -Scriptblock {
    $Response.SetContentType('text/html')
    $HTML = .\routes\home.ps1
    $Response.Send($HTML)
} -Force

Start-Polaris -Port 8080

style.css

h1 {
    font-family: 'Candara';
    color: blueviolet;
    text-align: center;
}

home.ps1

html {
    Title -Content "iPolaris Home Page"
    Link -href "/routes/style.css" -rel "stylesheet"
}
body {
    h1 "Welcome $ENV:USERNAME"
}

The reason I made ROUTES folder is to repro NODE.JS like structure. I like to make a project structure like ROUTES, VIEWS, ASSETS etc.

TylerLeonhardt commented

Ah yes! That's right. Since Polaris uses PowerShell Classes, this is needed. This is another case of our bad docs. I'm going to clean those up, I promise.

Ill be traveling around for a bit... But docs are my #1 priority for Polaris when I get back.

TylerLeonhardt commented

Also you should be able to do using module Polaris. Did you try that?

ChendrayanV commented

@tylerl0706 @Tiberriver256
This issue can be closed. It's working as expected! Great Thanks for all the support!

Tiberriver256 commented

Thanks for the great write-up @ChendrayanV