I am trying to deploy a new app to Heroku using the build process on Heroku (it picks up the code changes from github and builds automatically). The client folders and package.json are in the root folder and the express files (including a separate package.json) are under /server.
{"error":"ENOENT: no such file or directory, stat '/app/build/index.html'"}
While troubleshooting this issue I launched bash and did a "dir" inside of the app directory. Sure enough, no "build" folder in root. I had overhauled a few things to separate the server's build from the main build - could I have screwed something up? Am I wrong in my understanding of what happens on Heroku?
Here is the package.json in root:
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build",
"dev": "SET NODE_ENV=development&& node server/index.js",
"test": "SET NODE_ENV=test&& nodemon --exec mocha --recursive",
"heroku-postbuild": "cd server && npm install && npm run build"
EDIT
Not sure if something else is going on here. I went into root on the server and issued "npm run-script build" and the build folder is now there and I can see index.html there. However, same error persists.
Closing this as I had a more fundamental issue
I have a simple git repository https://github.com/alexey-sh/test_webpack_with_npm
I want to use it as npm dependency but without publishing in npm.
So in other words I want to install the package in my another repository as dependency.
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
But I want to use a modern js in my test_webpack_with_npm project and compile it into old javascript after package installation process. To achieve it I created npm scripts (test_webpack_with_npm package)
"scripts": {
"install": "npm run build",
"build": "webpack --mode production --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
so now there's a weird thing:
if I run npm run build from test_webpack_with_npm repository I can get dist/index.js without class declaration (as I expected).
but if I install the package via the following command
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
I get another type of dist/index.js and there are class declaration.
How can I install the test_webpack_with_npm properly? I want to see old js in node_modules/test_webpack_with_npm/dist/index.js.
Steps to reproduce:
mkdir my_test_project
cd my_test_project
npm init
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
check node_modules/test_webpack_with_npm/dist/index.js
Thanks!
the fix is very simple. just replace exclude with include in webpack config
include: path.join(__dirname, 'sources'),
that works perfectly.
updated config goes here https://github.com/alexey-sh/test_webpack_with_npm/blob/master/webpack.config.js
I'm trying to build a micro-services applications with JHipster. I'm following this tutorial.
I've successfully run jhipster-registry locally (I've cloned it, then run the commands ./mvnw and yarn start to be able to see the applications registered). Without this yarn start I can't see anything on my browser.
But I want to run my gateway application with the browser sync and I can't because it's focused on jhipster-registry.
I've a backend micro-service on port 8081.
My gateway is configured on port 8080, ./mvnw run successfully and I can see my application on localhost:8080. But I would like to have the hot reload when I run my npm start command on my gateway. I've configured my package.json to run on the port 9061 :
"webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9061 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9061 --watch-content-base --profile --progress --env.stats=normal",
When I run npm start it says I can see my app on localhost:9001, but I'm on the jhipster-registry...
Does someone can help me ?
Thanks to Gael Marziou, I've build the package like if I was in production with the commands :
./mvnw -Pprod package
And then :
java -jar target/jhipster-registry*.war
I've had to up the memory allocated for the build in the package.json file :
"webpack-dev-server": "node --max_old_space_size=6144 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=6144 node_modules/webpack/bin/webpack.js",
because I had this error :
I am trying to automate the build process (Azure Devops) for my Vue.js application by making use of "npm" task.
To Install the node packages, I have used npm task with built in "install" command.
For build process, I have deployed another npm task but with custom command (build). This custom build command runs successfully with the following warning
"npm WARN build 'npm build' called with no arguments. Did you mean to
'npm run-script build'?"
I believe it is not doing the build at all as when I go the Copy Publish Artifact, it says
Total files copied: 0. [warning]Directory 'D:\a\3\a\drop' is empty.
Nothing will be added to build artifact 'drop'.
I have tried 'npm run-script build' command but get the error
"NPM failed with return code: 1"
There are some stack overflow threads (Here) where people mentioned the build as an internal command of install. If that's really the case, why I can't see the dist folder created by the install command or I am doing something wrong with my custom command npm task?
NPM Install Task
NPM Install Task with custom Build Command
npm install Task log
npm build Task log
Copy and Publish Artifact Task
Copy and Publish Task log
The script section in package.json file
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
For "npm build" task, the custom command (In question above, tried "build" and "npm run-script build") should be "run-script build". The build has successfully created the dist folder.
We're developing a ReactJS application using Create-React-App, that is served from our Node/Express server that also serves API's. We deploy the whole server to Heroku using node/JS buildpack and trying to get the CRA build step npm run build in postinstall script from the node package.json file as suggested by #mars in this issue.
The issue is that Heroku deployment is failing with this error. Note that this error happen to me sometime locally but then a npm install from the web_app is solving the issue, but not when run in Heroku. I have two related questions:
How to deploy to Heroku a Node/Express app that serves both APIs and a Create-React-App application? I can commit my build directory but this is really not the right way.
Why the react-scripts are disappearing and I have to run multiple times the npm install.
#johnnycon -
This was exactly the issue and I've received the answer from Mars in this github issue post:
#philjoseph, react-scripts is (by default) a devDependency for CRA apps, but Heroku Node buildpack has environment NODE_ENV=production which causes npm install to skip devDeps.
To install those devDeps too:
npm install --only=dev && npm install && npm run build
He also pointed to this excellent repo: https://github.com/mars/heroku-cra-node
I followed this and it works like a charm :)
Since you need "react-scripts" both in development and in production, you can simple move "react-scripts": "1.0.16" from "devDependencies" into "dependencies", so heroku doesn't ignore it.
There's a very simple solution. Before running the start script, Heroku will run a build script if it's in your package.json.
"scripts": {
"start": "node server.js",
"build": "cd client/ && yarn install && yarn build"
}
For Anyone in 2021, Follow Alexander Cherednichenko's VERY SIMPLE advice
Explanation:
As of October 2021, Create-React-App's react-script package has a ton of security vulnerability issues. I'd imagine a few people may run into their "fix" which suggests moving react-scripts to devDependencies. If you're deploying to Heroku this will NOT work. Moving react-scripts to devDependencies will cause this error since Heroku needs react-scripts to build the React app. It'll be fine locally, and you'll be vulnerability free when you run npm audit --production or yarn audit --production. Ultimately, though, Heroku will demand react-scripts is in the regular dependencies section.
The highest voted answer provides a great example repo by Mars Hall (a principal engineer at Heroku) for creating a react app that's served from a node backend. These days, though, it too includes react-scripts in the regular dependencies section of it's react-ui/package.json file.
In addition, since Create-React-App defaults to Yarn these days, the addition of npm install --only=dev will not run nor work (that I could tell based on the node buildpack log). Moreover, it may add testing dependencies that your app definitely won't need in production.
Unfortunately, until Create-React-App decides to do some updates, it's best to just ignore the issues that npm audit brings up (at least the ones related to react-scripts). Since react-scripts is a build tool, it's extremely unlikely for any vulnerabilities raised to be exploited.
P.S. This likely would be better suited as a comment under Alexander Cherednichenko's answer but I was one reputation away from being able to do so.
P.P.S Hopefully someone actually finds this helpful!
Are react-scripts declared as a devDependency or regular dependency in package.json? Since you're building on Heroku and heroku is reading the env variable as production (I'm assuming here), it won't install react-scripts. Try moving react-scripts as a regular dependency and try again.
With other cloud providers, I likely wouldn't follow this path, but with Heroku, it's the path of least resistance I've found. This article goes into a little more detail on your scenario. https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
i was trying exactly the same thing, deploy a create-react-app project to heroku, and was getting react-scripts not found something....
Heroku reads the scripts into package.json and cannot execute them.
The key to overcome this issue is to 'create/publish' the 'scripts' folder, which by default create-react-app does not create it, just to keep things simple.
So by running the eject command $npm run eject, the scripts folder its created as long as the config folder.
After that you can execute again the heroku script e.g. $ git push heroku master
and hopefully it wil deploy everything on Heroku.
More info about eject script on create-react-app documentation
Hope this helps, good luck.
Can you share how your Package.json file Scripts look? I actually deployed to Heroku yesterday and it seems to be working quite ok for me.
Maybe your dependencies are not added correctly in your package.json.
This is how my scripts look (if you don't have any scss/less/sass ignore the first 2 scripts):
"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "npm run start:server",
"watch": "npm-run-all --parallel watch-css start:*",
"start:server": "node server/server.js",
"start:client": "react-scripts start",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"}
When running in Development to take advantage of the Hotrealoding I run
npm run watch
And for PROD I run
npm run build
And then I deploy to Heroku. Try to check the logs from Heroku in a separate Terminal window so you can check what is wrong with your deployment.
Simply use heroku logs to display the last 100 lines of your logs.
Or to tail the logs in real-time: heroku logs -t.
Specify Node Environment
Tell heroku what version of heroku we want to use. By default heroku uses older version which will crash our app. you have 2 package.json files, one in client, another one is in the express server side. in express server side add this to package.json
"engines": {
"node": "12.9.1",
"npm": "6.10.2" },
Specify start script
Instruct heroku what command it should run to start up our server. Add this to the server side package.json
"start":"node index.js",
INSTALL HEROKU CLI
Install Heroku Cli
Sudo apt-get update
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh or sudo snap install heroku
In macos
brew install heroku cli
By default heroku uses a git based deployment procedure or workflow.
Git init
Git add .
Git commit -m “initial commit”
Heroku login
Heroku create nameOfTheApp
https://git.heroku.com/nameOfTheApp.git
This link is our deployment target. It is a git repository that we can push our local server to it.
Git remote add heroku https://git.heroku.com/nameOfTheApp.git
Git push heroku master
I had the same problem and happened to solve the problem by adding a few lines in the package.json (the one for the main project not the one in the client side) after seing #Daniel's comment.
What's happenning here is that Heroku is searching for the react scripts that can be used to install the dependecies and build the app on the client side. In my case both of those scripts were missing. In fact this is how my scripts looked like when I had the problem :
...
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start"
},
...
Heroku was expecting the scripts "install-client" and "heroku-postbuild". I just added them and the error dissapeared :
...
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build"
},
...
I hope this would help someone.