1

Google App Engine newbie here.

I've deployed my React app to google, but when I try to preview it I get a 502 error:

Failed to load resource: the server responded with a status of 502 ()

app.yaml:

env: flex
runtime: nodejs

package.json:

{
  "name": "react-boilerplate",
  "version": "1.0.0",
  "description": "Minimal boilerplate for react",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "bundle": "./node_modules/.bin/webpack --config webpack.config.js",
    "prestart": "npm run bundle"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  },
  "engines": {
    "node": "6.11.0",
    "npm": "3.10.10"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.16.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "d3": "^4.9.1",
    "express": "^4.15.3",
    "pug": "^2.0.0-rc.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.5",
    "redux": "^3.7.1",
    "redux-thunk": "^2.2.0",
    "webpack": "^3.3.0"
  }
}

webpack.config.js:

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: [/\.css$/, /\.scss$/],
        exclude: /node_modules/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

Running out of ideas. Any help would be awesome!

3
  • Is server.js your webpack HMR server? It is not recommended for running in production. You should not need something like GAE for a pure JS browser-side application; you should look at something like Google Cloud Storage for something like that. FYI, 502 typically means Bad Gateway, which translates to something like Unable to communicate with the upstream server you were looking for. Commented Jul 21, 2017 at 22:09
  • What's HMR and how do I check if it's my webpack HMR server? Sorry a bit new to all this Commented Jul 22, 2017 at 10:11
  • Nevermind, i figured out the solution. My answer is below Commented Jul 22, 2017 at 13:18

1 Answer 1

1

Figured out the problem. Turns out I needed to move all the modules from devDependencies to dependencies!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.