How to bundle a React app to a subdirectory on a server?

Question

I have a React app I\'ve been developing on my localhost. I want to copy it to a server into a subdirectory called vensa.

My webpack config file looks like this..

Answer 1

Use the html-webpack-plugin to generate your final index.html with the correct bundle names automatically injected into it.

Then set output.publicPath in your webpack config to tell webpack the subdirectory your assets will be deployed to:

output: {
  path: 'build',
  publicPath: "/vensa/",
  filename: 'bundle.js'
},

Answer 2

Thanks @trenthogan, that is awesome. But as novice I was stumped as where to actually put the code as I was working from a tutorial w/out ROUTER. Here's what worked for me once I got it all sussed out...

in my index.js...

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';

ReactDOM.render(
    <Router basename={'foobar'}>
        <Route path="/" component={App} />
    </Router>, document.getElementById('root'));
serviceWorker.unregister();

Which previously looked like...

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

Answer 3

Or you could use an environment variable to adjust all your links manually.

const ENV = process.env.NODE_ENV || 'local'; //development
const config = {
    publicPath: ENV !== 'production' ? '/' : '/dev/'
};
plugins: ([
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(ENV),
            'process.env.config': JSON.stringify(config)
        })
})

Then one of your routes:

<Route path={process.env.config.publicPath + "account/"} component={Account} />

Then your links:

<Link class="panel-close" href={process.env.config.publicPath + "account/"} >Account</Link>

This worked great for me. Especially since I'm using preact, whose preact-router doesn't really support the basename at this time.

<Router history={browserHistory} basename={'foobar'}>
  <Route path="/" component={App} />
</Router>

Answer 4

If you are using React Router v4 you should be able to set it using basename={foobar}.

<Router history={browserHistory} basename={'foobar'}>
  <Route path="/" component={App} />
</Router>

Link to the docs: https://reacttraining.com/react-router/web/api/BrowserRouter

Note: if using create-react-app in a sub directory you will also want to set "homepage": "/foobar/", in your package.json file. So the production build points at the right path.

Answer 5

1. Add "homepage": "https://yourdomain/subdirectory/" in package.json
2. Update the Routes, set sub directory in route,

<Router basename={'/directory-name'}>
  <Route path='/' component={Home} />
</Router>

3. Add base in public/index.html. It helps to set path without issues.

   <base href="%PUBLIC_URL%/">

4. make all css, js, images & all resource loading './assets/your resource.'

5. Only look if you are using history. add basename in history

    const historyConfig = {
        basename: 'your subdirectory'
    };
    const history = createBrowserHistory(historyConfig);

Answer 6

Adding to trenthogan's reply, we can assign basename to location.pathname

const loc = window.location || {};
<Router history={browserHistory} basename={loc.pathname || 'foobar'}>
  <Route path="/" component={App} />
</Router>

With this change, the app will work even if the subdirectory path changes in the future.