Heroku h12 and 503 errors are occured - node.js

enter image description hereI want to deploy the node.js server to heroku. But when I'm trying to get JSON file from server, h12, 503 errors were occured...
This is my git address. Branch is CHOI-HYO-GIL.
https://github.com/js-yu1592/capstone-design.git
This is package.json
{
enter image description here
"name": "lastproject",
"version": "1.0.0",
"description": "",
"main": "index1.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index1.js"
},
"engines": {
"npm": "6.13.6",
"node": "13.5.0"
}
,
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^3.0.7",
"bcrypt-nodejs": "0.0.3",
"cookie-parser": "^1.4.4",
"dotenv": "^8.2.0",
"ejs": "^3.0.1",
"express": "^4.17.1",
"express-session": "^1.17.0",
"firebase": "^7.8.0",
"firebase-admin": "^8.9.2",
"firebaseui": "^4.4.0",
"morgan": "^1.9.1",
"mysql2": "^2.1.0",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"pug": "^2.0.4",
"sequelize": "^5.21.3",
"sequelize-cli": "^5.5.1",
"serve-favicon": "^2.5.0",
"session-file-store": "^1.4.0",
"socket.io": "^2.3.0"
},
"devDependencies": {
"connect-flash": "^0.1.1",
"nodemon": "^2.0.2"
}
}
This is index1.js
const express = require('express')
const port =process.env.PORT||3000;
const app=express()
const bodyParser = require('body-parser');
require('dotenv').config();
const { sequelize } = require('./models');
var admin = require("firebase-admin");
var serviceAccount = require("./graduation-f5a8d-firebase-adminsdk-3a1to-44789ec1c4.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://graduation-f5a8d.firebaseio.com"
});
var user_info=require('./routes/user_info')
var user_fish=require('./routes/user_fish')
var home=require('./routes/home')
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
app.use(express.static('public'));
app.use('/user_fish',user_fish);
app.use('/user_info',user_info);
app.use('/',home)
app.listen(port, ()=>console.log('Example app listening on port ${port}!'))

Related

NodeJs send you need to enable javascript on certain request

