javascript - React-router browserHistory OVH -
👋
i'm trying reactjs , until production... mean, have ovh website (it's own, it's shared hosting).
on development, use react router browserhistory , historyapifallbackfor webpack-dev-server. it's fine.
but when build app webpack, on production, when reload page, 404.
i can't run server express on website, it's shared hosting. solutions?
const webpack = require('webpack') const conf = require('./webpack.prod') const ora = require('ora') const spinner = ora('building...') const path = require('path') const root = path.resolve(__dirname, '../') require('shelljs/global') spinner.start() rm('-rf', 'build') mkdir('-p', path.join(root, 'build')) cp(path.join(root, 'source/index-build.html'), path.join(root, 'build/index.html')) webpack(conf, (err, stats) => { spinner.stop() if (err) throw err process.stdout.write(`${stats.tostring({ colors: true, modules: false, children: false, chunks: false, chunkmodules: false })}\n`) }) const webpack = require('webpack') const config = require('./webpack.base') const extracttextplugin = require('extract-text-webpack-plugin') const extractcss = new extracttextplugin('bundle.css') config.plugins = config.plugins.concat([ extractcss, new webpack.optimize.uglifyjsplugin({ comments: false, warnings: false, }), new webpack.defineplugin({ 'process.env.node_env': json.stringify(process.env.node_env || 'production') }) ]) const cssloaders = config.module.loaders[0].loaders config.module.loaders[0].loaders = null config.module.loaders[0].loader = extractcss.extract(cssloaders.slice(1, cssloaders.length)) module.exports = config const path = require('path') const root = path.resolve(__dirname, '../') const stylelintplugin = require('stylelint-webpack-plugin') module.exports = { entry: { app: [ path.join(root, 'source/styles/styles.scss'), path.join(root, 'source/scripts/index.js') ] }, output: { path: path.join(root, 'build'), filename: 'bundle.js', publicpath: '/build/' }, module: { preloaders: [{ test: /\.js$/, exlude: /(node_modules|bower_components)/, loader: 'eslint' }], loaders: [{ test: /\.scss$/, loaders: ['style', 'css', 'sass', 'sass-resources'] }, { test: /\.js$/, exlude: /(node_modules|bower_components)/, loader: 'babel' }, { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: 'url', query: { limit: 100, name: 'images/[name]-[hash:16].[ext]' }, include: path.join(root, 'source/static/images') }, { test: /\.(woff2|ttf|eog|svg)$/, loader: 'file', query: { limit: 1, name: 'fonts/[name]-[hash:16].[ext]' }, include: path.join(root, 'source/static/fonts') }, { test: /\.json$/, loader: 'url', query: { name: 'json/[name]-[hash:16].[ext]' }, include: path.join(root, 'source/static/json') }, { test: /\.mp4$|\.webm$/, loader: 'url', query: { limit: 3000, name: 'videos/[name]-[hash:16].[ext]' }, include: path.join(__dirname, 'source/static/video') }] }, plugins: [ new stylelintplugin({ files: './source/**/*.scss' }) ], sassresources: [ path.join(root, 'source/styles/_variables.scss'), path.join(root, 'source/styles/_functions.scss'), path.join(root, 'source/styles/_mixins.scss') ], eslint: { configfile: path.join(root, '.eslintrc'), formatter: require('eslint-friendly-formatter') }, sasslint: { configfile: path.join(root, '.sass-lint.yml') } } import react 'react' import { createstore, applymiddleware, compose } 'redux' import { render } 'react-dom' import { provider } 'react-redux' import { router, route, browserhistory, indexredirect } 'react-router' import { synchistorywithstore, routermiddleware } 'react-router-redux' import thunk 'redux-thunk' import app './containers/app' import projects './components/projects' import work './components/work' import profile './components/profile' import routes './constants/routes' import reducers './reducers' const middleware = [ thunk, routermiddleware(browserhistory) ] // create stores const store = createstore( reducers, compose( applymiddleware(...middleware), window.devtoolsextension ? window.devtoolsextension() : f => f ) ) // history const history = synchistorywithstore(browserhistory, store) render (( <provider store={store}> <router history={history}> <route path={routes.root} component={app}> <indexredirect to="/door-opener" /> <route path={routes.profile} component={profile} /> <route path={routes.projects} component={projects} /> <route path={routes.work} component={work} /> </route> </router> </provider>), document.getelementbyid('root') ) if (module.hot) { // enable webpack hot module replacement reducers module.hot.accept('./reducers', () => { const nextreducer = require('./reducers/index').default store.replacereducer(nextreducer) }) }
if shared host won't let configure server, won't able this, need able reroute urls.
https://github.com/reacttraining/react-router/blob/master/docs/guides/histories.md
Comments
Post a Comment