Openshift server not able to pick up CSS in subfolder - jsf

I have placed css files in sub folder which are not loaded.
application
--resource
---bootstrap
----css
-----bootstrap.min.css
The tag used is
<h:outputStylesheet name="css\bootstrap.min.css" library="bootstrap" />
This is rendered as
<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
I have deployed the application in openshift. It is working correctly in my local
The server is same in both places "wildfly -10".

Related

Serving static content without a file extension on a Blazor server project

As per Apple's requirements for Universal Links, I have a file called "apple-app-site-association", which is in the root folder of a web site in azure. Visiting mysite.com/apple-app-site-association should return the JSON text in the browser. I am hosting the site on Azure, and am running a Blazor server project. My project does not have a web.config file.
To be clear, the file "apple-app-site-association" should not have the extension of ".json"
I have looked at this solution and this solution.
I have also tried modifying the Configure() method in Startup.cs to serve static files
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true,
DefaultContentType = "application/json"
});
While the above code does correctly serve mysite.com/apple-app-site-association, it has an unwanted side-effect of 404'ing _framework/blazor.server.js.
How can I modify the MIME type of apple-app-site-association so my Blazor server project serves the file up when visiting mysite.com/apple-app-site-association?
Or, using the UseStaticFiles() method above, how can I resolve the 404 error when loading _framework/blazor.server.js?
In _Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css" />
</head>
<body>
...some stuff...
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Although you're using Blazor, it's still an ASP.NET Core application at heart and the issue is really one about ASP.NET Core, routing and how static files are handled.
As seen in this answer it's probably simplest to do this via a controller, rather than trying to coerce the router to process URLs with no extension. I've also done this for robots.txt in a project to control what is shown for different brands.
I tried this:
public class StaticContentController : Controller
{
[HttpGet]
[Route("apple-app-site-association")]
public ContentResult AppleAppSiteAssociation()
{
// source in root of wwwroot folder
const string source = #"apple-app-site-association.json";
string json = System.IO.File.ReadAllText(source);
return Content(json, "application/json", Encoding.UTF8);
}
}
The source file (with the .json extension) is in the project with a "Copy if newer" property set, so it's present in the /bin folder.
Running:

Azure CDN with HTTPS not working

I want to have all my static files (css,js,images) on Azure CDN, I followed this tutorial:
https://azure.microsoft.com/en-us/documentation/articles/cdn-serve-content-from-cdn-in-your-web-application/
I had in my app the following lines pointing to files in azure storage blob container:
<link href="https://stact1.blob.core.windows.net/cdn/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://stact1.blob.core.windows.net/cdn/Content/animate.css" rel="stylesheet" type="text/css" />
<link href="https://stact1.blob.core.windows.net/cdn/Content/style.css" rel="stylesheet" type="text/css" />
and my website renders perfectly fine
http://screencast.com/t/6m9M2s4d
However according to the tutorial I should change the url to use the CDN.
So I changed above to:
<link href="https://az780954.vo.msecnd.net/cdn/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://az780954.vo.msecnd.net/cdn/Content/animate.css" rel="stylesheet" type="text/css" />
<link href="https://az780954.vo.msecnd.net/cdn/Content/style.css" rel="stylesheet" type="text/css" />
then everything is screwed up:
http://screencast.com/t/NEM3sDQb
If I remove the https, I see no connections done on the network tab on developer tools, If I put https, I see 403 Errors.
The problem is HTTPS is enabled on the CDN
http://screencast.com/t/RGvtj9uzq1
Given that your https links are all now working the issue you saw would have been just due to delay for the SSL configuration to propagate. All configuration changes for Azure CDN can take up to 60 minutes to propagate to all CDN POP's (i.e. CDN data centers). CDN configuration is the only item that has a delay associated with it. Content is automatically cached to individual POP's when clients makes a request for the content. If clients don't make any requests for your content no content is cached on the CDN POP's.

Force IE8 compatibility mode off for Intranet site using meta tags

