I am trying to export my react SPA
to a single html
with js
so I can install it into a phonegap
application.
I have my production "ready" webpack.config however when I export the files everything is bundled up and appears to be ok. But the application stops when it gets to the Provider
.
Entry Point - src/client/js/Entry.js
This is the entry point
import React, { Component, PropTypes } from 'react'
import {render} from 'react-dom';
import { Router, browserHistory, Route, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux'
import Root from './core/Provider'
import configureStore from './core/Store'
const store = configureStore;
const history = syncHistoryWithStore(browserHistory, store)
console.info('Entry') //OUTPUTS correctly
render(
<Root store={store} history={history} />,
document.getElementById('app')
)
I can confirm that <div id="app"></div>
in there on page load.
Provider.js
import React, { Component, PropTypes } from 'react'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute } from 'react-router'
import App from './App';
//###### Routes #######
import Splash from '../components/pages/Splash';
export default class Root extends Component {
render() {
console.info('Provider'); //Provider Correct
const { store, history } = this.props;
return (
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Splash}/>
</Route>
</Router>
</Provider>
)
}
}
Root.propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
App.js
import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as ActionCreator from '../actions/ActionCreator';
import { browserHistory } from 'react-router'
class App extends Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}
handleChange(nextValue) {
browserHistory.push(`/${nextValue}`)
}
render() {
console.info('App'); //No console log, does not render
return (
<div>
{this.props.children}
</div>
)
}
}
App.propTypes = {
// Injected by React Router
children: PropTypes.node
}
function mapStateToProps(state, ownProps) {
return {
errorMessage: state.errorMessage,
inputValue: ownProps.location.pathname.substring(1)
}
}
function mapDispatchToProps(dispatch) {
return {
SexAction: bindActionCreators(ActionCreator, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
What I expect when the application is running correctly
What I am seeing with the stand alone app
Store.js
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import rootReducer from './Reducers'
import defaultStates from '../states/statesDefault'
const configureStore = function (preloadedState) {
const Store = createStore(
rootReducer,
preloadedState,
compose(
applyMiddleware(thunk, createLogger())
)
)
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('./Reducers', () => {
const nextRootReducer = require('../../js/Entry').default;
Store.replaceReducer(nextRootReducer)
})
}
return Store;
};
export default configureStore(defaultStates);
Webpack.prod.js
.......
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
path.join(__dirname, 'src/client/js/Entry')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name]-[hash].min.js',
publicPath: './'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new HtmlWebpackPlugin({
template: 'public/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new ExtractTextPlugin('[name]-[hash].min.css'),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
screw_ie8: true
}
}),
new StatsPlugin('webpack.stats.json', {
source: false,
modules: false
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0'],
include: __dirname
}
......
};
Everything is being exported correctly
[Edit] - Node.js & Express
I realised I have missed out a key bit of information no doubt. I am using node and express. I start my app with npm start
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');
const isDeveloping = process.env.NODE_ENV !== 'production';
const port = isDeveloping ? 6004 : process.env.PORT;
const app = express();
app.use(express.static(__dirname + '/public/'));
const compiler = webpack(config);
const middleware = webpackMiddleware(compiler, {
publicPath: config.output.publicPath,
contentBase: 'public',
stats: {
colors: true,
hash: false,
timings: true,
chunks: false,
chunkModules: false,
modules: false
}
});
app.use(middleware);
app.use(webpackHotMiddleware(compiler));
app.get('*', function response(req, res) {
res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'public/index.html')));
res.end();
});
app.listen(port, '0.0.0.0', function onStart(err) {
if (err) {
console.log(err);
}
console.info('==> 🌎 Listening on port %s. Open up http://0.0.0.0:%s/ in your browser.', port, port);
});
We discovered in chat that the issue is incompatibility (at least in Chrome) of the HTML 5 history API with file://
urls. The browserHistory
provided by react-router
is a wrapper around this. However, for file://
URLs, you can use hashHistory
instead:
import { Router, hashHistory, Route, IndexRoute } from 'react-router';
// ...
render(
<Root store={store} history={hashHistory} />,
document.getElementById('app')
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.