My friend had a bad folder structure, which he wanted me to contribute to, he had his backend in the client directory.
i wanted to separate the folder, he objected, so as not to loose previous git commit history. so i came up with this approach of running a script before deploying
i.e enters the client removes previous client build, runs new build and copy to backend. in the backend i serve the client build as a static file.
so after committing changes in both client and backend i ran
npm run dev
git push heroku
This approach worked very well, but i want only heroku or npm to run it before deploying, i tried changing my dev script to heroku-postbuild, heroku-prebuild, npm postinstall, and even build, but the build kept failing.
heroku-postbuild
"scripts": {
"start": "node server",
"heroku-postbuild": "cd ../ && rm -rf build && npm run build && cp -rf ./build ./backend/public",
"test": "echo \"Error: no test specified\" && exit 1"
},
heroku-prebuild
"scripts": {
"start": "node server",
heroku-prebuild": "cd ../ && rm -rf build && npm run build && cp -rf ./build ./backend/public",
"test": "echo \"Error: no test specified\" && exit 1"
},
it kept throwing this error,
and i understand why the error occurs, " cd ../" in the heroku-prebuild script refers to the client, which doesnt exist in the heroku repo i am deploying. pls what other approach can you recommend for me.
Related
I have a Node application, including an express server, set to respond to various backend requests and then to try to serve static content from a React app's build folder. It works great locally. The two different package.json files in the server and client respectively build the React app, copy its build files into the server's ./dist folder, then builds the server app and does the same, then runs the server. Everything is perfect.
However, on Heroku, the React build folder is never copied into the server's dist folder, and I get 404 errors trying to load the app. I know this worked at some point but I'm not sure what I changed that broke it and nothing is making sense to me to get it working again.
"scripts" section of the client (react) package.json:
"scripts": {
"start": "react-scripts start",
"react-build": "react-scripts build",
"build": "npm run clean && npm run react-build && npm run copy && cd server && npm run client-build",
"clean": "rimraf server/dist/",
"copy": "copyfiles build/**/* server/dist -E",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prod": "cd server && npm run start"
},
and the "scripts" section of the server's package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon -i dist -i creds index.ts",
"clean": "rimraf dist/",
"copy-files": "copyfiles views/**/* assets/**/* creds/**/* dist/",
"copy-web": "copyfiles -u 1 ../build/**/* dist/ -E",
"build": "cd .. && npm run react-build && cd server && npm run clean && tsc && npm run copy-files && npm run copy-web",
"client-build": "npm i && tsc && npm run copy-files",
"start": "node dist/index.js"
},
Heroku, of course, runs npm run build from the root folder to kick off the build process, which is the client's package.json, so it runs:
npm run clean && npm run react-build && npm run copy && cd server && npm run client-build
Specifically the npm run copy doesn't seem to be doing anything. When I hit the ls through the heroku-cli, the folder is not there. I'm not getting any errors in the build.
I have been able to put a cludgey piece of code into the main server so that it checks to see if the build folder exists where it's supposed to exist before setting up the static middleware, and to go up the file tree to where they're supposed to be copied from if it doesn't, so it's working, but I don't think I should have to do this and I can't just point to the initial React build location or I'd be serving stale build's while I'm in dev locally instead of a specific dev page that links to the webpack npm run start instance that updates as I hack at it.
I understand that between the workaround in prod and just not relying on the server's static files in dev is "good enough" for me to move on, but my OCD won't let me until I understand why copyfiles works fine copying the server's extra files into dist but can't manage to copy the React app to the place it's supposed to go.
This seems like a pretty basic thing, and long run my plan here is to serve multiple independent React applications as "widgets" from different paths on the server and if I can't get the root path to behave because I'm an idiot then idk what kinds of problems I'm going to run into down the line.
TIA, lmk if any additional info is needed.
CORRECTION: I had been building an outdated version without the -E flag on the copyfiles call. Once I updated that, I did in fact get an error that no files were copied. To reiterate though, the files ARE in the build folder where they were supposed to be copied from, just not in the dist/build folder where they're supposed to go, as confirmed now by copyfiles deciding it had nothing to copy.
Is this an async issue? I thought the && suggested that the left side (the build) had to finish before the right side (the copy) would execute?
i am deploying my django+react app on heroku but its raising this error every time
Push rejected, failed to compile Node.js app
i have tried every thing remove cache delete package-lock.json update the node version according to .env file and other packages , app working fine in local but not deploying on server.i have this error so far at every time please help me to resolve i have also follow the heroku documentation to resolve this issue but not worked for me.
i have resolved my issue by little bit changing into my package.json file
before:
scripts": {
"start": "cd frontenduser && npm install && webpack-dev-server --env.NODE_ENV development",
"build": "cd frontenduser && npm install && webpack --env.NODE_ENV production",
"test": "jest --watch" },
after:
scripts": {
"start": "cd frontenduser && npm install ",
"build": "cd frontenduser && npm install",
"test": "jest --watch" },
I'm trying to deploy an app that makes use of the MRE SDK to Heroku. As of this writing, the SDK itself is broken, and attempting to run an npm run build will result in an error.
A work around is to copy a modified animation.d.ts file over to the resulting node_modules folder, after the install (specifically ./node_modules/#microsoft/mixed-reality-extension-sdk/built/animation/).
I keep this file in a folder called v0.16_mre_fix.
Without this, the build will fail. So I added this to my package.json file.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "tsc --build --clean",
"heroku-postbuild": "cp -i ./v0.16_mre_fix/*.ts ./node_modules/#microsoft/mixed-reality-extension-sdk/built/animation/",
"build": "tslint -p ./tsconfig.json src/**/*.ts && tsc --build",
"lint": "tslint -p ./tsconfig.json src/**/*.ts",
"start": "node .",
"debug": "node --nolazy --inspect-brk=9229 ."
},
According to heroku here, heroku-postbuild will be run after installing dependencies. This, however, did not work.
So I tried changing it to heroku-prebuild and postinstall:. They didn't work either.
Am I missing something?
EDIT: I also tried
"heroku-prebuild": "echo This runs before Heroku installs your dependencies.",
but I didn't see any echo in the ensuing git push.
So I have a series of scripts that are set up to either dev servers for a React/Node Express application OR a production server on heroku. The structure of the app is as follows:
client/package.json //pckg for react app
package.json //pckg for the node server
these are the scripts in the clients package:
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.js",
"start:dev": "set NODE_ENV=development&& concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"seed": "node scripts/seedDB.js",
"install": "cd client && npm install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
}
and the only difference between the react apps package.json and the one that is automatically generated with create-react-app is as follows:
"proxy": "http://localhost:3001/",
the way its supposed to run is, install scripts at root folder, run install script to cd into client and install react apps dependencies, then heroku's post-build script should kick in to run the build script which cds into client and builds a production ready react app. finally the start script should see a NODE_ENV of production and run start:prod.
my problem is that for some reason when i push to heroku, it seems to get stuck on an infinite loop on the install script. I have NO clue why, as the exact same scripts work on other projects PERFECTLY.
https://github.com/LordKriegan/reactdbdemo
https://github.com/LordKriegan/reactdbdemo2/ if anyone wants to look at it. (doing a full stack demo for my students :/ not much of a demo if i cant get it deployed)
I got it working. Forgot create-react-app also initializes a git repo...? either that or somewhere along the way i did an extra git init. anyways i had a .git folder in my client folder, which was preventing my client folder from being pushed up. i ended up creating a new repo and pushing everything to that one and now it works. so incase anyone comes here with a similar problem... make sure you didnt end up in some kind of gitception trap. :/
In my repo on my machine I have a file called .env. This contains environment variables for testing as I'm working on the project.
But, when I push to Github I do not want this file included. So I added it to .gitignore. I have another file called .env.sample that contains empty variables for the user to set.
When the application is installed using npm install I have a script that moves this from .env.sample to .env.
This causes an issue for me because when I'm testing and I run the install it overwrites my original .env. Which is normal behaviour, but I can't help but think there's a better way to do this to stop that from happening.
It's a pain because just before I push I have to rename .env to .env.sample and clear the development variables.
Any idea on how to do this so I don't have to manually rename the file before I push?
Here is the install script from package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.babel.js",
"start": "npm run build && electron .",
"postinstall": "bash postinstall.sh && mv .env.sample .env",
"add-cors": "add-cors-to-couchdb"
},
The postinstall.sh runs every time install runs to build some software. I could have just put the mv inside that, which is what I will probably do.
The simplest solution would be to not overwrite the file:
"postinstall": "bash postinstall.sh && cp -n .env.sample .env",
(note that I propose to use cp instead of mv so that you don't remove the default file)
Another (frequent) one would be to simply ask the user to do it. It's a light task compared to all the configuration he has to do anyway.