I'm having issues deploying a React/Express app to Heroku. I'm getting a "Webpack-dev-server not found" error, though I don't think I'm using the dev-server anymore, as I started using my node server.
Below is my package.json (just dev dependencies)
"scripts": {
"start": "nodemon tools/publicServer.js -d --config
webpack.config.prod.js --content-base dist/ --progress --colors",
"clean": "npm run remove && mkdir dist",
"remove": "node_modules/.bin/rimraf ./dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/publicServer.js"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.13.2",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.16.0",
"babel-preset-stage-2": "^6.13.0",
"concurrently": "^2.1.0",
"cross-env": "^1.0.7",
"css-loader": "^0.23.1",
"eslint": "3.2.2",
"eslint-config-airbnb": "10.0.0",
"eslint-loader": "1.5.0",
"eslint-plugin-import": "1.12.0",
"eslint-plugin-jsx-a11y": "2.0.1",
"eslint-plugin-mocha": "2.2.0",
"eslint-plugin-react": "6.0.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.28.0",
"morgan": "^1.8.1",
"node-sass": "^3.7.0",
"postcss-loader": "^0.9.1",
"react-hot-loader": "^3.0.0-beta.6",
"rimraf": "^2.4.3",
"sass-loader": "^3.1.2",
"serve-favicon": "^2.4.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.4.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.17.1"
},
"engines": {
"node": ">=4.0.0",
"npm": ">=3.0.0"
}
}
Below is my build.js
process.env.NODE_ENV = 'production';
console.log('Generating minified bundle for production via Webpack...'.blue);
webpack(webpackConfig).run((err, stats) => {
if (err) { // so a fatal error occurred. Stop here.
console.log(err.bold.red);
return 1;
}
const jsonStats = stats.toJson();
if (jsonStats.hasErrors) {
return jsonStats.errors.map(error => console.log(error.red));
}
if (jsonStats.hasWarnings) {
console.log('Webpack generated the following warnings: '.bold.yellow);
jsonStats.warnings.map(warning => console.log(warning.yellow));
}
console.log(`Webpack stats: ${stats}`);
console.log('Your app has been compiled in production mode and written to /dist.'.green);
return 0;
});
Below is my buildHtml.js
import fs from 'fs';
import cheerio from 'cheerio';
import colors from 'colors';
/*eslint-disable no-console */
fs.readFile('src/index.html', 'utf8', (err, markup) => {
if (err) {
return console.log(err);
}
const $ = cheerio.load(markup);
$('head').prepend('');
fs.writeFile('dist/index.html', $.html(), 'utf8', function (err) {
if (err) {
return console.log(err);
}
console.log('index.html written to /dist'.green);
});
});
Below is my publicService.js
var express = require('express');
var path = require('path');
var open = require('open');
var compression = require('compression');
var favicon = require('serve-favicon');
/*eslint-disable no-console */
const port = process.env.PORT || 3000;
const app = express();
app.use(compression());
app.use(express.static('dist'));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
app.listen(port, function(err) {
if (err) {
console.log(err);
} else {
open(`http://localhost:${port}`);
}
});
I'm kind of new to this, I'd really appreciate any input, thanks very much!
via TigerBalm
No comments:
Post a Comment