3

I deployed a react app to cloud foundry by using the static buildpack. The goal is making the app accessible under domain.com/path. So I configured the route accordingly to his blog post: https://www.cloudfoundry.org/context-path-routing/

Also, I set pushstate: enabled in the static file and added the context path to the static asset URLS; E.g. The URL for the style sheet is domain.com/path/static/style.css. When I visit domain.com/path I get the index.html file. However the static assets which are linked in the index.html file are not found and I get the index file instead. This is the default behaviour for pushstate routing if the resourceis not found on the server.

enter image description here

Is there anything else I need to configure in order to run the app with pushstate: enabled in a 'subdirectory'?

FunkyFabe
  • 149
  • 2
  • 8

2 Answers2

7

When you enable push state with pushstate: enabled, the Nginx configuration that is assembled by the buildpack for your app will look roughly like this. I've also highlighted the section that's added specifically to address push state.

server {
    listen 8080;
    server_name localhost;

    root /home/vcap/app/public;

    location / {
        # <-- this bit here is what's added for push state support
        if (!-e $request_filename) {
          rewrite ^(.*)$ / break;
        }
        #  -->

        index index.html index.htm Default.htm;

    }
}

You can see the code in the buildpack that enables this here.

I think the short answer is that the buildpack is assuming you're running out of the root and not a sub-directory, which is what happens when you use Cloud Foundry's path based routing.

To work around this, you just need to manually enable the same or similar Nginx configuration. To do that I'd recommend the following:

  1. Enable Custom Location Configuration. See the column in the table at that link which has that name & follow those instructions. This gives me the following Staticfile.

    root: public
location_include: includes/*.conf

    Note that this requires all the static files to serve up to be under a folder called public (or whatever you want to name the root folder of your files). You have to do this when using location_include.

  2. Add a custom includes file nginx/conf/includes/push_state.conf and inside the file add the following.

    location /path/ {

    if (!-e $request_filename) {
      rewrite ^(.*)$ /path/ break;
    }

    index index.html index.htm Default.htm;

}

  3. Push your app. It should deploy and run with the custom code added to the base Nginx configuration used by your buildpack.

Hope that helps!

Daniel Mikusa
  • 13,716
  • 1
  • 22
  • 28
0

I wanted to load the index.html in a sub path (Ex: hostname/YourAppRoot/some_path). But when I did that CSS, JS, and Images did not load. (Ex: hostname/something.css)

pushstate: enabled

Did not help. Instead what it did was, load the index.html when CSS files were requested. After hours of struggling this is what worked for me.

I had to remove the app root from index.html

<base href="/YourAppRoot">
to 
<base href="/">

My Staticfile (needs to be in your deploy folder root Ex: dist/Staticfile)

root: YourAppRoot
location_include: includes/*.conf

create these folders {your build folder}\nginx\conf\includes Create your Nginx config file in the includes folder (Ex: push_state.conf) In push_state.conf file you can add your location configuration

location /YourAppRoot/some_path/{
            try_files $uri $uri/ /index.html;
    }

Then push your app. Your index.html will load from "/YourAppRoot/some_path" and js, CSS will load from the root ("hostname/something.css")

indika
  • 31
  • 4