Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack/ Babel/ Express Env for React
{
"plugins": ["react-hot-loader/babel"],
"ignore":[]
}
const Server = require('./server.js')
const port = (process.env.PORT || 8080)
const app = Server.app()
if (process.env.NODE_ENV !== 'production') {
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const config = require('../webpack.deployment.config.js')
const compiler = webpack(config)
app.use(webpackHotMiddleware(compiler))
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}))
}
app.listen(port)
console.log(`Listening at http://localhost:${port}`)
{
"name": "how_far_hr",
"version": "1.1.0",
"engines": {
"node": "5.12.0"
},
"description": "A small toy app showing HR progress with React and ES6",
"author": "Jon Deng <jondeng.com>",
"license": "MIT",
"private": false,
"scripts": {
"start": "npm build && node dist/app.js",
"dev-start": "node dist/app.js",
"build": "webpack --config ./webpack.deployment.config.js --progress --colors"
},
"dependencies": {
"bootstrap": "^4.0.0-alpha.2",
"express": "^4.14.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"redux": "^3.6.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-cli": "^6.6.5",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"react-hot-loader": "^3.0.0-beta.5",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2"
}
}
const path = require('path')
const express = require('express')
module.exports = {
app: function () {
const app = express();
const indexPath = path.join(__dirname, 'indexDep.html');
const publicPath = express.static(path.join(__dirname, '../dist'));
app.use('/dist', publicPath);
app.get('/', function (_, res) { res.sendFile(indexPath) });
return app;
}
}
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/index.js',
output: {
path: __dirname,
filename: 'bundle.js',
publicPath: '/app/assets/'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'app'),
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'./app/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
}
})
],
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
include: path.join(__dirname, 'app'),
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}]
},
};
@surmistry

This comment has been minimized.

Copy link

commented Dec 15, 2017

What would be the benefit of using dev-dependant webpack middleware loaded into your
app.js instead of your server.js like in create-react-app?

Thanks for the great synopsis btw, useful info.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.