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 #59 (comment) 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 #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

[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

[oakstreetrec]

Same issues

[xhackjp1]

Same issues

[Aathi]

In my case I have removed all the rules Rewrites and redirects. It works fine

[ethamitc]

In my case I have removed all the rules Rewrites and redirects. It works fine

I was having the same issue with any path other than / not working, following this and removing all the rewrites fixed the issue. I think it may be caused because Gatsby compiles react to a static web page.

[marco910]

I had the same issue with my Gatsby site on Amplify on removed all rewrite and redirect rules. The only that now exists is to redirect the non-www domain to the www domain:

[
    {
        "source": "https://domain.com",
        "target": "https://www.domain.com",
        "status": "302",
        "condition": null
    }
]

[ganipcanot]

Resolving due to age - please re-open if you are still experiencing issues.

[outspokeio]

Wanted to add a note - @chriswolmarans solution worked for me.

Using the console I simply removed the </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> rule and changed the /<*> rule to target /404/index.html with type 404 (Redirect) and now I can send users directly to routes and refreshing doesn't take me to the root anymore.

Thanks @chriswolmarans !

[uuykay]

For me to get client side routing to work, I had to do:

    {
        "source": "/app/<*>",
        "target": "/app/index.html",
        "status": "200",
        "condition": null
    },

Note that the Gatsby docs tell you Your server configuration should handle GET requests to /app/*, and initially I had tried to do it with app/* but realised Amplify uses the <> brackets for interpolation.

https://www.gatsbyjs.com/docs/how-to/routing/client-only-routes-and-user-authentication/#configuring-and-handling-client-only-routes-on-a-server

[EricYagerPersonalRepo]

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.

I've been struggling with redirects and images not loading for about a week and this ^^^ fixed both issues. Just wanted this right at the bottom for anyone else coming here for input.

[lewisdonovan]

@chriswolmarans your solution works, but every page gets served with a 404 response. The correct content still loads and everything looks like it's working fine, but having the wrong HTTP status code is obviously still a massive problem. Are you getting the same?

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.