javascript - How do I load a ReactReact Router site without using a web server? - Stack Overflow

I need to get a react with react router website running without getting served to a web server so my higher ups can look up on it. As per my boss' instruction, I am tasked to send him the index.html file with all the piled static files(js/css/img) to load on it so they can view my work.

I have already told my boss that I can send him the site with the package.json on so all he has to do is run npm install to get the dependencies and run the script to startup the dev server, however, he has told me that he has to present it to people who will not have node installed. What should I do?

I need to get a react with react router website running without getting served to a web server so my higher ups can look up on it. As per my boss' instruction, I am tasked to send him the index.html file with all the piled static files(js/css/img) to load on it so they can view my work.

I have already told my boss that I can send him the site with the package.json on so all he has to do is run npm install to get the dependencies and run the script to startup the dev server, however, he has told me that he has to present it to people who will not have node installed. What should I do?

• javascript
• node.js
• webpack

Share Improve this question Follow asked Oct 3, 2017 at 7:37 edohedoedohedo 6111 silver badge55 bronze badges 4

• Bundle it all up, like you would for... production? And just deliver those few files? How e you know how to deal wtih npm, node and even React, yet you don't have fundamental understanding of what they all produce? It's not a criticism, it's just that you have the hard part done but the simple part is what's not clicking with you. – Mjh Commented Oct 3, 2017 at 7:40
• give him the files he wants – Jaromanda X Commented Oct 3, 2017 at 7:40
• @Mjh I have bundled the file for production and gave it to him. Problem is once he opened up the index.html on a browser file nothing came up – edohedo Commented Oct 3, 2017 at 7:47
• So, you didn't test it first before handing it over? That sounds like your fault my friend. – Mjh Commented Oct 3, 2017 at 7:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

With react-router v4.x.x you can use <HashRouter />

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

For further information see the following link

with react-router v3.x.x use hasHistory:

import React from 'react'
import { render } from 'react-dom'
import { hashHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../ponents/App'
import Home from '../ponents/Home'

render(
  <Router history={hashHistory}>
    <Route path='/' ponent={App}>
      <IndexRoute ponent={Home} />
    </Route>
  </Router>,
  document.getElementById('app')
)

For further information see the following link

You can load react-router as well as react by using unpkg:

<script src="https://unpkg./[email protected]/umd/react-router.min.js"></script>

you may try adding "homepage": "." to your project package.json; this will instruct react scripts to set all paths relative to index.html.

Of course, this won't work if your website is unicating with a server backend or have client-side routing logic ( as it seems ). create-react docs mentions react-router basename prop to fix the client-side routing issue ...