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"
}
}
Related
I deployed react app successfully to Heroku but when click app link in terminal new window displays "Application Error" and error message in terminal states the following:
"import { Server } from 'socket.io'; SyntaxError: The requested module 'socket.io' does not provide an export named 'Server'
Server.js
import http, { request } from 'http';
import { Server } from 'socket.io';
const httpServer = http.Server(app);
const io = new Server(httpServer, { cors: { origin: '*' } });
const users = [];
package.json
{
"name": "app",
"type": "module",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"heroku-postbuild": "cd frontend && npm install && npm run build",
"start": "nodemon --watch backend --exec node --experimental-modules backend/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"dotenv": "^16.0.1",
"engine.io-client": "^6.2.2",
"express": "^4.18.1",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mailgun-js": "^0.22.0",
"mongoose": "^6.4.0",
"multer": "^1.4.5-lts.1",
"socket.io": "^4.5.1",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"nodemon": "^2.0.18"
},
"engines": {
"node": "12.4.0",
"npm": "6.9.0"
}
}
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 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.
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}!'))
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).