How to access react-app build from local file url ("file:///"), without using any HTTP server?

Question

My requirement is that I have to use my react SPA by loading local file URL as follows

file:///C:/react/build/index.html

without using any HTTP-server.

In this scenario, it's working with HTTP server correctly, but in the case of local file URL access, only initial component working correctly but Routing is not working.

it's giving following types of error in chrome-

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/react/build/Aboutus' cannot be created in a document with origin 'null' and URL 'file:///C:/react/build/index.html'.

and in firefox-

SecurityError: The operation is insecure. 1.d30e17d6.chunk.js:1 push/< createBrowserHistory.js:153 confirmTransitionTo createTransitionManager.js:33 push createBrowserHistory.js:146 e/i.handleClick Link.js:99 p/< react-dom.production.min.js:49 p react-dom.production.min.js:45 P/< react-dom.production.min.js:73 P react-dom.production.min.js:72 S react-dom.production.min.js:168 E react-dom.production.min.js:158 j react-dom.production.min.js:232 Tn react-dom.production.min.js:1712 Za react-dom.production.min.js:5451 Dt react-dom.production.min.js:660 Sn react-dom.production.min.js:1754 Fa react-dom.production.min.js:5479 Cn react-dom.production.min.js:1731 Cn self-hosted:1018:17

please suggest me some solution or give me some sample code. and please don't suggest to use any HTTP server method, because in this case, I have to do it without using any HTTP server.

I am using create-react-app method with react-router v4

@Praveen Kumar Pursuhothaman, the duplicate you linked is not actually a duplicate for this question. The title of this question is just not complete. — nbokmans
– nbokmans, Commented Jan 24, 2019 at 13:58
@nbokmans I read the full question and then found this would be a good match. Why do you think so? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 24, 2019 at 14:01
@PraveenKumarPurushothaman your suggested answer is not what I am looking for. as I already said, the initial component is loading fine, but it's giving above error for subsequent routing in my app using react-router. So please suggest me a solution or remove duplicate flag — Smaranjit
– Smaranjit, Commented Jan 24, 2019 at 14:08
@Smaranjit Ah, I thought it was evident from the other answers. React Router doesn't work on file protocol. See this: Viewing over file:// protocol · Issue #3591 · facebook/create-react-app · GitHub. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 24, 2019 at 14:09
@PraveenKumarPurushothaman thanks for your response, actually after visiting your link, I tried several solutions provided there, and now it's working for my specific situation. I have also posted the solution as an answer. — Smaranjit
– Smaranjit, Commented Jan 24, 2019 at 14:37

Smaranjit · Accepted Answer · 2019-02-08 06:15:09Z

11

this problem could be solved using {HashRouter} or {MemoryRouter} instead of using {BrowserRouter}.

and then you can access the SPA from local file protocol ("file:///xyz/index.html"), and your router link will work fine with react-router for local file URL.

 - import { BrowserRouter as Router} from "react-router-dom"; //remove this line
 + import { HashRouter as Router} from "react-router-dom"; //try this line

or
--
+ import { MemoryRouter as Router} from "react-router-dom"; //try this line

also add the following line to package.json for relative linking.

"homepage": ".",

edited Feb 8, 2019 at 6:15

answered Jan 24, 2019 at 14:33

Smaranjit

7898 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JayCrossler Over a year ago

Thanks so much. That one-word change from "Browser" to "Hash" fixed everything for my offline SPA to work.

Silvio Biasiol · Accepted Answer · 2019-01-24 14:36:34Z

2

I had a very similar issue and used the memory router to make it work since it did not actually change the url. Also I changed the absolute route to a relative route configuring the package.json with "homepage": ".", which it is not officially supported by react

answered Jan 24, 2019 at 14:36

Silvio Biasiol

9649 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to access react-app build from local file url ("file:///"), without using any HTTP server?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related