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.
Related
I have a React app and here is my folder setup:
If I cd src and then run node server.js, I can see my server is running based off messages in added into console.log.
But when I'm in the root folder and I run npm start, the server.js is not connected. Here is my root package.json, what am I missing?
If you want to run react app and server simultaneously, you can use concurrently. Install it, and modify your scripts section so you will have separate entries for react-scripts start and node src/server.js. Then you can run them both with concurrently. It will look something like this:
{
"scripts": {
"start-react-app": "react-scripts start",
"start-server": "node src/server.js",
"start": "concurrently \"npm:start-react-app\" \"npm:start-server\""
}
}
This way, when you run npm start it will launch both scripts.
Here back-end project the port is 3002 & front-end port is default 3000 which are different , i added "proxy": "http://localhost:3002" in react project
still getting the proxy issue i don't understand the issue here
please help me thanks in advance
Install concurrently by using npm i concurrently
then add below scripts to your backend pakage.json
This will allow you to run your backend and frontend servers at the same time.
"start": "node server",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run start\" \"npm run client\"",
Then run npm run dev in backend application directory to run the application
I'm rather new to this area, so please excuse if this question is completely basic. I've seen some tutorials use nodemon to watch files, and restart servers on Nodejs backend. I've seen others use webpack to watch files such as create react app on frontend. Can you actually use nodemon to watch files and refresh pages on the front end?
Yes I believe you can set it up with your package.json scripts!
For instance with a node server with a create-react-app within a client folder you could declare a start script along the lines of:
"start": "concurrently \"nodemon server.js\" \"cd client && nodemon start\""
Then when you run npm start this will run nodemon on both the server file and the client folder
Just be aware this assumes your server file is named server.js and your client files are in a folder named client and will require you to have the concurrently dependency installed.
You could use something like this one if you already have create react app within a client folder.
"server": "nodemon server.js",
"client": "cd client && yarn start",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
Concurrently allows us to run both on one terminal as well as it allows us to pass --kill-others-on-fail which means that if one breaks (control + c on mac), the other one will also break
I am new to react and am trying to create a project that makes use of react, node, and express. Having a lot of issues setting up react correctly by myself, I decided to use create-react-app.
I found a bunch of tutorials online and a lot of them seem to suggest separating the front end and the back end into different directories resulting in two package.jsons.
so the project structure would look something like this:
Root
|
------client
| |
| -------package.json with front end dependencies
|
package.json with the back end dependencies
The client diretory is the one created with "npm init react-app" and also contains the package.json that has the react-scripts. Currently if I use command "npm run build" in the client directory it creates a build without the backend files inside the root folder, and if I use "npm run build" in the root folder it doesn't work because I do not have create-react-app scripts in that package.json.
My main question is how would I make a build of my project if I have two package.jsons and if it is normal/best practice to split up front end and back end like this?
Any advice would be much appreciated.
This folder structure is one of the most used structure. You are actually separating front-end and back-end, that would result in scalable architecture.
To build your project from one single command, you need to install a dependency concurrently. It will enable multiple commands at once. Then make changes to your root package.json.
Below is an example package.json :
"scripts" : {
"build-client": "npm run build --prefix <FRONTEND_FOLDER NAME>",
"build": "<YOUR SERVER BUILD COMMAND>",
"build-project" : "concurrently \"npm run build\" \"npm run build-client\""
}
Hope it helps!!!
I think you have to separate CRA(create-react-app) and backend server(express).
This means you have to run front and back in different port and then make a npm scripts that boths run front and back.
Like this.
ROOT/package.json
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
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.