Is it possible for build/index.html to function in browser without the need of a server (double click from file location) ?

[varvarasd]

Hi everyone,

I'm struggling to find the solution to this issue I'm having with create-react-app. After running npm build I want to be able to open the index.html from build folder, in browser with 'doubleclick' from file location, without the need of npm or any server. I also want my routes and functionality of the app to work in this scenario, basically to have my client see the app without having to use any server. I've been doing some research on the matter but couldn't find much. I would like to know if it's possible and if anyone has any links or even solutions to share in case I'm missing something.
I'm rather new to react and your help will mean a lot.
I'm using ubuntu 17. My route in App.js looks like so :

class App extends React.Component {
  render(){
    return(
      <Router basename="/">
        <Switch>
            <Route exact path="/" component={LoginComponent}/>
            <Route path="/app" component={AppLayout}/>
        </Switch>
      </Router>
    );
  }
}

then my index.js looks like so:

ReactDOM.render(<App />, document.getElementById('root'));

After running npm run build and open build/index.html in browser it shows nothing. After inspecting I can see the <div id="root"> being there but displaying only the comment <!-- react-empty: 1 -->.

Any help would be greatly appreciated
Many thanks in advance.

[viankakrisna]

You need to use HashHistory instead of BrowserHistory for that to work.

[varvarasd]

Actually it seems that using <HashRouter> instead of <Router> fixed it.
It seems <HashHistory> is not working with v4.

Many thanks

[viankakrisna]

yup, sorry :D

[dfhincapiem]

I'm trying to do the same, any update on this, were you able to do that?

[viankakrisna]

if you are using react-router v4, you can see the example here https://reacttraining.com/react-router/web/api/HashRouter in short you need to replace the usage of BrowserRouter or Router with HashRouter.

[dfhincapiem]

I'm a noob on react I have been using for only 10 days, I'm working on a project where I can't use a node server. I have been coding react without JSX, but it's very hard to code, I have found a solution to work without a Node server, that is to code with create-react-app and I can code on JSX and then run the command "npm run build" and it generates all the React code in the build folder, and then try to run build/index.html, but it doesn't load anything, any idea If what I'm trying to do is it possible?

[gaearon]

You need to serve it, just like you would do in production. When you run the build command it prints instructions on serving the output. Did you try to follow them?

[mbowen13]

@gaearon Why do you need to serve it? Why can't you just open build/index.html to view in the browser?

[smartworld-dm]

With the serve -s build the site works correctly in prod
But when I click the index.html, the browser shows the blank page. React script doesn't work.

[lacmaia]

I've tried to build with Webpack and opening index.html directly in the browser, it worked for me, but when I try to open the index.html builded by create-react-app doesn't work, why?

[taggartj]

Yep it is finely !
import { HashRouter, Route, Switch, } from "react-router-dom";

ReactDOM.render(<Provider store={store}><HashRouter><Switch> <Route exact path="/" component={Home}/> <Route path="/login" component={Login}/> </Switch></HashRouter></Provider>, document.getElementById('root'));

[bleetdh]

Hi, the problem about HashRouter is that it ignores the history props! Is there any way around this?

[MuhammadHasham23]

Any workaround??? same problem here.

[AshV]

I couldn't find the solution in the thread, why is this issue closed then?