Unable to Host my React NodeJS app on Heroku - heroku

I am trying to host my react app with a NodeJS server on Heroku, but I keep getting H10 Error, can someone please help resolve it.
Our nodeJS server seems to be working fine Node Server endpoint but not the React app.
Here is the code for scripts in the package.json file. I guess I got the scripts wrong. Any help or guidance would be greatly appreciated.
"scripts": {
"start": "concurrently npm:server npm:dev",
"local": "concurrently npm:server npm:dev",
"dev": "react-scripts start",
"build": "node ./scripts/build.js",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "node ./postinstall.js",
"server": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build"
}

Im i'm assuming correctly there are two sets of package.json files and that your express server is serving up client files.
There should be one package.json in your server folder, and one in the client.
In my heroku projects I have this line of code in my server package.json to allow deployment.
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
let me know if that solved the issue!

Related

Trying to deploy app in heroku but it gets stuck due to an infinite loop with my build script?

When I am trying to deploy my application, the above ^^^ just keeps repeating and the deployment never finishes.
Here are the scripts of my package.json in my backend: backend/package.json
"scripts": {
"start-server": "node server.js",
"start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
"server": "nodemon server.js",
"client": "cd frontend && npm start",
"build": "cd frontend/ && npm install && npm run build"
},
Here are the scripts of the package.json in my frontend code
"scripts": {
"start": "PORT=8888 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Any help would be much apprieciated, this is my first time trying to deploy an application so to be honest, I'm a bit lost.
I don't know why, but I actually solved this issue once i removed the .git file in my backend folder and simply git init again.

Heroku deployment of a Node+React app is not working

I'm trying to deploy my React+Node application to Heroku. I'm using Git as well.
The CMD keeps running this code and never stops:
remote: > npm run build
remote: > reactexpress#1.0.0 build /tmp/build_cd43acb7
On the Heroku log it shows "Build in progress".
I followed the instructions step by step a few times.
My scripts:
"client-install": "cd client && npm install",
"start": "node server.js",
"build": "npm run build",
"heroku-postbuild": "cd public && npm i && npm run build",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
From your scripts, your build command looks like:
{
"scripts": {
"build": "npm run build"
}
}
As we can see your build command calls build command, which then calls build command and then... You see where is the issue?
So to sum up, you need to update the build command to actually do something (not just calls itself) or just remove it if you don't wish to build anything.

Attempting to run a basic app on Heroku local

I am new to app development so I'm sure this is an easy question for you seasoned pros out there.
I have a simple MERN stack app running in development using concurrently to run both the front-end and back-end. Before I deploy my app to Heroku I wanted to validate that it will run with the Heroku command line "Heroku local web". This successfully starts my server and connects my database but it does not start the front end at all. I think this may be something wrong with my package.json scripts but I have tried everything. My scripts are as follows:
"scripts": {
"install-client": "cd client && npm install",
"start": "node server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start",
"dev": "concurrently -n 'server,client' -c 'red,green' \"nodemon server.js\" \"npm run client\"",
"heroku-postbuild": "npm run install-client && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
I suppose you run your app on your local machine with npm run dev but according to heroku's documentation here they start your app with npm start unless specified otherwise by a file named Procfile in your app’s root directory.
The start script in your package.json file indeed runs only the server (node server.js).
Try copying the content of the dev script to the start script, or adding a file named Procfile with the single line:
web: npm run dev
or whatever command you use, in your app’s root directory.

npm package.json - remove directory if it exists

I am using the following logic within my package.json file for a webpack project:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production ",
"clean": "rm -r deploy",
"start": "npm run clean && npm run dev && webpack-dev-server --mode development"
},
If my deploy directory does not exist, and I run npm start, I get the following message in my terminal:
rm: cannot remove 'deploy': No such file or directory
Is there a way to check if the directory exist first? And if does, then just skip the clean process?
Its better to use clean-webpack-plugin
but here you can also use rm -rf deploy.

How to build with npm run start?

I'm using webpack and heroku.
When I push my web to heroku it will restart and do "npm run start".
What I want to do is doing "npm run start" with "npm run build" when I push my web to heroku
here's my pakage.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start": "set NODE_ENV=production webpack --progress --hide-modules&&node server.js"
},
What I tried is this but, not working
"start": "set NODE_ENV=production webpack --progress --hide-modules&&node server.js"
Update:
Maybe your scripts isnt working in heroku because, by default they are running linux and you are triyng to run the "set" command that belongs to windows. Try removing it form the script and let cross-env do all the rest of the work for you :)
Previous response:
I know this isnt the best solution, but I hope it helps you:
If the problem is in the concatenation of commands to run, you can install "npm-run-all" to your project and then you will be able yo run several scripts in secuential order.
In your case, you could set the scripts like this:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start": "set NODE_ENV=production webpack --progress --hide-modules",
"run-server": "node server.js",
"build-sart-n-run": "run-s build start run-server"
}
After that you can run ,either via Heroku CLI using a procfile or using the tools that the web UI gives you when you login, the next command:
$ node build-sart-n-run
sorry if my english inst very good :)

Resources