无法在Google App引擎上部署我的reactjs webpack应用程序

Question

I'm trying to deploy my react app which is 100% frontend but running on a webpack server. I need to deploy it to Google app engine as a flexible environment but i got this error after making the gcloud 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've followed this tutorial and all dependencies already installed. Unfortunately, i can't get it works.

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 i'm doing wrong.

Thanks for helping

Answer 1

You need to change your scripts. Installing Webpack globally in App Engine is not the best approach, use it directly from node_modules .

First, ensure webpack is in your production dependencies:

npm install --save webpack

Edit your package.json script:

"scripts": {
    "start": "node server.js",
    "bundle": "./node_modules/.bin/webpack --config webpack.config.js",
    "prestart": "npm run bundle"
},

Now a plain npm install in a clean installation will be enough for bundling your application.

Answer 2

Could you show your dependencies in the package.json file?

I had a similar problem running gcloud app deploy

Error: Cannot find module 'webpack-dev-server'
at Function.Module._resolveFilename (module.js:469:15)

I solved the issue moving the given dependency (wepack-dev-server) from devDependencies to dependencies in package.json.

In case somebody else has the same problem I suggest to have look at your dependencies in package.json. dependencies are required to run, devDependencies only to develop, eg: unit tests, Coffeescript to Javascript transpilation, minification,