I am trying to get my application to work in development mode with Node and Webpack-Dev-Server. When I serve up '/' I get back exactly what I intend. However, when I do '/test' I get 'no such file or directory'. I have read a lot of documentation on Webpack's website and React Router Training, none seem to really answer this issue. I want to be able to use browserHistory instead of hashHistory (I am still using React-Router v3).
package.json:
{
"name": "boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"build": "NODE_ENV=production npm run clean && webpack -p",
"dev": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.15.3",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-preset-env": "^1.1.8",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.0",
"html-webpack-plugin": "^2.26.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^4.4.1",
"react-router": "^3.2.0",
"redux": "^3.3.1",
"redux-promise": "^0.5.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^3.8.1"
},
"devDependencies": {
"nodemon": "^1.11.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "^2.2.0-rc.0",
"webpack-hot-middleware": "^2.20.0"
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VENDOR_LIBS = [
'axios', 'react', 'redux', 'react-dom', 'react-redux',
'react-router', 'redux-promise'
];
module.exports = {
entry: {
bundle: './client/src/index.js',
vendor: VENDOR_LIBS
},
output: {
chunkFilename: '[name].[chunkhash].js',
path: path.join(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.(jpe?g|png|gif|svg|)$/,
use: [
{
loader: 'url-loader',
options: {limit: 40000}
},
'image-webpack-loader'
]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new HtmlWebpackPlugin({
template: './client/src/index.html'
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: '/dist',
historyApiFallback: true
},
};
server.js:
const express = require('express');
const path = require('path');
const app = express();
if (process.env.NODE_ENV !== 'production') {
app.use(express.static(path.join(__dirname, 'dist')));
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
} else {
app.use(express.static('dist'));
}
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.listen(process.env.PORT || 3050, () => console.log('Listening'));
routes.js:
import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from './components/app';
import Home from './components/home';
const componentRoutes = (
<Route component={App} path='/'>
<Route component={Home} path='/test' />
</Route>
);
const Routes = () => {
return <Router history={ browserHistory } routes={ componentRoutes } />
};
export default Routes;
The App component renders a single div saying it loaded and same for the Home component. If you care to see the entire thing on Github, here is a link:
https://github.com/jlag34/nodeWebpackSupport
The main goal is to be able to load '/test' in dev mode without using hashHistory.
Wepback docs: https://webpack.js.org/guides/development/