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

Question

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?

Bundle it all up, like you would for... production? And just deliver those few files? How come 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
– Mjh, 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
– 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
– Mjh, Commented Oct 3, 2017 at 7:50

Jose Paredes · Accepted Answer · 2017-10-03 08:53:42Z

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 '../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/[email protected]/umd/react-router.min.js"></script>

answered Oct 3, 2017 at 8:53

Jose Paredes

4,1283 gold badges29 silver badges50 bronze badges

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

Comments

Massimiliano Janes · Accepted Answer · 2017-10-03 08:34:59Z

1

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

answered Oct 3, 2017 at 8:34

Massimiliano Janes

5,6341 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related