works locally when i npm run start but fails on heroku. the only error i get on the logs is " This app may not specify any way to start a node process". ive tried changed the scripts. and ive tried to use the create react app documentation. ive also implemented the "https://github.com/mars/create-react-app-buildpack.git" build pack to the project
my file structer
//client
|
+-node modules
+ public
+-src
+-package-lock
+-package.json
//node_modules
//server
|
+-models
+-server.js
+-routes
+-Controllers
+-middlewares
+-config
+-env
+-gitignore
+-nodemon.json
+-package-lock.json
+-package.json
My main package.json scripts
"scripts": {
"start": "npm run start:dev",
"start:prod": "node server/server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"seed": "node server/scripts/seedDB.js",
"install": "cd client && npm install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
my server.js
require('dotenv').config();
const express = require('express');
const morgan = require('morgan');
const session = require('express-session');
const MongoStore = require('connect-mongo')(session);
const dbConnection = require('./config/connection');
const passport = require('./config/passport');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 8090;
// Middlewares
app.use(morgan('dev'));
app.use(express.urlencoded({extended: false}));
app.use(express.json());
app.use('/', express.static(path.join(__dirname, '../client/build')));
// Passport
app.use(passport.initialize());
app.use(passport.session()); // will call the deserializeUser
app.use(session({
secret: 'my_secret', // process.env.AUTH_SECRET,
store: new MongoStore({ mongooseConnection: dbConnection }),
resave: false,
saveUninitialized: false
}));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../client/build/'))
});
// Add Auth and API routes
app.use('/auth', require('./routes/authRoutes'));
app.use('/api', require('./routes/apiRoutes'));
// If no routes are hit, send the React app
app.use(function(req, res) {
res.sendFile(path.join(__dirname, '../../client/build/index.html'));
});
// Error handler
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500);
})
app.listen(PORT, () => {
console.log(`App listening on PORT: ${PORT}`);
});
It seems like you haven't added a Procfile. If not in the root directory of your node API add a file called Procfile with no extensions i.e .js. Once you have made the file add the following line :
web: npm run start.
Related
EDIT: To be clear, this only happening when i'm trying to host the app. Works PERFECT during local environment testing..
When trying to fetch data from my backend getting an error in Chrome saying that JS is not enabled. (IT IS) so that is not the issue..
Thinking there may be an issue with my package.json maybe if the commands are incorrect for use on the host machine? Have tried Render & Heroku same issues.
I had tried to run the commands within my local environment and the app works flawlessly fetching data as intended. Only when hosting the app do I not get any data back from the server when making API call from the front end, instead get JS not enabled error in the Network tab and no errors on Front End that I can see..
Hosted app to see network error: https://elf-invasion.herokuapp.com/
File Structure:
/root
|- config.js
|- server.js
|- package.json + package-lock.json
|- client/
|- vue.config.json
|- ... (rest of dist, src, node_modules, public etc.)
|- models/
|- Elf.js + HighScore.js
|- routes/
|- api/
|- elf.js + highScore.js
config.js
module.exports = {
hostUrl: process.env.HOST_URL,
mongoURI: process.env.MONGO_URI,
PORT: process.env.PORT || 3000,
};
server.js
const express = require("express");
const app = express();
const port = 3000;
const mongoose = require("mongoose");
const { PORT, mongoURI } = require("./config.js");
// routes
const Player = require("./routes/api/player");
const Elf = require("./routes/api/elf");
const HighScore = require("./routes/api/highScore");
// cors is a middleware that allows us to make requests from our frontend to our backend
const cors = require("cors");
// morgan is a middleware that logs all requests to the console
const morgan = require("morgan");
// body-parser is a middleware that allows us to access the body of a request
const bodyParser = require("body-parser");
const path = require("path");
app.use(cors());
// use tiny to log only the request method and the status code
app.use(morgan("tiny"));
app.use(bodyParser.json());
// chek if we are in production
if (process.env.NODE_ENV === "production") {
// check if we are in production mode
app.use(express.static("client/dist"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
});
}
// test if server is running and connected to mongoDB
app.get("/", (req, res) => {
res.send("Hello World!");
});
// app.get("/", (req, res) => {
// res.send("Hello World!");
// });
// use routes
app.use("/api/", Player);
app.use("/api/", Elf);
app.use("/api/", HighScore);
mongoose
.connect(mongoURI, {
useNewUrlParser: true,
useUnifiedTopology: true,
useUnifiedTopology: true,
})
.then(() => console.log("MongoDB connected..."))
.then(() => {
// log uri to console
console.log(`MongoDB connected to ${mongoURI}`);
})
.catch((err) => console.log(err));
app.listen(PORT, () => {
console.log(`Example app listening at ${PORT}`);
});
package.json
{
"name": "week1",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"server": "nodemon server.js --ignore 'client/'",
"client": "npm run serve --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"start": "node server.js",
"build": "npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.20.1",
"bootstrap": "^5.2.3",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"mongoose": "^6.7.5",
"morgan": "^1.10.0",
"portal-vue": "^2.1.7"
},
"devDependencies": {
"concurrently": "^7.6.0",
"nodemon": "^2.0.20"
}
}
I am making a MERN app and having some problems with connecting/running node and react server together.
Root package.json
{
"name": "server",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "nodemon server/server",
"client": "npm start --prefix client",
"dev": "concurrently \"npm start\" \"npm run client\""
},
"dependencies": {
"async": "^3.2.0",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"dotenv": "^10.0.0",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"mongoose": "^5.13.0",
"morgan": "~1.9.1",
"populatedb": "^1.0.0"
},
"devDependencies": {
"concurrently": "^6.2.0",
"nodemon": "^2.0.8"
}
}
Client proxy:
"proxy": "http://127.0.0.1:5000",
"secure": false
Main server file:
require('dotenv').config();
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const mongoose = require('mongoose');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// set up mongoose connection
const mongoDB = process.env.DB_STRING;
mongoose.connect(mongoDB, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:' ));
console.log('Connected');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
if(process.env.NODE_ENV !== 'development') {
app.get('*', function (req, res) {
res.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
});
}
const PORT = process.env.PORT || 5000
//Express js listen method to run project on http://localhost:5000
app.listen(PORT, console.log(`App is running in ${process.env.NODE_ENV} mode on port ${PORT}`))
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
I am using 'npm run dev' command to start the server.
I am getting an error message "proxy error: could not proxy request /users from localhost:3000 to http://127.0.0.1:5000".
I have tried changing proxy to 0.0.0 and also changed the scripts file to:
"start": "node ./bin/www",
"devstart": "nodemon ./bin/www",
"client": "npm start --prefix client",
"dev": "concurrently \"npm start\" \"npm run client\""
but it still does not work. I have tried some other solutions I've found but just can't get it right.
Here is also my test react file:
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [users, setUsers] = useState([]);
const getData = async () => {
const res = await axios.get("/users");
setUsers(res.data);
};
useEffect(() => {
getData();
}, []);
return (
<div>
{users.map((u) => (
<h4 key={u._id}>userName : {u.full_name}</h4>
))}
</div>
);
};
export default App;
Here is also my folder structure, if it is relevant by any chance
After trying some more solutions to fix the problem, what worked is:
in one terminal tab run nodemon app.js
in second terminal tab run npm start --prefix client.
There is probably something wrong with concurrently module, since this is working.
I have a react app being built to my project's /dist directory, I'm trying to serve the bundle and required files via my express server, as well as connect to mongo and provide an api for some data there.
Right now I'm unable to get my app to load. I am getting an error GET http://localhost:5000/dist/bundle.js net::ERR_ABORTED 404 (Not Found) at localhost:5000
Below is my server file and the rest of the project is here
server.js:
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const routes = require('./routes/api');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;
//connect to the database
mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true })
.then(() => console.log(`Database connected successfully`))
.catch(err => console.log(err));
// overide mongoose promise (depricated) with node's promise
mongoose.Promise = global.Promise;
app.use((req, res, next) => {
// TODO: should header be set on res or req?
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(bodyParser.json());
app.use('/api', routes);
app.use((err, req, res, next) => {
console.log(err);
next();
});
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../index.html'));
});
app.use('/../dist', express.static('dist'));
app.listen(port, () => {
console.log(`Server running on port ${port}`)
});
Got it to work. Although I'd suggest switching over to my fullstack-mern-kit, but that's up for you to decide.
Anyway, follow these steps...
In the package.json change scripts to:
"scripts": {
"dev": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode=production",
"start": "node ./server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
In your dist folder, add an index.html (you'll also need include a <link> to your compiled css stylesheet):
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
In your server.js file, rework it like so:
const express = require("express");
const app = express();
const { resolve } = require("path");
app.get("/sampleData", (req, res) => {
res.send("sample data");
});
app.use(express.static("dist"));
app.get("*", (req, res) => res.sendFile(resolve("dist", "index.html")));
app.listen(8080);
Run npm run build, then npm start, then navigate to http://localhost:8080.
You may need to build the app first. Use this command and then try serving: npm run build
I trying deploy my MERN app to heroku.
After build success on heroku doesn't see a API routes:
Steps:
On localhost I run concurrently node server and client (create-react-app).
Server on port 5000 and client on port 3000.
After this I fetch from API routes /hotels Array with items and connect it to Redux store and display it.
Properly behavior:
Localhost: works fine
Heroku: broken (didn't connect with API)
This is my server.js file:
const express = require('express');
const path = require('path');
const app = express();
const http = require('http');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieSession = require('cookie-session');
const passport = require('passport');
const morgan = require('morgan');
const keys = require('./API/config/keys');
//######### MODELS #########
require('./API/models/Users');
//######### SERVICES #########
require('./API/services/passport');
//######### MONGODB CONNECT #########
mongoose.connect(MONGO_CONNECT);
//######### ROUTES #########
const hotelsRoutes = require('./API/routes/hotels');
const countRoutes = require('./API/routes/count');
const topRoutes = require('./API/routes/top');
// Use routes
app.use('/hotels', hotelsRoutes);
app.use('/count', countRoutes);
app.use('/top', topRoutes);
app.use(morgan('dev'));
app.use('/uploads', express.static('uploads'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(
cookieSession({
maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
keys: [keys.cookieKey]
})
);
app.use(passport.initialize());
app.use(passport.session());
require('./API/routes/authRoutes')(app);
app.use(express.static('client/build'));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
const port = process.env.PORT || 5000;
const server = http.createServer(app);
server.listen(port);
Package.json (server):
{
"name": "root-react-hotel-app",
"version": "0.1.0",
"main": "server.js",
"scripts": {
"client": "cd client && yarn start",
"start": "node server.js",
"start-api": "nodemon server.js",
"dev": "concurrently \"yarn start-api\" \"yarn client\"",
"build": "cd client && npm install && yarn build"
},
"devDependencies": {
//
},
"dependencies": {
//
}
}
Package.json (client):
{
"name": "client-react-hotel-app",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/google": {
"target": "http://localhost:5000"
},
"/api/*": {
"target": "http://localhost:5000"
},
"/*": {
"target": "http://localhost:5000"
}
},
"dependencies": {
// Here are dependencies
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"eject": "react-scripts eject",
"compile:sass": "node-sass src/css/styles.scss src/css/styles.css -w",
"generate:doc": "sassdoc src/css/abstracts/_mixins.scss",
"test": "cross-env NODE_ENV=test jest --config=jest.config.json",
"test-coverage": "cross-env NODE_ENV=test jest --coverage --config=jest.config.json",
"test-ci": "cross-env NODE_ENV=test jest --config=jest.config.json --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
},
"devDependencies": {
// Here are devDependencies
}
}
Also trying with static.json file and Procfile:
{
"root": "client/build/",
"setupFiles": [
"<rootDir>/client/src/setupTests.js"
]
}
Anyone can help?
Since your express server is serving both your react bundle and your api routes, in:
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
You need to protect your api routes in the 'app.get' when deploying to heroku (production mode). You can use a simple regex in order to serve all routes to your react bundle except '/api' (or whatever your api endpoint looks like, /API in your case above). It works running locally because you are running your api and react app on separate ports, not the same server.
Usually something like:
if (process.env.NODE_ENV === 'production') {
app.get(/^\/(?!api).*/, (req, res) => { // don't serve react app to api routes
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
};
I have recently built an MVC (well, more like a VC app) app in NodeJS and Express. Everything was working fine until I installed express-validator and pasted the middleware in the app file. Afterwards, localhost began hanging, with a GET / - - ms - - message in the console. I started a new app, reinstalled the modules, and copied and pasted the code. I still had the same issue, so I removed the express-validator middleware. Nothing changed.
App.js (entry point):
var config = require('./server/configure');
var express = require('express');
var app = express();
var app = config(app);
app.set('port', process.env.port || 3300);
app.set('views', __dirname + '/views');
app.listen(app.get('port'), function(req, res){
console.log('Server up: http://localhost:' + app.get('port'));
});
The routes file (/server/routes.js)
var express = require('express');
home = require('../controllers/home');
module.exports = function(app) {
router = express.Router();
router.get('/', home.home);
app.use(router);
};
The configure module (/server/configure.js)
var path = require('path'),
routes = require('./routes'),
ejs = require('ejs'),
express = require('express'),
bodyParser = require('body-parser'),
cookieParser = require('cookie-parser'),
morgan = require('morgan'),
methodOverride = require('method-override'),
errorHandler = require('errorhandler');
module.exports = function(app) {
app.use(morgan('dev'));
app.use(bodyParser.json);
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser({
uploadDir: path.join(__dirname, 'public/upload/temp')
}));
app.use(methodOverride());
app.use(cookieParser('secret value'));
routes(app);
app.use('/public/', express.static(path.join(__dirname, '../public')));
if ('development' === app.get('env')) {
app.use(errorHandler());
}
app.set('view engine', 'ejs');
return(app);
};
The home controller (/controllers/home.js):
module.exports = {
home: function(req, res) {
res.render('home');
}
};
The Package file (package.json):
{
"name": "krementcookdev",
"version": "1.0.0",
"description": "the krementcook web application",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Isaac Krementsov",
"license": "ISC",
"dependencies": {
"body-parser": "*",
"cookie-parser": "*",
"ejs": "*",
"errorhandler": "*",
"express": "*",
"express-handlebars": "*",
"express-validator": "*",
"method-override": "*",
"morgan": "*",
"path": "*"
},
"devDependencies": {}
}
Of course, I have a view file (home.ejs) in the /views directory. If you need to see it, let me know and I will add it to the post. Please do not close this a being a duplicate; I have checked similar problems and they mostly regard simple apps without routers or anything like that. I tried the solutions offered that applied to me, but none were relevant or productive.
Update: I did have specific versions in the package file, but I still had the same issue.
Try to use specific version (latest) of individual package in dependencies. for more detail Refer - https://docs.npmjs.com/files/package.json