Question

APP Platform: App reloading leads to 404 site

Posted November 13, 2020 3.2k views
ReactDigitalOcean App Platform

steps to reproduce:

visiting my site under: https://achilles-7z9p9.ondigitalocean.app
click on any site in the navigation
do a reload

Expectation getting the page for the route
Receive: 404 page

i just find answers for droplet Apps :(

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
4 answers

@balzerrei @dikshith
This worked for me, steps to solve:

  • download current app spec from https://cloud.digitalocean.com/apps, in the settings tab you will find App Spec to app.yaml file

  • add catchall_document: index.html

    ex:
    name: myapp
    region: fra
    static_sites:
    - build_command: |-
      npm install
      npm install -g @angular/cli@11.2.0
      ng build --prod
    environment_slug: node-js
    gitlab:
      branch: master
      deploy_on_push: true
      repo: myrepo/myapp
    name: myapp
    output_dir: dist
    catchall_document: index.html
    routes:
      - path: /
    
  • find app id by running: doctl apps list

  • update spec by runing: doctl apps update {{ap_id}} --spec app.yaml

  • Item

  • Thanks Ghenadie,
    Now routing works.

  • Hi @Ghenadie I am having the same issue. I downloaded the App Spec file and added catchall_document: index.html to it, through my code editor. But right now I don’t know where to run those commands because I do not have doctl installed on my computer and I don’t even know what it is. So I’m stuck.

    • Hi @etokwudomary,

      You don’t need to do it through the App spec file anymore. Luckily, we have now enabled it through the UI. Please follow the steps below and it should be resolved.

      Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save

      Cheers,
      Taha Fatima

  • Setting catchall_document: index.html worked for my React SPA setup, but now I’m trying to deploy a Next.js site and I’m seeing pages load and then flicker away. I think this is because Next.js has a different layout than other React SPA apps.

    While most React SPA apps have one index.html that just loads up the JS code and runs the router, Next.js apps have a unique .html for each page.

    I’m going to try adding all the routes to my app spec manually and I expect that will work. But that’s not idea. Has anyone figured out how to do static hosting of Next.js sites on DO App Platform?

    • Next.js has a setting that worked for me: in next.config.js, set trailingSlashes: true. This generates the static page layout as /subpage/index.html, which can then be served at /subpage.

Hello @balzerrei

You have to use catchall_document to fix this routing issue. We don’t support it in UI yet. You might have to configure catchall_document via doctl or API. There is a similar discussion in our another community link which might help:

https://www.digitalocean.com/community/questions/react-router-and-app-platform-problems

Cheers,

Dikshith

Thanks for your answer @dikshith.

With this new catchall_document I am getting always the index.htmlinstead of the requested e.g.: team.html when i am on /team and do a hard reload.

This is not what I am looking for. So other than publishing the site as a web Serve instead of a static site a can’t resolve this issue?

@Ghenadie works like a charm! 😁