Node.js app crashing with an R10 error - node.js

I am trying to successfully deploy a Node/React project on Heroku and after hours of debugging issues (I am a new developer) I think I got it near the finish line but now Heroku is posing some issues with deployment.
For background, here is my package.json file so you know what I have installed:
{
"name": "StarterApp",
"version": "1.0.0",
"engines": {
"node": "10.4.1",
"npm": "6.1.0"
},
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha",
"dev": "node server.js",
"build": "next build"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "4.16.3",
"fs-extra": "^5.0.0",
"ganache-cli": "^6.1.3",
"mocha": "^5.2.0",
"next": "^4.2.3",
"next-routes": "^1.4.2",
"node-gyp": "^3.7.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"rebuild": "^0.1.2",
"semantic-ui-css": "^2.3.2",
"semantic-ui-react": "^0.79.1",
"sha3": "^1.2.2",
"solc": "^0.4.24",
"truffle-hdwallet-provider": "0.0.3",
"web3": "^1.0.0-beta.34"
}
}
This is what I have in my server.js file:
app.prepare().then(() => {
createServer(handler).listen(5000, (err) => {
if (err) throw err;
console.log('Ready on localhost:5000');
});
This is what Heroku suggests the code to look like (source):
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Our app is running on port ${ PORT });
});
The problem I am running into is that I am not sure how to merge what I already have with what Heroku wants me to use. My code is necessary so that it works with NextJS and the Heroku code is agnostic of that. What can I do to make the two work together? Thanks!

I figured it out it seems. I just did the following:
app.prepare().then(() => {
const PORT = process.env.PORT || 3000;
createServer(handler).listen(PORT, (err) => {
if (err) throw err;
console.log('Ready on localhost:5000');
});
Doing that allowed me to use both NextJS and Heroku suggested code.

Related

React front end connects to the development server on my computer instead of the Node server on Azure VM where it is hosted from why using localhost

I have a React front end and Node with Express server. When I build and run it on my computer everything works perfect. When I build and run it on my Azure Ubuntu VM the server starts successfully and it hosts the React front end and I can access it no problem. But I get a "net::ERR_CONNECTION_REFUSED" in the console when it tries to access the node server. I then noticed that if my server was running on my computer the React app hosted on the Azure VM would hit the server on my local computer and not the one on the Azure VM.
So, how do I get the React app hosted on the VM to properly point to the server/vm it is hosted from?
The file structure of the app is:
>App Root
>client
>build
>public
>src
>components
>reducer, assets, middleware, services
App.js
http-common.js
index.js
package.json
>server
>config, controllers, models, routes
package.json
server.js
server.js
const bodyParser = require("body-parser");
const cors = require("cors");
const morgan = require('morgan');
const path = require('path');
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(express.static(__dirname + '/client/build'));
app.use(morgan('dev'));
app.use(bodyParser.urlencoded({ extended: true }));
const db = require("./server/models");
db.sequelize.sync();
require("./server/routes/h.routes")(app);
require("./server/routes/p.routes")(app);
require("./server/routes/user.routes")(app);
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '/client/build/index.html'), function(err) {
console.log('In sendFile of get /*')
if (err) {
console.log('error: ', err)
res.status(500).send(err)
}
})
})
const port = 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));
server package.json
"name": "test",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"start:dev": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"morgan": "^1.10.0",
"mysql": "^2.18.1",
"mysql2": "^2.2.5",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"redux": "^4.0.5",
"sequelize": "^6.6.2"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
"proxy": "http://localhost:5000"
}
http-common.js
export default axios.create({
baseURL: "http://localhost:5000/api",
headers: {
"Content-type": "application/json",
},
});
client package.json
"name": "tissue-screener",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"msal": "^1.4.10",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "../server.js",
"proxy": "http://localhost:5000"
}
I figured out the answer and decided to share it here in case anyone else makes the same dumb mistake I did.
http-common.js
export default axios.create({
baseURL: "/api",
headers: {
"Content-type": "application/json",
},
});
That's it. Just had to remove the "http://localhost:5000" from the axios.create and let the proxy setting in the package.json do it's work.

facing problem while importing files in nodejs

