Can't deploy mypackjs webpack app in Google App Engine
I am trying to deploy a react app that is 100% frontend but running on a webpack server. I need to deploy it to google app engine as agile but I got this error after buildinggcloud app deploy
sh: 1: webpack: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-hot-boilerplate@1.0.0 bundle: `webpack --config webpack.config.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-hot-boilerplate@1.0.0 bundle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2017-05-27T15_14_54_097Z-debug.log
npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/nodejs/bin/node" "/nodejs/bin/npm" "start"
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! react-hot-boilerplate@1.0.0 prestart: `npm run bundle`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-hot-boilerplate@1.0.0 prestart script 'npm run bundle'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-hot-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run bundle
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-hot-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-hot-boilerplate
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /app/npm-debug.log
I followed this tutorial and all dependencies already installed. Unfortunately, I cannot get it to work.
Here is my current situation
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
});
webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV
module.exports = {
devtool: 'eval',
entry: [
'whatwg-fetch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/dev-server',
'babel-polyfill',
'./app/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
library: 'Redux',
libraryTarget: 'umd',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{ test: /\.js$/,
loaders: ['babel-loader'], exclude: /node_modules/,
include: path.join(__dirname, 'app')
},
{
test: /\.json$/,
loader: 'json'
},
{test: /\.scss$/, loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")},
/* { test: /\.scss$/, loaders: ['style', 'css', 'sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib','raw']}, */
{ test: /\.css$/, loader: "style-loader!css-loader" },
//{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.(jpe?g|png|gif|svg)$/i,loader:'file'},
{test: /\.(woff|woff2|ttf|eot)$/, loader: 'file'},
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: 'url' }
]
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
devtool: 'source-map'
};
package.json
"scripts": {
"start": "node server.js",
"bundle": "webpack --config webpack.config.js",
"prestart": "npm run bundle",
"lint": "eslint src"
},
What am I doing wrong.
thanks for the help
source to share
Could you show your dependencies in a file package.json
?
I had a similar problem running gcloud app
Error: Cannot find module 'webpack-dev-server'
at Function.Module._resolveFilename (module.js:469:15)
I solved the problem of moving the given dependency (wepack-dev-server) from devDependencies
to dependencies
to package.json.
If anyone else has the same problem, I suggest taking a look at yours dependencies
in package.json. only dependencies
needs to be done devDependencies
for development, e.g .: unit tests, Coffeescript for broadcast, Javascript, minification,
source to share
You need to change your scripts. Installing Webpack globally in App Engine is not the best approach, use it directly from node_modules
.
First, make sure webpack is in your production dependencies:
npm install --save webpack
Change your package.json
script:
"scripts": {
"start": "node server.js",
"bundle": "./node_modules/.bin/webpack --config webpack.config.js",
"prestart": "npm run bundle"
},
Now, a simple set npm install
in a clean install should be sufficient to bundle your application.
source to share