I have a Nodejs API that sends responses to a react application.
When I send a request for user information on login, the request succeeds and I get back a proper response. The thing is after I sent an initial request to log in, I get back the this response.
You need to enable JavaScript to run this app.
This only happens in production. Locally it's fine. Even doing a production build locally works just fine. It's only when I deploy to my AWS containers.
Here is my API package.json
{
"name": "my-api",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "nodemon ./bin/www",
"prod": "sudo forever stopall && forever start ./bin/www",
"start": "node ./bin/www",
"seed": "node ./setup/seed.js"
},
"engines": {
"node": ">= 12.0.0"
},
"dependencies": {
"aws-sdk": "^2.738.0",
"bcryptjs": "^2.4.3",
"bluebird": "^3.7.2",
"body-parser": "^1.19.0",
"braintree": "^3.5.0",
"compression": "^1.7.4",
"connect-pg-simple": "^6.2.1",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"express": "^4.16.4",
"express-session": "^1.17.1",
"file-type": "^14.7.1",
"formik": "^2.1.4",
"fs": "0.0.1-security",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"multiparty": "^4.2.2",
"nodemailer": "^6.6.2",
"nodemailer-smtp-transport": "^2.7.4",
"nodemon": "^2.0.4",
"pg": "^8.2.1",
"pg-hstore": "^2.3.3",
"pg-transaction": "^1.0.4",
"uuid": "^8.3.2",
"winston": "^3.3.3"
}
}
Here is my application API.
const httpProxy = require("http-proxy");
const https = require("https");
const fs = require("fs");
const appConfig = require("./config");
const appPath = `./app.${appConfig.isProduction ? "prod" : "dev"}`;
const logger = require("./utils/logger");
const app = require(appPath);
const apiProxy = httpProxy.createProxyServer();
const ACUTAL_API = process.env.ACTUAL_API || "http://localhost:8181";
app.set("x-powered-by", false);
app.all("/api/*", function (req, res) {
logger.info("reverse proxying to api");
console.log("reverse proxying");
apiProxy.web(req, res, { target: ACTUAL_API });
});
if (!appConfig.isProduction) {
app.listen(appConfig.port, () => {
logger.info(`Server started at: http://localhost:${appConfig.port}`);
});
} else {
https
.createServer(
{
/* Certificate Managed By AWS ACM */
key: fs.readFileSync("./certificates/localhost.key"),
cert: fs.readFileSync("./certificates/localhost.crt"),
passphrase: "",
},
app
)
.listen(appConfig.port);
}
Application API app.prod.js
const express = require("express");
const app = express();
const path = require("path");
const BUILD_DIR = path.join(__dirname, "../build/");
console.log(BUILD_DIR);
app.use(express.static(BUILD_DIR));
const HTML_FILE = path.join(BUILD_DIR, "index.html");
app.get("*", (req, res) => res.sendFile(HTML_FILE));
module.exports = app;
Application API Package.json
{
"name": "proxy-server",
"version": "1.0.0",
"description": "proxy server for web",
"main": "index.js",
"scripts": {
"start": "nodemon ./",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "YoMommasKrypton",
"license": "ISC",
"dependencies": {
"babel-register": "^6.26.0",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"express": "^4.17.1",
"express-http-proxy": "^1.6.2",
"glob": "^7.1.6",
"node-env-file": "^0.1.8",
"winston": "2.3.1"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
}

I want to deploy my React application on Heroku but I am getting the error cannot get/ after my application is deployed

Picture of my React application with all the files
My src files
I am unable to deploy my application on Heroku.
My package.json for outer (backend) file
{
"name": "teams-clone",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js && cd client && npm start"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"redis": "^3.1.2",
"socket.io": "^4.1.2"
}
}
My server.js file
require("dotenv").config();
const express = require("express");
const http = require("http");
const bodyParser = require("body-parser");
const cors = require("cors");
const port = process.env.PORT;
const app = express();
const server = http.createServer(app);
const Routes = require("./app/routes");
app.use([
cors(),
bodyParser.json(),
bodyParser.urlencoded({ extended: false }),
Routes,
]);
const io = (module.exports.io = require("socket.io")(server, {
cors: {
origin: "*",
},
}));
const socketManager = require("./app/socketManager");
io.on("connection", socketManager);
server.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
My client package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#syncfusion/ej2-react-schedule": "^19.1.69",
"#testing-library/jest-dom": "^5.14.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"ejs": "^3.1.6",
"express": "^4.17.1",
"moment": "^2.29.1",
"node-sass": "^4.14.1",
"react": "^17.0.2",
"react-calendar": "^3.4.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"shortid": "^2.2.16",
"simple-peer": "^9.11.0",
"socket.io": "^4.1.2",
"socket.io-client": "^4.1.2",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
I also have this piece of code for socket connections in my client:
let peer = null;
const socket = io.connect("http://localhost:4000");
const initialState = [];
I have changed it to the heroku link while deploying instead of local host 4000
my apiEndpints BASE_URL now is:
http://localhost:4000
which I changed it to the heroku link while deploying instead of local host 4000
How my application starts is:
first switch on Redis.exe -> node server.js -> cd client -> npm start
I also made a Procfile with=> web: node server.js
What am I doing wrong?

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).

error TS2503: Cannot find my namespace

I am running tsc --watch (compiling typescript into javascript) and catching warning:
router/PostRouter.ts(103,16): error TS2503: Cannot find namespace 'postRoutes'.
In my .ts file in the 103 string:
const postRoutes = new PostRouter();
postRoutes.routes();
export default postRoutes.router;
So, what's wrong?
My package.json file:
{
"name": "typescript-express-server",
"version": "1.0.0",
"main": "./build/index.js",
"license": "MIT",
"scripts": {
"start:server": "nodemon --watch ./build/index.js",
"watch:build": "tsc --watch"
},
"dependencies": {
"bcrypt-nodejs": "0.0.3",
"body-parser": "1.18.2",
"compression": "1.7.2",
"cookie-parser": "1.4.3",
"cors": "2.8.4",
"dotenv": "5.0.1",
"express": "4.16.3",
"helmet": "3.12.0",
"lodash": "4.17.5",
"mongoose": "5.0.15",
"morgan": "1.9.0"
},
"devDependencies": {
"#types/body-parser": "1.16.8",
"#types/cookie-parser": "1.4.1",
"#types/cors": "2.8.4",
"#types/express": "4.11.1",
"#types/mongoose": "4.7.32",
"#types/node": "9.6.6",
"nodemon": "1.17.3",
"tslint": "5.9.1",
"typescript": "2.8.3"
}
}
Do
const { router } = postRoutes
export default router
in export default postRoutes.router, TS assumes that postRoutes is a namespace.

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