Menu
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..
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ './src/index.js' ], output: { path: 'build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!sass') }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css') }, { test: /\.(png|eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/, loader: 'url' } ] }, plugins: [ new ExtractTextPlugin('vensa-dashboard.css') ], devServer: { historyApiFallback: true, contentBase: './build' } }; The index.html file looks like this...
<!DOCTYPE html> <html> <head> <title>Vensa Development Test</title> <link rel="stylesheet" href="/vensa-dashboard.css"> </head> <body> <div class="container"></div> <script src="/bundle.js"></script> </body> </html> and my routes.js file is...
import React from 'react'; import { Route, IndexRoute } from 'react-router'; import VensaDashboard from './components/VensaDashboard'; import Inbox from './components/Inbox'; import Todo from './components/Todo'; import Home from './components/Home'; export default ( <Route path="/" component={VensaDashboard}> <IndexRoute component={Home} /> <Route path="/message" component={Inbox} /> <Route path="/todo/:todoPage" component={Todo} /> </Route> ); However, if I do just run webpack -p and copy the 3 files over to that subdirectory, it doesn't work as the root path is / and it can't find the js and css files. I'm not sure what (the best way) to change in (probably one or all of these 3 files) to get it to work in a subdirectory?
The full source code of the app is here in case that helps.
Thanks!
820
Bundling. Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.
Run npm run build or npx react-scripts build to create an optimized production build for your React App and then run the command npx gulp to bundle all the JS and CSS files in the static build folder into the single main html file.
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.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
