New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polaris is not rendering the CSS link from HTML #139

Closed
ChendrayanV opened this Issue Oct 4, 2018 · 8 comments

Comments

Projects
None yet
3 participants
@ChendrayanV
Contributor

ChendrayanV commented Oct 4, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@ChendrayanV

ChendrayanV Oct 4, 2018

Contributor

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!

Contributor

ChendrayanV commented Oct 4, 2018

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

This comment has been minimized.

Show comment
Hide comment
@Tiberriver256

Tiberriver256 Oct 4, 2018

Collaborator

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"
    }
}
Collaborator

Tiberriver256 commented Oct 4, 2018

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"
    }
}
@ChendrayanV

This comment has been minimized.

Show comment
Hide comment
@ChendrayanV

ChendrayanV Oct 5, 2018

Contributor

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)
Contributor

ChendrayanV commented Oct 5, 2018

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

This comment has been minimized.

Show comment
Hide comment
@ChendrayanV

ChendrayanV Oct 5, 2018

Contributor

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.

Contributor

ChendrayanV commented Oct 5, 2018

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.

@tylerl0706

This comment has been minimized.

Show comment
Hide comment
@tylerl0706

tylerl0706 Oct 6, 2018

Collaborator

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.

Collaborator

tylerl0706 commented Oct 6, 2018

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.

@tylerl0706

This comment has been minimized.

Show comment
Hide comment
@tylerl0706

tylerl0706 Oct 6, 2018

Collaborator

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

Collaborator

tylerl0706 commented Oct 6, 2018

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

@ChendrayanV

This comment has been minimized.

Show comment
Hide comment
@ChendrayanV

ChendrayanV Oct 10, 2018

Contributor

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

Contributor

ChendrayanV commented Oct 10, 2018

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

@Tiberriver256

This comment has been minimized.

Show comment
Hide comment
@Tiberriver256

Tiberriver256 Oct 10, 2018

Collaborator

Thanks for the great write-up @ChendrayanV

Collaborator

Tiberriver256 commented Oct 10, 2018

Thanks for the great write-up @ChendrayanV

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment