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.

surmistry 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