how to fix urlrewrite (browser reload issue) with html5mode true with angularjs + vertx

[sandeepsahoo2k2]

I have developed a site with angularjs and vertx as the static webserver/rest server.

now when I enable htnl5mode in angularjs router for pretty urls (no # urls), everything works fine untill I refresh the page.

I see that angular docs says urls rewritting is required in server side ! how to achieve with vertx?

reference : https://docs.angularjs.org/guide/$location

[Paulo Lopes]

Hello,

From the docs it says that you need something like:

a router that mounts your static file server, after that a catch all that redirects to your app main html.

A redirect is implemented as:

  response().putHeader("location", "index.html").setStatusCode(302).end()

[sandeepsahoo2k2]

This is my vertcle which serves the static contents.

    Router router = Router.router(vertx);

    router.route().handler(BodyHandler.create()); //I have all my services defined after this code

    router.route().handler(StaticHandler.create());

    vertx.createHttpServer().requestHandler(router::accept).listen(8080);

I didn't follow ! where to write this code . Is it for every response ?

[Paulo Lopes]

You should have it after the static handler, so if a request is not matched by the static handler it means that the url is most likely generated by the angular app so you always redirect to your index.html, as an example see the inline:

Router router = Router.router(vertx);
router.route().handler(BodyHandler.create()); //I have all my services defined after this code
router.route().handler(StaticHandler.create());

router.route().handler(ctx -> ctx.response().putHeader("location", "/index.html").setStatusCode(302).end());
vertx.createHttpServer().requestHandler(router::accept).listen(8080);

Note that i am assuming your angular app is on "/index.html" you should replace that with what you're using.

[sandeepsahoo2k2 .]

I tested it already writing a failure handler right after the static handler, but problem is whatever is the request url it opens the index.html, which is not what is the fix .

I want to summarize the problem again, (Note : angular route loads the template construction html)

1) first visit the index page. 

2) click a link in the index page e.g /construction which uses the angular route and open/replace the index with another page say.. http://localhost:8080/construction

3) now press browser back button takes you to index page and forward back to construction page. (In short browser history works)

4) Now stand in http://localhost:8080/construction and hit refresh page and history doesn't work anymore. If I fix it the above code way it route to index page always rather than going to construction page.

So after fixing though it doesn't return 404 it does not open the construction page anymore.

Some of the fix for apache and ngnix are below but not sure about vertx.

http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/

https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

Thanks again!

--
You received this message because you are subscribed to a topic in the Google Groups "vert.x" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/vertx/7CvLB67a41M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to vertx+un...@googlegroups.com.
Visit this group at http://groups.google.com/group/vertx.
To view this discussion on the web, visit https://groups.google.com/d/msgid/vertx/d9919c7a-4a67-48df-9783-cb7fce04e11d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[sandeepsahoo2k2 .]

Voila ! I fixed it.

Answer is not to redirect but return the index.html file for failures.

Router router = Router.router(vertx);

router.route().handler(BodyHandler.create());

router.route().handler(StaticHandler.create());

    router.route().failureHandler(handler -> {

        handler.response().sendFile("webroot/index.html").end();

    });

[Paulo Lopes]

The failure handler probably is not what you're looking for, it is also called if there is an internal error.

Also you probably should send a redirect and not a file, the reason is  that if you send a redirect your browser will use its cache to quickly load your app, if you send a file it means that for each possible url combination your browser will never cache since it always returns a new html document.

The proper clean way would be to have a known prefix that your app urls use which does not match any files or api's to be served, from there create a handler with a regular expression matcher that would send a redirect. This handler should be placed before the static handler.

[sandeepsahoo2k2 .]

With redirect and without the failure handler I tried the aproach already but It was not fixed this. I stole this idea of sending the index.html from nodejs apps which worked as I wanted to with my app. Anyway I will keep your suggestion in mind and try to fix it.

Thanks again.

To view this discussion on the web, visit https://groups.google.com/d/msgid/vertx/2736cb12-47fa-44b2-8f62-a8d7b70743d7%40googlegroups.com.

[Tim Fox]

I suggest looking at the web examples in vertx-examples - this will give you an idea of actual examples.

--
You received this message because you are subscribed to the Google Groups "vert.x" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vertx+un...@googlegroups.com.

Visit this group at http://groups.google.com/group/vertx.

To view this discussion on the web, visit https://groups.google.com/d/msgid/vertx/ec4ddc5f-7cfd-418b-a1f1-94dabbc9705d%40googlegroups.com.

[Marcello Nuccio]

A redirect is not the right thing to do in this case, because the URL should not be changed, as it is needed for deep linking. What is needed is an internal rewrite from any deep link to the application entry point (index.html). This is equivalent to serving the same contents for any deep link.

As for caching, in a single page application the entry point HTML is typically quite small and is only loaded once, when I enter or reload the application. Then it is not a problem if it is not cached by the browser. Often caching is completely disabled for the entry point to make sure that any updates are available as soon as possible.