Amplify-console: Deploying Gatsby breaks routing and the gatsby-node and gatsby-browser setup

[ilyador]

Locally my gatsby site works fine, however deploying it to Amplify breaks the following:

• Routing doesn't work at all. Everything is redirected to root URL (the page shows mostly fine).
• gatsby-browser.js is being ignored. Seems like it is not being called at all.
• I made custom routes in gatsby-node.js and seems like this is connected to the routing problem: client-side routes don't work too.

[UnleashedMind]

Just to clarify, did you deploy your project through the Amplify Console?
https://console.aws.amazon.com/

[ilyador]

@UnleashedMind Yes, I did

[swaminator]

@ilyador can you add the following redirect rule: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

[ilyador]

I already tried that and it didn't help.
@swaminator Why closing the issue if you don't know if it is solved or not?
The answer also does not address the other issues.

[swaminator]

@ilyador I'm keeping one open issue as you filed two issues with the same problem. This issue is still open and we'll investigate it. Any way you can provide us with a sample repo to help with reproducing your scenario?

[soumik-mukherjee]

@ilyador I am running a few gatsby projects on amplify, havent come across a similar issue though. I have plenty of stuff going on in my gatsby-browser api over rides, routing works (both dynamic client-only routes as well as pre-compiled gatsby static routes).
It would be interesting to have a look at that sample repo.

[chriswolmarans]

I'm having a similar issue - I've deployed a gatsby site for a client to Amplify through the Amplify Console and followed this https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa.

These are my current rules:

[
    {
        "source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/404/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "https://www.domain.ca",
        "target": "https://domain.ca",
        "status": "200",
        "condition": null
    }
]

I cannot refresh a page or navigate directly (via browser address bar) to any link other than the root. Without any deep linking I am concerned that our SEO efforts are impacted negatively.

Creating a build locally and serving it (gatsby build, gatsby serve) doesn't have these problems.

What I find strange is that even when I remove all redirects the behaviour persists.

I tried some suggestions referenced here https://github.com/aws-amplify/amplify-console/issues/59#issuecomment-720672967 but have had no luck - keeping an eye out here:https://github.com/aws-amplify/amplify-console/issues?q=is%3Aissue+is%3Aopen+redirect to try and find a solution to this.

Have you made any progress in investigating this original issue above? Any help would be greatly appreciated.

[chriswolmarans]

Here is an example repo to better illustrate the behaviour explained in https://github.com/aws-amplify/amplify-console/issues/991#issuecomment-724839076:

https://github.com/chriswolmarans/gatsby-starter-mobx-react-hooks-context-api

Deployed to Amplify via console here:
https://master.d1f0rl59yms54k.amplifyapp.com/

• redirects to root on refresh
• cannot deep link to any page other than root

---

Compare to behaviour here:
https://codesandbox.io/s/github/chriswolmarans/gatsby-starter-mobx-react-hooks-context-api

• no redirects on refresh
• can deep link to any page

[soumik-mukherjee]

Here is an example repo to better illustrate the behaviour explained in #991 (comment):

https://github.com/chriswolmarans/gatsby-starter-mobx-react-hooks-context-api

Deployed to Amplify via console here:
https://master.d1f0rl59yms54k.amplifyapp.com/

• redirects to root on refresh
• cannot deep link to any page other than root

Compare to behaviour here:
https://codesandbox.io/s/github/chriswolmarans/gatsby-starter-mobx-react-hooks-context-api

• no redirects on refresh
• can deep link to any page

@chriswolmarans
I had to setup URL rewrites everytime I had client-only routes in my Gatsby application. For static pages, it should work as it is (i.e. yarn build and then deploy the public folder to amplify frontend)

I checked the codesandbox, seems like you have static routes at /temperature-page and /counter-page. If these static routes are your deep links, try removing any rewrites/redirects with the amplify app and see what happens.

For client only routes, check the gatsby documentation here. I have always found the amplify URL rewrite functionality to work with these Gatsby requirements.

If you can share the rewite/redirect rules for the app at https://master.d1f0rl59yms54k.amplifyapp.com/ it would also help.

[chriswolmarans]

Thank you @soumik-mukherjee, here are the rewrite/redirect rules for the app at https://master.d1f0rl59yms54k.amplifyapp.com/:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

The app behaves as intended now after removing the above rules and changing them to:

[
    {
        "source": "/<*>",
        "target": "/404/index.html",
        "status": "404-200",
        "condition": null
    }
]

After applying the same steps to the main site (not the example repo) it took some time for the change to take effect, which initially appeared as if it isn't working at all.

After a few minutes it worked, I guess I just had to wait longer to see the changes initially.

Thank you very much for the help @soumik-mukherjee, appreciate it.

[soumik-mukherjee]

I think the amplify web hosting is backed by a cdn, and I would assume the rewrite rules also stay on the edge service. While amplify will manage invalidating objects intelligently for you, you should expect a delay when you change things.

[abgaryanharutyun]

Hey, I have the same issues.

I temporarily resolve this issue by removing all existing rules and changed my URL from https://example.com/page?id=1 to https://example.com/page/?id=1