0

So I'm using PCF as a PAAS solution for our web application. We are using Angular 7 for our frontend, and have some routing enabled in the application.

The application upon entry goes to the route /home.

We have a few spots on our app that go to a details page, and each of them has a certain id.

So for example, we'll click on something on the page and it goes to /home/details/2.

The page is database driven, as each block on the page is pulled from the DB and that's how the id is given.

However, I'm having difficulties configuring that in the nginx conf. The staticfile buildpack doesn't work for this purpose, as when I click on any of those blocks to go to another page, I just get rerouted to the main page.

In the nginx conf I've tried this: 

location /home/details/ {
      try_files $uri $uri/ /index.html;
    }

And this: 

location /home/details/ {
   try_files $uri $uri/ =404;
}

Which hasn't worked, and just results in the page not loading. I'm not sure what how I need to configure nginx to get routing working for my Angular app.

Oscar McCullough
  • 365
  • 4
  • 17
  • Are you restarting nginx after every change you are making to the conf file? – joshua miller Jun 01 '20 at 12:41
  • Also, what is the exact error you are getting? – joshua miller Jun 01 '20 at 12:41
  • To answer the first question - yes. I rebuild and repush the app every change to the conf file, which reboots the server on PCF. And the error I'm getting alternates between a 404 error and a 500 error. Typically 404. – Oscar McCullough Jun 01 '20 at 12:49
  • What if you use `location / { try_files $uri $uri/ /index.html; }` – David Jun 01 '20 at 13:19
  • @David I've tried that as well which results in a 404. – Oscar McCullough Jun 01 '20 at 14:04
  • Can you show your entire nginx config? – David Jun 01 '20 at 14:42
  • @David I cannot due to the environment it's programmed in. – Oscar McCullough Jun 01 '20 at 14:54
  • Well, it's a bit hard to help. Make sure you've got an angular route redirecting `''` to `home`, and on nginx side make sure that `root` correctly points to the folder containing your js/html files – David Jun 01 '20 at 14:57
  • Without any customizations (i.e. remove what you've been trying and start fresh), I would suggest that you add `pushstate: enabled` to your `Staticfile` and tell the buildpack you want push state support enabled. See https://docs.cloudfoundry.org/buildpacks/staticfile/index.html#staticfile. I think that is what you need here. – Daniel Mikusa Jun 01 '20 at 21:08
  • @DanielMikusa That's what I did initially. It works well for getting the page load, but it reroutes to the homepage every time I try to move to a route with an id, like ~/home/details/1 or ~/home/details/2 – Oscar McCullough Jun 02 '20 at 01:26
  • Are you actually putting a `~` in the URL? or does your URL look like `http://your-app.example.com/home/details/1`? – Daniel Mikusa Jun 02 '20 at 13:59
  • Also, are you sure that your Angular app has push state support enabled? https://stackoverflow.com/a/11100438/1585136. The Nginx support for push state enabled here is just a rewrite of `/home/details/1` to `/`. It's mainly for making bookmarks and direct links work. When navigating your app, if you click something and it results in a request to Nginx, that's a problem with the app. While navigating the app, the app should handle routing, unless the request goes to a file that actually exists on the server. Any request where the file doesn't exist is rewritten to `/`. – Daniel Mikusa Jun 02 '20 at 14:13

0 Answers0