Can't host React app on Google App Engine - node.js

I'm a big Google App Engine newbie here. Struggling to deploy my first app onto the platform. When I try to, I get the following error message:
The command '/bin/sh -c npm install --unsafe-perm || ((if [ -f npm-debug.log ]; then cat npm-debug.log; fi) && false)' returned a non-zero code: 1
ERROR
ERROR: build step "gcr.io/cloud-builders/docker#sha256:b085f9e5583624eace9c9ba45097afc12123cf5f145703c693c32264c90bbbe0" failed: exit status 1
ERROR: gcloud crashed (AttributeError): 'module' object has no attribute 'HttpErrorPayload'
app.yaml:
env: flex
runtime: nodejs
package.json:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "Minimal boilerplate for react",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --progress --inline --colors --hot --config ./webpack.config.js",
"postinstall": "NODE_ENV='production' webpack -p",
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"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",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0"
}
}
server.js:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);
console.log('Server started');
This is what my folder directory looks like:
Am I doing right?

Was able to solve this by moving all the modules in devDependencies to dependencies!

Related

Fixing Webpack's Watch Option

I had code that worked just fine, but now I've updated some packages, especially webpack, and I'm getting some warnings that I'd like to remove.
When I run the command npm run watch, I get the following error:
[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
My package.json is as follows:
{
"name": "simple-flask-react-template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"author": "jadiker",
"license": "None",
"homepage": "https://github.com/rbarbaresco/simple-flask-react-template#readme",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.2.1",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"jquery": "^3.5.1",
"popper.js": "^1.14.7",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^5.11.1",
"webpack-cli": "^3.3.10"
},
"babel": {
"presets": [
"env",
"react"
]
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"query-string": "^6.11.1",
"react-router-dom": "^5.1.2"
}
}
My webpack.config.js is as follows:
const webpack = require('webpack');
const config ={
mode: 'development',
entry: {
login: './js/login.jsx',
signup: './js/signup.jsx',
index: './js/index.jsx',
search: './js/search.jsx',
ask: './js/ask.jsx',
question: './js/question.jsx',
help: './js/help.jsx',
test: './js/test.jsx',
},
devtool: 'inline-source-map',
output: {
path: __dirname + '/dist/bundle',
filename: '[name].bundle.js',
},
resolve:{
extensions:[
'.js',
'.jsx',
'.css'
]
},
module:{
rules:[
{
test:/\.jsx?/,
exclude:/node_modules/,
use:'babel-loader'
},
{
test:/\.(jpe?g|png|gif|svg)$/i,
loader:"file-loader",
},
{
test:/\.css$/,
use:[
'css-loader'
],
},
]
}
};
module.exports = config;
What can I change in the code in order to get that warning to go away?

I get 404 error in the localhost even though I already did "npm run build"

I'm trying to send a small demo made with React to production. I did not make the demo with create-react-app, I did it by hand. I used express.js to serve the application.
When I run the command "SET NODE_ENV = production node server.js" (I'm in Windows, that's why SET) and I go to the localhost I keep getting GET / 404, even though I already made the command "npm run build".
Since it's the first time I do this, I really have no clue what happens.
This is my package.json:
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --colors",
"serve": "webpack-dev-server --content-base build/ --color --
progress",
"start": "npm run build && npm run serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Pepe",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "3.15.0",
"eslint-config-airbnb": "14.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "4.0.0",
"eslint-plugin-react": "6.10.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"identity-obj-proxy": "^3.0.0",
"jshint": "^2.9.6",
"style-loader": "^0.20.2",
"url-loader": "^0.5.8",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"bootstrap": "^4.0.0",
"compression": "^1.7.3",
"express": "^4.16.4",
"mime": "^1.4.1",
"morgan": "^1.9.1",
"normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.1.1",
"uuid": "^3.2.1"
},
"standard": {
"ignore": [
"/build/"
]
},
"eslintConfig": {
"extends": [
"standard",
"standard-jsx"
]
},
"stylelint": {
"extends": "stylelint-config-standard"
},
"optionalDependencies": {
"win-node-env": "^0.4.0"
}
}
And here is my server.js:
const { createServer } = require('http');
const express = require('express');
const compression = require('compression');
const morgan = require('morgan');
const path = require('path');
const normalizePortprocess = port => parseInt(port, 10);
const PORT = normalizePortprocess(process.env.PORT || 3000);
const app = express();
const dev = app.get('env') !== 'production';
if (!dev) {
app.disable('x-powered-by');
app.use(compression());
app.use(morgan('common'));
app.use(express.static(path.resolve(__dirname, 'build')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});
}
if (dev) {
app.use(morgan('dev'));
}
const server = createServer(app);
server.listen(PORT, err => {
if(err) throw new err;
console.log(`Server listen in ${PORT}`);
});
Everything would seem to work correctly except that despite having executed to many times the command "npm run build", still nothing appears
You are running in a development environment, and only handling that GET request if !dev.
if (!dev) { // here is the problem
// ...
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});
}
Instead, either remove the if statement and always handle this route, or change it to if(dev).

Deploy Nuxt.js to Google App Engine Return 502 Bad Gateway

