Static site + react not working on netlify

Support
,
1

Hi, I have a small react app that contains a link to the blog. The blog is a static site generated using Jekyll and lies in the public folder of the react app. It all works well locally but the problem happens when I deploy on netlify. What is the problem? Clicking on the blog link (URL: /blog/index.html) works but when I click on any blog posts (url is like /blog/Wisdom-Blossoms) then it does not open the post. But if I append index.html to the url (/blog/Wisdom-Blossoms/index.html) then it works. I do not want to append index.html to all urls. Please guide. I have tried adding _redirects (/* /index.html 200) in all folders. Does not help.

URL: http://thesaintsofindia.com/

2

Hi @akshay,

Do you have a repo that we can check? It can be easier to look and tell than to imagine your file structure by reading the thread.

1 Like
3

Sure @hrishikesh . Here is the repo link: https://bitbucket.org/jawaakshey/saintsofindia/src/master/
src contains the react app
public/blog contains the static site build
App.js contains the routes (react)

4

I think I was able to fix this. If not, do let me know and I’ll take another look.

The repo is here: https://github.com/Hrishikesh-K/saintsofindia
Website is here: https://upbeat-ride-41aa4a.netlify.app/

The changes I made:

  1. Removed the _redirects files from all except public folder. Those files were redundant and didn’t do anything. So keeping them won’t have made a difference, but who want’s useless files?

  2. Added another redirect rule for the blog directory. Because you use React, you need the SPA redirect, but it matches all files including the files in blog and thus the problem. Now that the blog has its own set of redirect rules, it seems to work fine.

Suggestion: Try converting all URLs to lower case to avoid any more redirections.

5

@hrishikesh Thanks. But if you go to the blog and click any blog post, the link fails.

6

Check this: 2021-06-17_12-06-44

7

Hi @akshay,

Navigating to https://thesaintsofindia.com/blog/Wisdoms-Blossoms/ yields a blank page for me, but appending index.html makes no difference. With both your site, and that that @hrishikesh has set up, the URL is https://thesaintsofindia.com/blog/wisdoms-blossoms/index.html (note the case in the URL) and removing the index.html does not work.

In all cases where a blank page loads, the console shows (this is only part of it.)

Screen Shot 2021-06-17 at 4.48.05 pm
Screen Shot 2021-06-17 at 4.48.05 pm3954×2082 921 KB

8

The error in the console comes because the following route is matched:

        <Route exact path="/:id/:name">
          <SaintPage data={data} />
        </Route>
9

It loads perfectly fine in Safari. As I said, the problem is probably because of the upper case characters. Safari automatically redirects to the lowercase ones.

Also, I think your service worker is adding to problems. The website is not loading anymore. I had to load in incognito.

10

UPDATE: I just tried it in Chrome as well and it redirects to the lower case one too. However, it shows the errors mentioned by @coelmay. Strangely, Safari doesn’t show that problem.

However, when I choose bypass for network option in service worker, it loads fine. So, I’m assuming it’s the service worker causing problems.

EDIT: I published another deploy with service worker removed: https://60caff6861a4870008893c70--upbeat-ride-41aa4a.netlify.app/. It seems all good to me.

11

Thanks a ton. It worked perfectly. You are very helpful.
Can you please delete the repository you created and also the netlify app? I do not wish to make the code public. Thanks.

12

Done, all gone! Let us know if you have any more questions.