How do I stream index.html to all URLs?


#1

Hi!

I have a server running a Slim back-end and a Vue (single page application) front-end. The front-end is just a bundle.js-file being served from the index.html. My front-end has a bunch of routes/URLs such as /login , /viewsurvey/57 , and more. These cannot be accessed with GET requests and I believe that is due to the fact that the index.html+bundle.js is not streamed on these URLs. The server responds with “Method not allowed. Must be one of: OPTIONS”. I thus tried adding this to my index.php:

$app->get('*', function ($request, $response, $args) {
  $newStream = new \GuzzleHttp\Psr7\LazyOpenStream('index.html', 'r');
  $newResponse = $response->withBody($newStream);
  return $newResponse;
});

This however made no difference and I tried putting it in both the beginning and the end of my index.php-file. Not sure what else I can try. Anyone got a clue?

My index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

#2

I got it to work with this:
$app->get(’/{optional}[/{params:.*}]’, function ($request, $response, $args) {
$newStream = new LOStream(‘index.html’, ‘r’);
$newResponse = $response->withBody($newStream);
return $newResponse;
});
(LOStream is LazyOpenStream )

Unfortunately only the links without params in the URL work :confused:

EDIT: Now all my site.com/xxx - links work but not any of the site.com/xxx/yyy . It seems only to be able to “go one string deep” into the url.


#3

I have tried the following route with “/”, “/xxx” and “/xxx/yyy” and they all seem to match:

$app->get('/{optional}[/{params:.*}]', function ($request, $response, $args) {
    // return response
});

If you are looking for a catch-all route, than the route matching pattern can be simplified to:

$app->get('/{any:.*}', function ($request, $response, $args) {
    // return response
});