Hi is there anyone who has tried to deploy nuxt app to Google App Engine. I have tried from nuxt regular and express template, it shows 502 Bad Gateway. I don't modify anything from create-nuxt-app command. My app.yaml file contains
runtime: nodejs
env: flex
Is there anything wrong with my setup or maybe there are some additional setup I have to do?
Here is my package.json
{
"name": "nuxt-pwa-vuetify-starter",
"version": "1.0.0",
"description": "Nuxt.js + PWA + Vuetify.js starter project",
"author": "Jefry Dewangga <jefrydco#gmail.com>",
"private": true,
"homepage": "https://github.com/jefrydco/nuxt-pwa-vuetify-starter#readme",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/jefrydco/nuxt-pwa-vuetify-starter"
},
"keywords": [
"nuxt",
"nuxt.js",
"nuxtjs",
"nuxt pwa",
"vue",
"vue.js",
"vuejs",
"vue universal",
"vue ssr",
"vue pwa",
"vuetify",
"vuetify.js",
"vuetifyjs"
],
"engines": {
"node": ">=8.0.0",
"npm": ">=5.0.0"
},
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"prestart": "npm run build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.1",
"#nuxtjs/browserconfig": "0.0.7",
"#nuxtjs/component-cache": "^1.1.1",
"#nuxtjs/dotenv": "^1.1.0",
"#nuxtjs/google-analytics": "^2.0.2",
"#nuxtjs/pwa": "^2.0.5",
"#nuxtjs/sentry": "^1.0.1",
"#nuxtjs/sitemap": "0.0.3",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"cross-env": "^5.1.3",
"express": "^4.16.2",
"morgan": "^1.9.0",
"node-sass": "^4.7.2",
"nodemon": "^1.17.1",
"nuxt": "^1.3.0",
"pug": "^2.0.0-rc.4",
"sass-loader": "^6.0.7",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vuetify": "^1.0.3"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"eslint": "^4.18.1",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.2",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1"
}
}
and here is my app server index.js,
const express = require('express')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 8080
app.set('port', port)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
async function start () {
// Init Nuxt.js
const nuxt = new Nuxt(config)
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
console.log('Server listening on http://' + host + ':' + port) // eslint-disable-line no-console
}
start()
Below worked for me.
package.json
"start": "npm install --save cross-env && nuxt build && cross-env NODE_ENV=production node server/index.js",
This install cross-env before serving and nuxt build is a required command in production.
Plus I've changes in server.js
Add health route to express:
app.get('/_ah/health', (req, res) => {
res.status(200)
res.send({hello:'world'})
})
Listen to only port
// app.listen(host,port)
app.listen(port)

npm throwing error in react

Following is my code in which npm is throwing error. Earlier it was working fine, but when I have copied the same code in different directory, ran npm install and now trying to run npm start. It is throwing error :
ERROR in ./www/plugins/entry.js
Module build failed: SyntaxError: Unexpected token (7:8)
5 | import routes from './routes/routes'
6 |
> 7 | render((<Router history={browserHistory} routes={routes} />),document.getElementById('app'))
Code is :
import React from 'react';
import { render } from 'react-dom';
import { Router , browserHistory } from 'react-router';
import routes from './routes/routes';
render((<Router history={browserHistory} routes={routes} />), document.getElementById('app'));
package.json
{
"name": "userapp3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --config www/server/webpack.js --watch --colors",
"webp": "concurrently 'node www/server/index.js' 'webpack --config www/server/webpack.js --watch --colors'",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"extract-text-webpack-plugin": "^1.0.1",
"minifier": "^0.8.0",
"node-sass": "^3.8.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-helmet": "^3.3.0",
"react-router": "^2.5.2",
"react-select2": "^4.0.1",
"sass-loader": "^4.0.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1"
}
}

Getting an error when deploying to heroku "faliled to load resource 404 " bundle.js

I am trying to deploy my app to heroku but it's throwing this error that I listed in the title. I'm using webpack to bundle the files into the file bundle.js I'm just not sure how to deploy this to heroku so that bundle.js will be available. How do you reconcile webpack with heroku? I am going to attach my db.js file and package.json file.
db.js
var Sequelize = require('sequelize');
var env = process.env.NODE_ENV || 'development';
var sequelize;
if (env === 'production') {
sequelize = new Sequelize(process.env.DATABASE_URL, {
dialect: 'postgres'
}); // This if statement should execute if the app is run on Heroku
} else {
sequelize = new Sequelize(undefined, undefined, undefined, {
'dialect': 'sqlite',
'storage': __dirname + '/data/practice-todo-api.sqlite'
});
}
var db = {};
db.todo = sequelize.import(__dirname + '/models/todo.js');
db.user = sequelize.import(__dirname + '/models/user.js');
db.token = sequelize.import(__dirname + '/models/token.js');
db.sequelize = sequelize;
db.Sequelize = Sequelize;
db.todo.belongsTo(db.user);
db.user.hasMany(db.todo);
module.exports = db;
package.json
{
"name": "practice-todo-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.9.1",
"bcrypt": "^0.8.5",
"body-parser": "^1.13.3",
"crypto-js": "^3.1.5",
"express": "^4.13.3",
"jsonwebtoken": "^5.0.5",
"lodash": "^3.10.1",
"moment": "^2.11.2",
"pg": "^4.4.1",
"pg-hstore": "^2.3.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.0.0",
"react-router": "^2.0.0-rc5",
"redux": "^3.0.4",
"redux-form": "^4.1.3",
"redux-promise": "^0.5.1",
"request": "^2.60.0",
"sequelize": "^3.17.1",
"sqlite3": "^3.1.1",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"file-loader": "^0.8.5",
"webpack": "^1.12.13"
}
}
Heroku recognizes a script called postinstall as part of the deployment lifecycle, which it executes after running npm install. In the postinstall script, specify the command you use to transpile your bundle.js file.
For example:
...
"scripts": {
"build": "webpack --config ./config/webpack.config.js --progress --colors",
"start": "node server.js",
"postinstall": "npm run build" // referencing the "build" script above
},
...
Some helpful resources:
http://ditrospecta.com/javascript/react/es6/webpack/heroku/2015/08/08/deploying-react-webpack-heroku.html
https://github.com/alanbsmith/react-node-example/
https://github.com/data-creative/express-on-rails-starter-app/tree/mongo-deploy-react

Resources