Lumen with AngularJS html5Mode causes reload issue

Question

We have a Lumen app with an AngularJS front end. We are using front-end routing and we removed the hashtag in the url by setting html5Mode to true.

The issue is that when we try to reload the page or type the address without the hashtag, we get an error:

NotFoundHttpException in Application.php line 1244

In our nginx config file, we have this line (we're using prerender.io to cache our pages for SEO):

location / {
    try_files $uri $uri/ /index.php?$query_string @prerender;

The @prerender looks like this (I removed my token given from prerender.io):

location @prerender {
    proxy_set_header X-Prerender-Token MY-TOKEN-IS-HERE;

    set $prerender 0;
    if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
        set $prerender 1;
    }
    if ($args ~ "_escaped_fragment_") {
        set $prerender 1;
    }
    if ($http_user_agent ~ "Prerender") {
        set $prerender 0;
    }
    if ($uri ~ "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff)") {
        set $prerender 0;
    }

    #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
    resolver 8.8.8.8;

    if ($prerender = 1) {

        #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
        set $prerender "service.prerender.io";
        rewrite .* /$scheme://$host$request_uri? break;
        proxy_pass http://$prerender;
    }
    if ($prerender = 0) {
        rewrite .* /index.html break;
    }
}

NOTE: the last if says "/index.html". I did already try it with "/index.php". What happens when I do this is that the index.php file simply gets downloaded by the client as if it was a download file.

Any help to fix the reload issue would be greatly appreciated. Please let me know if you need any additional information.

seems like something wrong with your prerender, but there isn't enough code here to say for certain. — Claies
– Claies, Commented Dec 2, 2015 at 0:10
I added the @prerender part in case there is something wrong with it like you said. It's the main one from prerender.io — Corado Burcus
– Corado Burcus, Commented Dec 2, 2015 at 13:35

Community · Accepted Answer · 2017-05-23 11:52:19Z

0

I got my answer from this question: Laravel 5 + AngularJS html5Mode

The question was for Laravel but the answer works for Lumen if you change it a bit.

The Laravel routes in the answer above look like this:

Route::get('/', function () { 
    return View::make('index'); 
});


Route::get('{all}', function () { 
    return View::make('index'); 
});

While my Lumen routes are like this:

$app->get('/', 'AppController@index');
$app->get('{all}', 'AppController@index');

Obviously you don't have to go in the controller if you don't want to but that's how I have mine set up.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 2, 2015 at 13:56

Corado Burcus

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Lumen with AngularJS html5Mode causes reload issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related