All of the following questions are related and some of them marked as fix but does not seem to be working.
My problem:
Problem with IE8.
I have Intranet site built on Primefaces 5.1.7,
JSF 2.2.8-04
Trying to disable compatibility mode of IE8 which is
enabled by default for Intranet web sites.
Problem is we want to set minimum browser requirement to IE8, but web side is run on Intranet domain so it by default runs on compatibility mode and IE8 user is not allowed to login.
Solution Available (Not working):
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</f:facet>
Following does not work:
Force IE compatibility mode off using tags
Force "Internet Explorer 8" browser mode in intranet
X-UA-Compatible not working in IE 9 for intranet sites
intranet jsf application opening in compatibility mode in IE9
How to fix Document mode restart in IE 9
Any help is appreciated.
First Edit
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky" />
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/css/screen.css.jsf" />
<script type="text/javascript" src="/payroll/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.1.7"></script>
<script type="text/javascript" src="/payroll/javax.faces.resource/primefaces.js.jsf?ln=primefaces&v=5.1.7"></script>
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/primefaces.css.jsf?ln=primefaces&v=5.1.7" />
<script type="text/javascript" src="/payroll/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=5.1.7"></script>
<title>Payroll Center</title>
<script type="text/javascript" src="/payroll/javax.faces.resource/js/script.js.jsf"></script><!--[if lt IE 9]>
<script type="text/javascript" src="/payroll/resources/js/selectivizr-min.js"></script><![endif]-->
<link rel="shortcut icon" href="/payroll/resources/img/favicon.ico" />
</head>
Second Edit:
Screenshot is from IE developer tool.
I removed that xml tag
There are two things in tool Browser mode and Document Mode.
Document Mode is getting changed to IE8 Standards but Browser mode remains the same, Browser mode is the key to change version which does not gets changed.
I might me wrong i am just guessing for now that document mode gives ability to run some IE8 features but still running under IE8 compatibility mode which is basicall version IE7. NOT SURE GUESS
Third Edit:
As per following blog you can not change browser mode but this was written in 2010. i am no sure how much valid this is but what he explains actually happening. But require second opinion if this is really true. http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Thanks again for your time

Bootswatch theme font not working after publishing to Azure? [duplicate]

Basically I got the following HTML:
<button class="disabled btn-primary btn" type="submit" disabled="">
<i class="glyphicon glyphicon-ban-circle"></i>
Log in
</button>
Locally the icon displays fine on the button but when I run on Windows Azure I get the following button with a weird looks prefix instead of the icon:
Looking into this, I realized that when accessing my website locally the browser would attempt to load the file:
/Content/fonts/glyphicons-halflings-regular.woff (which it did successfully)
while when online (on azure) it would attempt to load at:
/fonts/glyphicons-halflings-regular.woff
Why does it not put the /Content prefix that it does locally.
I'm using the standard bootstrap files and it is the EXACT same websites running locally and online.
Also I'm bundling the content the following way:
bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
"~/Content/bootstrap/bootstrap.css"));
And the file structure looks the following:
Also bootstrap is looking for the files like this:
url('../fonts/glyphicons-halflings-regular.woff')
So I would suppose it would look in the Content folder and not root since it currently resides in the Content/bootstrapcss folder.
We recently had similar issue (though we were using metroUI - http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.
In our case, we had the following directory structure:
and modern.css was referencing fonts like
../fonts/iconFont.eot
and we were bundling the css file like this:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Because of bundling, the application was looking for fonts in /fonts directory at the application root which was obviously not there.
Long story short, we ended up changing the bundle name:
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Once the bundle name was changed, things started working properly.
Changing the path does work but the 'answered question' missed one vital point.
If you're using _Layout.cshtml that references the bundle, this will no longer work locally and on Azure.
You need to update the _Layout.cshtml page too!
So if you change your bundles path from Content/css to Scripts/css then you need to change _Layout.cshtml to #Styles.Render("~/Scripts/css") respetively.
Encountered this error with ASP.NET Core 2.0 MVC web app when publishing to Azure Web Service.
I had my stylesheets within the following code.
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
Simply copying and pasting the links into any environment besides Development worked
<environment exclude="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
/>
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
If you have downloaded a theme.zip or theme.rar that includes the bootstrap icons, before you extract do this:
right click on the compressed package
check the box "unblock" if it is visible
For icons to work- i had to set the folder permissions to "everyone = read" on the folder that the image was in

How can I output a favicon <link> in the HTML head section using JSF 2.0?

Using h:outputStylesheet I can embed CSS resources in the HTML head section, but how can I build a <link> for a favicon image resource which renders HTML like in this example:
HTML output:
<head>
...
<link rel="icon" type="image/png" href="favicon.png" />
...
</head>
The image resource is located in <web>/resources/images.
If I use direct HTML code in the JSF template like href="/resources/images/favicon.png" the resource is not found - navigating to /resources/images/favicon.png leads to the error
/resources/images/favicon.png/index.jsf
not found
(I have set index.jsf as index page in web.xml which might explain this path)
Your webapp is apparently running on a non-empty context path. The leading slash / brings you to the domain root. Use #{request.contextPath} to dynamically inline the context path.
<link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.png" />
(note that I fixed the rel as well to make it crossbrowser compatible)
The href="/resources/images/favicon.png" is actually looking in the root direcotry of your server http://localhost/resources/images/favicon.png and not inside your web application directory.
Your href location will need to include the web application directory href="/webappname/resources/images/favicon.png" http://localhost/webappname/resources/images/favicon.png
If your .xhtml file is in the same directory as your resources folder then removing the forward slash at the being should work as well.
href="resources/images/favicon.png"

Resources