I don't know what's going wrong with these extensions, when I provide the extension ".js" the app runs fine but it gives a warning on that line saying Unexpected use of file extension "js" for "./models/user.js", but when I remove the extension the whole app crashes and says Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\React\AuthenticationApp\backend\src\models\user' imported from F:\React\AuthenticationApp\backend\src\index.js, I know that files can be imported in node.js without providing the extension but I just know-how
here's my code
// eslint-disable-next-line no-unused-vars
import express from 'express'
import User from './models/user'
import './db/mongoose'
const app = express()
const port = 4000
app.use(express.json())
app.post('/users', (req, res) => {
const user = new User(req.body)
user
.save()
.then(() => {
res.send(user)
console.log(user)
})
.catch((e) => {
res.status(401).send(e)
})
})
app.listen(port, () => {
console.log(`Server is up on ${port}`)
})
and this is package.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"type": "module",
"scripts": {
"build": "babel ./src --out-dir ./build",
"start": "nodemon --exec babel-node src/index.js",
"dev": "nodemon src/index.js",
"lint": "eslint ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.13.16",
"#babel/core": "^7.13.16",
"#babel/node": "^7.13.13",
"#babel/preset-env": "^7.13.15",
"#babel/runtime": "^7.13.17",
"eslint": "^7.25.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.4.0",
"nodemon": "^2.0.7",
"prettier": "^2.2.1"
},
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.12.6",
"validator": "^13.6.0"
}
}
Adjust your eslint config with this rule:
"rules": {
"import/extensions": [
"error",
{
"js": "ignorePackages"
}
]
},
Detailed description of the rule is in this page.
That way a nodejs will successfully run, eslint will not show error.
CommonJS modules are still able to be without extension in 'require' functions.
But you have to specify an extension of ESmodule when using 'import' (except 'Bare specifiers' like 'some-package'), this is according to nodejs docs.

Deployed my app on heroku but got error: Failed to load resource: net::ERR_CONNECTION_REFUSED

My app's front-end is Reactjs and backend is Node js. I used express server and graphql-express server. I deployed my app successfully. But it starts with data is loading and then nothing shows. But if I run locally npm start then the heroku app is start working.
This is the error I get it in browser
This is my server's package json file. If i run in terminal npm run dev. It opens my react js app.
{
"name": "backend",
"version": "1.0.0",
"description": "personish vol 2",
"main": "server.js",
"scripts": {
"start": "node server.js",
"server": "node server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Alak",
"license": "ISC",
"dependencies": {
"concurrently": "^5.0.2",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-graphql": "^0.9.0",
"graphql": "^14.5.8",
"pg": "^7.15.1",
"pg-hstore": "^2.3.3",
"sequelize": "^5.21.3"
}
}
This is my react's package json
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": "13.3.0",
"npm": "6.13.0"
},
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"apollo-boost": "^0.4.7",
"axios": "^0.19.0",
"firebase": "^7.6.1",
"graphql": "^14.5.8",
"pg": "^7.15.1",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-dom": "^16.12.0",
"react-dropzone": "^10.2.1",
"react-redux": "^7.1.3",
"react-redux-firebase": "^3.0.5",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.4",
"redux-firestore": "^0.11.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This is my express and graphql-express server.
const express = require("express");
const app = express();
const graphqlHTTP = require("express-graphql");
const schema = require("./schema");
const cors = require("cors");
const path = require("path");
app.use(cors());
app.use(
"/graphql",
graphqlHTTP({
schema,
pretty: true,
graphiql: true
})
);
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
const port = process.env.PORT || 8081;
app.listen(port, () =>
console.log(`✅ Example app listening on port ${port}!`)
);
This is my react's app file. Where I use Apollo boost to connect with react app and node js app. I think the error comes from here, dont know how to fix it
import React from "react";
import { ApolloClient, HttpLink, InMemoryCache } from "apollo-boost";
import { ApolloProvider } from "react-apollo";
const client = new ApolloClient({
link: new HttpLink({
uri: "http://localhost:8081/graphql"
}),
cache: new InMemoryCache()
});
This is my heroku app
https://databaseapp2020.herokuapp.com/
your heroku dyno/app would have a name, you would use that to hit your graphql from say a graphiql playground on your laptop, or your react-app... if your heroku app was actually named databaseapp2020 and running then you would use the following assuming your cors was setup properly in the dyno environment variables
https://databaseapp2020.herokuapp.com/graphql

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)

Resources