0

I am working on a rails api (no views) app with angular 5 as front-end. Both frameworks are integrated in the same project following the structure proposed namely here.

The application is deployed on Heroku. The first page of the app is e.g. example.com/home. When I refresh the page in the browser, the page did not display anymore and I get a 404 error in the browser. Same for links from emails.

There is indeed no rails route for /home as this is a angular route.

I found this anwser that is refeering to this angular doc stating that a fallback routing to index.html has to be setup on the web server to handle linking from emails, external sources or refreshing pages.

I did the test on a local install with nginx. By default the refresh yields a 404 error but adding the rule in the config file:

try_files $uri $uri/ /index.html;

solve the issue.

How can I achieve this on Heroku?

microcosme
  • 703
  • 1
  • 5
  • 22
  • I may have found a solution thanks to Heroku support using [this article](https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352) – microcosme Jan 23 '18 at 08:36

1 Answers1

0

I solved this issue by splitting the deployment of my application in two heroku applications: one for the back-end and one for the front-end.

The back-end application running the rails server with the api.

The front-end application running the node server.js as described here.

This solves the page reload issue as the node server is handling the request for the front-end path.

The parameterization of the api url is done for the front-end using environment variables as show here.

microcosme
  • 703
  • 1
  • 5
  • 22