I am having issues deploying a React App with Node.js backend server to Heroku. The app I've made allows the user to post a race score to a mongodb database, and all results can be retrieved and displayed from the database. I use two server ports when running this app locally, Localhost: 3000 for the frontend React and Localhost: 4000 for the backend node server. When running this app locally I was able to make it work by hardcoding the localhost:4000 URL for the axios calls to the database. Removing the Localhost:4000 part of the axios calls makes the calls default to localhost: 3000, which leads me to think the axios calls are not routing properly in the Heroku deployment. Furthermore when the axios calls are set to Localhost:4000 URL the Heroku app works fine if the backend server is spun up on my local machine.
I believe the issue here is the backend server is not running in the Heroku deployment, and that the routes may also need to be revised. I'm new to these deployments so any help here would be appreciated!
Backend Server:
https://github.com/Bensonm3/Max-a-thon-Results/blob/master/backend/server.js
Create Athlete Component:
https://github.com/Bensonm3/Max-a-thon-Results/blob/master/src/components/create-athlete.component.js
Deployed App:
https://max-a-thon-results.herokuapp.com/
Your application is running in development mode. You must serve your app wiht your nodejs server.
Do this refactoring
Add this code in your server.js
// server.js
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
// comment this code when you run in local
And add heroku post build like this in your package.json
//package.json
"scripts": {
"start": "node backend/server.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install && npm run build"
},
Related
i try many times but can not find the problem need argent help please help anyone.when i deployed on heroku backend routes work but client build static not work
this is my github repo https://github.com/Tanvir-Niloy/Manobik_Narsingdi
Heroku is mostly for making server side apis so you would connect it to your client side app to make it have server side.
From your package.json
"scripts": {
"start": "node server/server.js",
"server": "nodemon server/server",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
You also have a Procfile with the content: web: node server/server.js
Without the Procfile Heroku would have executed web: npm start which is the same as web: node server/server.js anyway.
But as you can see from the start script you are not executing your client project. You are merely running the backend but you are not serving your static websites.
You either need to host your client project somewhere (GitHub has some solutions: GitHub pages, Netlify, Vercel, ...) or you need to serve your static content from your server project. You are kinda doing it but as of now you are continuously changing your code:
app.use(express.static(Path.join(__dirname, '/client/build/static')))
To me it looks like you have a path issue here. Should be './../client/build/static' assuming the build files are placed in the client folder.
Sharing the build.log would also help to see if your project builds properly on Heroku.
I have been trying to deploy my first react js application on Digital ocean for a few days now with no success.
It is a create react app and it is connected to a PHP API running an Apache server
I have successfully build my application by using npm run build command. when I try to access the build folder from my browser, I just get a blank page. I do this by simply accessing the routing my browser to access domain_name.com/myapp/build ( just for test purposes).
When I run npm start, I can access the home of the application in development mode at domain.com:3000. The script section of my package.json looks as follow
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"add-locale": "lingui add-locale",
"flow": "flow",
"start:prod": 'node dist/app.js'
},
My server is running on https://domain_name.com but when i do https://domain_name.com:3000, I can't access the dev version of my app but i can access the dev version with domain_name.com:3000.
any help around these issues will be greatly appreciated.
When you're running npm start you launch webpack-dev-server which runs on 3000 port and host your sources.
When you build your React app, you just prepare a single js file, which you should host with your Apache server together with your API files.
You need to include that js file in your index.html with structure and <script src="path/to/js"> to that file.
Let me know if you still have any question.
Update:
To solve the problem with routing read the official deployment manual and search .htaccess
P.S: maybe you find this https://gist.github.com/ywwwtseng/63c36ccb58a25a09f7096bbb602ac1de useful.
I have built an app in Angular 2 to fetch data from a DB, and used node/express to fetch data from the server and serve it to the Angular client. Currently both of them are running in different local hosts. How do I combine them into a single project and run it on the same host?
Suppose your express site is running on localhost:3500 and all api call begins with /api
create proxy.conf.json with the content
{
"/api": {
"target": "http://localhost:3500",
"secure": false
}
}
then edit package.json and change "start": "ng serve", to "start": "ng serve --proxy-config proxy.conf.json"
now run the project using command npm start.Note:- ng serve will not work
For more information find documatation here
I have a nodejs API as server and React/Redux app as client located in one git project: https://github.com/lafisrap/fcc_nightlife.git
I want to deploy it on Heroku using the heroku cli.
The scripts section in package.json is:
"scripts": {
"start-dev": "concurrently \"yarn run server\" \"yarn run client\"",
"start": "yarn run server | yarn run client",
"server": "babel-node server.js",
"client": "node start-client.js",
"lint": "eslint ."
},
start-client.js:
const args = [ 'start' ];
const opts = { stdio: 'inherit', cwd: 'client', shell: true };
require('child_process').spawn('yarn', args, opts);
In the client folder I have another package.json which defines the client. The scripts section of it:
"scripts": {
"start": "react-scripts start",
}
I did:
heroku create
git push heroku master
The api is running fine. But I don't know how to start/access the client.
You CAN NOT deploy two services in one Heroku app. In short, you have to deploy them to separate Heroku dynos to deploy two apps.
More information is provided in this stackoverflow answer to a similar question.
PS: It is always an option to serve JS files from your API server after building React files.
Hope this helps!
This repo shows the setup of Node.js serving up a React frontend running on a single Heroku dyno: https://github.com/mars/heroku-cra-node I was able to get one up and running using this as a guide.
Actually you must not want to run on different ports. because of cors and other issues. Implement proxy in nodejs OR implement nginx as a gateway for both server and client requests.
I have a java back-end that support all of the calls from the UI.
For the UI Phase i'm using nodeJS in order to run it and check that everything is working at localhost:4200, when need to publish it to the tomcat server, copying the dist folder to the webapp at tomcat then the application is available at localhost:8080.
The questions is if there is a simple and easy way while running the UI side on nodeJS to mock all of the response to the ajax call that been made in the UI and when publishing the dist folder to the tomcat it will be transperant and will work with the server side.
I think that its kind of setting up an additional server in nodeJS and map all of the calls and return the static json from there. or there is any other easy way?
"scripts": {
"start": "start npm run start-server && gulp serve",
"start-server": "node src/server/app.js",
"start-client": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"devDependencies": {
"express": "^4.14.0"
}
create server.js file in project folder and add below code
var express = require("express");
var app = express();
var router = require('express').Router();
var data = require('./server/api/users/data.json');
app.get("/", function(req, res) {
res.send(data)
});
var port = process.env.PORT || 3000;
app.listen(port, function() {
console.log("Listening on " + port);
});
Create a folder for mock data naming server->api->users->data.json and put the below data
[{
"name":"Hello"
},
{
"name":"World"
}]
In order to use mock data, you need to install express server. Add above lines in your package.json and run command npm install and once install, use npm start. npm start will start your gulp serve(or use appropriate cmd as per server installed) and express server both.