React Router and App Platform problems

For anyone reading here for the solution if you have already a working app, is this one:
doctl apps update {{ap_id}} --spec {{your-settings-file}}.yaml

Original post here

@snormoredo Help !

I tried all your steps and it didn’t work. I’m still getting a 404.

Here’s my app.yaml:

name: exerolas-front-rewrite
static_sites:
- name: site 
  build_command: npm run build && mv build _static
  github:
    repo: charisra/exerolas-front
    branch: main
    deploy_on_push: true
  error_document: index.html

which is on /src/.do/

Doing a doctl apps list returns all 3 of my apps, as expected (my frontend, backend and the newly created app spec one). So I would now expect it to be working.

I’m starting to become frustrated to be honest. Can I ask for some dev to do a screenshare so we can sort this out?

@snormoredo thanks for that. But here’s something I can’t understand why is happening. Another person from the community had his React & React Router app working fine without doing the doctl process or really anything else changed.

Here’s the app: https://github.com/bjarneo/cra-router-example

and the code: https://github.com/bjarneo/cra-router-example

What is he doing right or what I am doing wrong?

Update: Turns out he’s using a service worker and that made it work (but not in incognito). So, I guess the custom spec yaml is the only true option, especially for dynamic routes.

Thanks @snormoredo . So is it a matter of days (not weeks) before you make the release? I’m asking because the custom spec yaml process is one I would rather avoid doing if you plan to release the solution in the app platform’s UI.

@bobr21 👋

This is a great question, thanks for asking.

If you’re deploying a web service, then routing works as expected because it’s handling incoming traffic on all sub-routes. If you’re deploying a static site SPA, then you’ll only have the index.html served to incoming requests to / but not the sub-routes.

You can configure error_document: index.html in your app spec, so that incoming traffic will be rewritten to index.html while still maintaining the request path. The caveat with error_document is that those requests will have the status code of 404, but the content will show your index document as expected. We’ll be introducing a new configuration called catchall_document soon, that will solve this problem without that caveat; where the status code will be 200 instead of 404 while still rewriting as expected.

We currently don’t support configuring error_document via the UI, so you’ll have to use doctl and a custom spec YAML for now. Your app spec might look like something this:

name: sample-html
static_sites:
- name: site
  github:
    repo: digitalocean/sample-html
    branch: master
  error_document: index.html

You can then submit it using doctl with:

doctl apps create --spec .do/app.yaml

After doing this, you can manage your app via the UI as usual, and your deploy-on-push configuration will continue working as expected.

Thanks for using the App Platform, and happy coding!