I have multiple UI bundles.
My zuul yml entry
server
port : 8090
zuul:
routes:
ui:
url: http://localhost:8091
sensitive-headers:
When i try to hit url http://localhost:8090/ui
it loaded my html code but not include js and css file.
Thanks in advance.
I would want to have a closer look at the HTML that is returned when you go to the http://localhost:8090/ui. Or at least use Chrome developer tools to see what URL it is using when trying to load the JS and CSS. I had a similar issue with how Zuul does the routing. It is not a full reverse proxy in that it doesn't inspect the HTML body of the response to modify embedded URLs to be corrected.
Check out: https://github.com/spring-cloud/spring-cloud-netflix/issues/8
Related
I am using zf2 and angular js for my frontend. ZF2 controller makes an api call and returns the data to view(phtml file). In phtml file I am using php to generate meta tags and rest of the content of the page is generated by angular js. Do I still need to serve prerendered pages to google bots since meta tags are already generated by php and I think google bots needs meta tags?To test prerender.io i installed it on my server to generate static page but it is unable to load css, js and images because I am using css, js and images as relative urls in my html page.
Hi Guys.
I have problem with routing between Spring MVC and AngularJS.
So, when I got homepage : http://localhost:8080/ captures that Angular and its ok but when i want go to another page e.g http://localhost:8080/dashboard captures that Spring MVC and Tomcat show error 404 Not Found.
To get to dashboard in need use url /#/dashbaord
Although i got below code in my file with routing configuration.
It is possible to angular was first taken into consideration and next Spring MVC?
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
Regards
You need to route all Tomcat URLs to index.html
For API calls to Spring Boot http://localhost:8080/springbootapi/wotever
And in Tomcat say DO NOT POINT ANY URL WITH /springbootapi/ in it to index.html
EVERYTHING ELSE TO index.html
Pointing everything else to index.html gives Angular full control over everything except API calls
The above outline the generic approach to do this.
Maybe better to follow this tutorial ...
https://spring.io/guides/gs/consuming-rest-angularjs/
I was getting myself started with Angular JS.
I tried to put angular code in my html page and then I tried to open up browser but Angular JS didn't worked.
But when I requested the same page from server It did worked
A bit of mystry ...
as soon as angular need to load template code using a template url you have to serve the page via HTTP because angular can only load templates using HTTP.
one example would be :
<div>
<div ng-include="'templateA.htm'"></div>
<div ng-include="'templateB.htm'"></div>
</div>
Some directives of AngularJS use AJAX to load themselves and by default navigators like Chrome block AJAX request when they are local.
You can open your AngularJS app in any server e.g: http-server
I have just generated an Spring/Angular app using JHipster.
I successfully accessed the home page by using this URL: http://localhost:8080 which redirects to http://localhost:8080/#/ and the index.html file is loaded properly.
I am not sure how Angular and the browser determine that they need to load the index.html file.
Where is this configured in a JHipster app?
edit: Is there some "default home page" configuration somewhere?
I successfully accessed the home page by using this URL:
http://localhost:8080 which redirects to http://localhost:8080/#/
The request to the server is for "/" and index.html is served. The "/#/" is all client side stuff (Angular routing) that happens when the javascript on the index.html page fires up, not the result of a server side redirect.
Where is this configured in a JHipster app?
This is a Spring Boot default, not something specific to JHipster. From the Spring Boot docs:
The auto-configuration adds the following features on top of Spring’s
defaults:
Static index.html support.
By default Spring Boot will serve static content from a directory
called /static (or /public or /resources or /META-INF/resources) in
the classpath or from the root of the ServletContext. It uses the
ResourceHttpRequestHandler from Spring MVC so you can modify that
behavior by adding your own WebMvcConfigurerAdapter and overriding the
addResourceHandlers method.
I don't think this is configurable through a property file or something similar, you'll have to write some code. See the answer to this question.
How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
However, S3 is storage, and doesn't offer the same redirection options
I have been trying to use the built in redirection rules such as
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>[[ your application's domain name ]]</HostName>
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
However, this just leads to a redirect loop.
Any suggestions?
In the Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode you need to use #!/ (hashbang).
You could change this:
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
with
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
More details on this answer: https://stackoverflow.com/a/16877231/1733117
You may also need to configure your app for using that prefix:
angular.module(...)
...
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
Make sure you have the index route configured for your website. Mostly it is index.html
Remove routing rules from S3 configurations
Put a Cloudfront in front of your S3 bucket.
Configure error page rules for your Cloudfront instance.
In the error rules specify:
Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200
Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.
https://stackoverflow.com/a/16877231/1733117
Doesn't really address the routing issue here.
here is another option using nginx proxy_pass, it also allows you to have multiple projects in subfolders and use subdomains
S3 Static Website Hosting Route All Paths to Index.html