Microservice with own UI with Spring and Thymleaf - spring

I have three web application microservices and one gateway that include the UI. So, what i want to do is to change the app's that every microservice has his own UI and the gateway should make server side includes. Im using Thymeleaf as template engine and do the includes like this:
<div th:replace="http://localhost:8080/#/organizations"></div>
My Problem is that the CSS and JS files are not Included from the original localhost:8080 server rather from the server with includes the content localhost:9090.
This is how i include the JS and CSS files at *:8080:
<script th:src="#{webjars/jquery/$jquery.version$/jquery.min.js}"</script>
Hope you understand my problem and someone can help...

This ${#httpServletRequest.requestURL} did the trick...
<link th:href="#{__${#httpServletRequest.requestURL}__webjars/bootstrap/?{bootstrap.version}/css/bootstrap.min.css}" rel="stylesheet" />
now all works fine.

I think you can't realize the behaviour you expect if you will use resources from localhost. Your test page can access local resources for context 9090, e.g. when it trying to request for example
<script th:src="#{webjars/angularjs/$angularjs.version$/angular.min.js}"></script> from 9090 request goes to 9090 but resources on 8080.
It will work if you will use static resources from CDN (from internet).
Maybe this article will be helpful for you.

Related

Images disappearing when served over https

I just signed up for a cloudflare account and began forcing everything to https just to see how it worked, and to my surprise, all my images refused to work over https. now this is something I don't understand because the assets are all linked via:
HTML:
<img src="./images/image.jpg" />
CSS:
background-image: url(../images/image.jpg);
So I figured, I would change it up to use absolute urls with // instead of relative paths:
HTML:
<img src="//example.com/images/image.jpg" />
CSS:
background-image: url(//example.com/images/image.jpg);
this did not work either. so I decided to hard link to https:
HTML:
<img src="https://example.com/images/image.jpg" />
CSS:
background-image: url(https://example.com/images/image.jpg);
and again, not working. what happens is the images all buffer and as soon as they are fully downloaded and displayed,they disappear abruptly.
All of the images are available over https or http so I do not understand the issue here. Would appreciate a little insight into this and whether its a cloudflare specific issue or an issue with how I'm writing my code. Can anyone confirm that relative paths should call assets via whatever protocol is currently in use? ive not seen any issue with it in the past.
Thanks in advance
Odd problem.
Would appreciate a little insight into this and whether its a
cloudflare specific issue
In general, there should be no problem to do what you are asking, there's no CloudFlare issue
or an issue with how I'm writing my code.
Both of your code examples look good to me, the first perhaps preferable because it will work with both HTTP and HTTPS
<img src="//example.com/images/image.jpg" />
Have you
ruled out browser issues by testing with another browser?
cleared the CF cache?
tested with CF set to development mode?
ruled out any app related issues by testing https image loading on a plain HTML page?
tried changing the CF SSL Level (Flexible, Full, Strict)?
if still no joy, can you post a URL?
Good luck!
As it turns out this was a Cloud Flare issue. They have a feature called Rocket Loader, which compresses all your js files into one long minified JS file which was apparently causing one of my scripts to break, only when served over https. It has been raised as a bug with Cloud Flare support (as it is odd that it works over http but not https). This particular issue was with sss.js (Super Simple Slider) the solution supplied by Cloud Flare Support was to change my script tag for sss.js from:
<script type="text/javascript" src="js/sss.js"></script>
and adding data-cfasync="false" to the tag:
<script type="text/javascript" data-cfasync="false" src="js/sss.js"></script>
Apparently this extra bit of code makes Cloud Flare's Auto-Minifier and Rocket Loader ignore that particular file.

Why shouldn't I host my own copy of Socket.io?

With a webpage hosted locally on my system, with socket.io installed, this page can be served with socket.io.js attached:
<!doctype html>
<html>
<head>
<title>SkyOS</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
</body>
</html>
But if I want to serve this webpage from a webhost like GoDaddy, that file isn't going to be on the directory through installation.
So, that's simple. Just upload socket.io.js onto the webhost. Except one issue:
I can't find socket.io.js anywhere on the web.
So, according to the answer to this question, I shoudln't ever do that. Am I missing something here? Is socket.io not a normal javascript library like any other?
The socket.io server has got the proper client library available and will serve it from the /socket.io/socket.io.js file (depending on your settings the exact contents may vary).
In case you are not using your socket.io server as the general HTTP server simply prepend the proper host.

Why populr.me theme dummy content not coming?

I am trying to build a theme using populr.me. I downloaded few themes from github. I ran them in localhost. These theme should fetch dummy-contents from lorem ipsum, and also should fetch images. But i see nothing while I run index.html in browser locally. I was connected to internet while running themes in localhost. What is wrong??
I just responded to your email. Sounds like your problem was resolved by updating main.less reference in index.html, and changing this:
<link rel="stylesheet/less" type="text/css" href="/styles/main.less">
to this:
<link rel="stylesheet/less" type="text/css" href="styles/main.less">
Please email me if you have further questions. Thanks for using Populr!
As said here,
the easiest way to test samples is to use a local web server. If you don't use a local web server, you will need to change every src and disable local web security.
Depending on your OS, it could be python, IIS, Apache, ...

Why would images and script file paths not resolve after deployment in an Asp.Net MVC application

I have developed an Asp.Net MVC application in Visual Studio 2010. So far so good. In terms of path resolution for images and script execution, everything runs perfect within Visual Studio. As I am using the default template of MVC I am using "../../Script/*.js" kind of path. After I build the package for deployment and deploy in IIS, the images and the script references stop working. I think it might be a path resolution issue. I tried with "~/Script/.js" but it does not work either. Could somebody suggest why this is happening?
Consider using two things in any of your asp.net MVC projects.
1) Using a Layout for common site elements using _Layout.cshtml and include all your javascript and css files inside that and do not put it on the any other .cshtml pages unless necessary required. see here how to use _Layout.cshtml
2) Second thing always use #Url.Content() directive to define your paths e.g
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
This two way always helps you and never have problem even if you deploy package.
Hope above helps.
This type of problem we get in asp.net when we use URL Rewriting and asp.net mvc have a URL Rewriting by default.
so when you use script or urls and js then you set your path like this .
#Url.Content("~/Your Url or Your script or Your js File ") ;
i think this will help you.
MVC has built in functions that generates url's, so use those instead of hard code url
#Url.Content("~/yourpath")
When you deploy your webapp onto IIS, your site is set to run as Virtual Directory so the website root is no longer the same as the application root, MVC has
ActionLinks,Url.Contents to resolve Url's.
MSDN help

resolving urls to some other url for development purposes

I am working with both asp and asp.net pages together. I wanted to host the application in my local iis (v5.1) but later learned about iisexpress suits my needs. But irrespective of whether I use iis 5.1 or iis express I seem to have an issue.
The asp page which I work with refers to static resources (css, javascript, etc) which reside in a different virtual directory. For e.g. a css file include would look like this.
<link rel="stylesheet" href="/common/include/style/css.css"/>
If such a thing is supposed to run from the test environment then the above url would resolve to:
http://testing/common/include/style/css.css
This is in contrast where my main application would reside. That would look something like:
http://testing/myapp/default.aspx
Now if I run iisexpress in say port 8082, and there is an inbound request like:
http://localhost:8082/common/inlcude/style/css.css
it will hit a 404 error. Is it possible to instruct iss or iis express to resolve such url (which begin with /common/...) to say http://testing/common/...
Update (May 31st 2011, 7.04 PM IST):
Been doing some research on what url rewriting is, and from the examples I have come to understand a few things. I am not sure if what I want is url re-writing, per se. Again taking the iisexpress analogy, I know there will be an inbound request uri like:
http://localhost:8082/common/inlcude/style/css.css
But I want this to be actually served by the following uri:
http://testing/common/include/style/css.css
The former uri doesn't exist in the folder which I have virtualized using iisexpress.
Do I need url re-writing here?
Further, in ASP, I have include lines like:
<!-- #include virtual="/common/include/classes/utils.asp" -->
Even these things are supposed to be resolved to their corresponding http://testing/... counterparts.
ps: I am doing all this is iis 5.1
In ASP.NET 2.0 onwards you can use the tilde operator (~) which is used to specify where your application is rooted. For example:
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
Would produce a relative url:
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
This works fine for ASP.NET pages.
Classic ASP and static HTML pages are a different story and one or more of the following mechanisms would have to be used:
Make everything relative. If you have a page or ASP script in the root of the site, instead of specifying /common/include/... specify common/include/.... If you have a page or ASP script in a subfolder the you'd reference your CSS by way of ../common/include/..., i.e. parent paths. The deeper the folder structure the more ../ parent paths you have so managing these relative paths can get messy. Also, although not common these days, some shared hosted servers disallow parent paths.
Prefix your CSS paths with a variable containing a path prefix. For example:
<link rel="stylesheet" href="<%=Session("RootPath")%>/common/include/style/css.css"/>
In production you'd globally set the session value RootPath to /MyApp, but for testing leave as an empty string. You could do this in Session_OnStart in your global.asa. You could also use an application wide value Application("RootPath") instead. This would only work for ASP pages.
URL Rewriting - if you have static HTML pages then URL rewriting can come to the rescue. You would rewrite the absolute url's which work on your dev PC to the path used on the production server. So basically every time you see a href="/common/... you'd rewrite to href="/myapp/common/.... IIS6 doesn't support rewriting out of the box, you'd need a third party tool such as Iconics IRF or HeliconTech's ISAPI_Rewrite3. IIS 7.x does support URL rewriting through the URLRewrite Module 2.0.

Resources