Create-react-app: Viewing over file:// protocol

Created on 13 Dec 2017 · 2Comments · Source: facebook/create-react-app

Is viewing a built create-react-app over the file:// protocol intended to be supported? I'm ultimately trying to develop an Electron app, but at this point I'm simply pointing Chrome to file://{path-to-project}/build/index.html and getting blank white screen instead of my app starting.

I've checked:

No Chrome Console errors (or messages at all)
The compiled JS and CSS are being placed into index.html correctly by webpack. I had to set "homepage": "./" in my package.json to achieve this.

<html lang="en">
    <head>
        ...
        <link href="./static/css/main.463eda6b.css" rel="stylesheet">
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="./static/js/main.bd32b483.js"></script>
    </body>
</html>

Compiled JS and CSS are being found and loaded correctly in Chrome -- they show up in the Sources tab and I can see the contents of their files.
Using the development server with npm start works great
Serving the build files with a server works, i.e. http-server ./build

Source

brittohalloran

👍1

Most helpful comment

This turns out to be an issue with react-router, <BrowserRouter> doesn't play nice with the file:// protocol and failed silently. Simply switching to <MemoryRouter> solved the issue.

brittohalloran on 14 Dec 2017

👍4 🎉1

All 2 comments

This turns out to be an issue with react-router, <BrowserRouter> doesn't play nice with the file:// protocol and failed silently. Simply switching to <MemoryRouter> solved the issue.

brittohalloran on 14 Dec 2017

👍4 🎉1

Technically <MemoryRouter> worked in that it didn't fail, but my application needed to use URL arguments so I opted for <HashRouter> instead.

So far so good...