Polaris is not rendering the CSS link from HTML
ChendrayanV opened this issue · 8 comments
@tylerl0706
I tried PSHTML over Polaris and stumped on an issue - Logged on PSHTML repo.
I can share more information if I missed any!
This issue is not a priority - But, nice to have feature! - We have two workarounds.
- Use style (get-Content .\style.css)
- 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!
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"
}
}
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)
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.
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.
Also you should be able to do using module Polaris
. Did you try that?
@tylerl0706 @Tiberriver256
This issue can be closed. It's working as expected! Great Thanks for all the support!
Thanks for the great write-up @ChendrayanV