How to setup nginx.conf on IBM bluemix cloud foundry for single page application routing and how to set url rewrite to support spa routes?

Question

I am using React single page app for my application. I have hosted solution on IBM Bluemix using cloud foundry. I want 2 help.

1. How to override existing nginx configuration with new one to support URL rewrite for my react routes?

2. What are the url rewrites configuration for nginx server? (I am using nginx for the firs time)

Here is my manifest.yml which I have used to host on cloud foundry. I am using staticfile-buildpack for node.js.

applications:
- buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
  name: xyz
  memory: 128M
  stack: cflinuxfs2
  path: build/
  routes:
  - route: xyz.eu-gb.mybluemix.net/
  - route: xyz.eu-gb.mybluemix.net/store
  - route: xyz.eu-gb.mybluemix.net/checkout

Here xyz is my app domain. I am able to load my app and pass through click action to other routes but when I hard refresh or change url from browser address bar it shows me 404 error.

Can someone please guide me here to resolve above issue.

Thanks.

Answer 1

1. How to override existing nginx configuration with new one to support URL rewrite for my react routes?

You can override the nginx.conf, but it's not recommended with the staticfile buildpack. Instead, try to use the configuration options provided by the buildpack to achieve your goal. The buildpack has a lot of common options, so you don't need to drop down to the level of configuring Nginx yourself.

https://docs.cloudfoundry.org/buildpacks/staticfile/index.html#config-options

Here xyz is my app domain. I am able to load my app and pass through click action to other routes but when I hard refresh or change url from browser address bar it shows me 404 error.

It sounds like you need to enable pushstate support. Adding pushstate: enabled to your Staticfile I think that should fix your issue.

2. What are the url rewrites configuration for nginx server? (I am using nginx for the firs time)

You can look at the Nginx configuration that's generated for your app. Once your push your app and it starts, run cf ssh <app-name> -c "cat app/nginx/conf/nginx.conf". That should dump the nginx config to your screen.

buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git

Don't point to the master branch of any buildpack. It's a moving target. Commit to commit can change or even break.

You should generally use the buildpack that's provided by your operator. If you run cf buildpacks you can see the list there. If that's not new enough or your provider doesn't include a buildpack you need, you can use the git repo syntax to link to a repo online, however make sure you include the #<branch|tag> in your URL.

Ex: https://github.com/cloudfoundry/staticfile-buildpack.git#v1.4.29

This locks in the buildpack to a tagged release which prevents it from changing out from under you.