How do I load a React/React Router site without using a web server?

user_2875532 0
Viewed 1855

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 compiled 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?

webpack node.js javascript
2 Answers

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 '../components/App'
import Home from '../components/Home'

render(
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={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.com/react-router@4.2.0/umd/react-router.min.js"></script>
user_31592930

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 comunicating 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 ...

user_86313810
Related