Cannot deploy react app in subfolder using reach-router

1

Hi,

I have used reach-router to create a movie search app.
It works absolutely fine locally but when I try to deploy it then it stops working.

I have set “homepage” to “homepage”: “https://lacika1981.github.io/public/apps/movie-search” as it will live here. You can navigate here through a click to see it.

When I open developer tools then I can see all the files there and folder there. Please see image

Screenshot 2020-02-17 at 07.42.26
Screenshot 2020-02-17 at 07.42.26544×920 62.7 KB

No error in console only blank page. id=root is empty. Not rendered at all.

Here is the repo to my project

Not sure what I should change now.

Thanks in advance

2

I made some more changes but still not working.

<Router path={`${process.env.PUBLIC_URL}/public/apps/movie-search`}>
        <Home path={`${process.env.PUBLIC_URL}/`}></Home>
        <Details path={`${process.env.PUBLIC_URL}/detail/:id`} />
      </Router>

And added ${process.env.PUBLIC_URL}/ to every <Link> element as well.
Locally it works as same however the base URL changed to

http://localhost:3000/public/apps/movie-search

So now totally unsure why it is not working on the github page.

3

I have got the problem.

The link was ./apps/movie-search/index.html

I had to remove index.html from the end and it works now

4

Hi @Lacika1981 while checking your app, there is same issue that I am getting, and I am still finding it’s solution and the problem is when you refresh internal page it’s showing 404.
Is there any way to redirect on same component in reach router ?

5

Hi @bishtsaurav95,

I have the same problem. Never refreshed on the description page in my app and just found out I get 404 error.
I cannot look into it right now. If you get the solution please share here.

6

Hi @Lacika1981 after so many research I found the result, for subfolder you have to create .htaccess file and do this…
ImportantPlease add your subfolder path if it is inside your public_html folder for example :- public_html/demo
*****so make changes below RewriteRule ^ /demo/index.html [L] *******

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html
RewriteRule ^ /path/to/subfolder/index.html [L]
1 Like
7

Hi @bishtsaurav95,

Thank you for your solution for this problem.

1 Like