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.
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?
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.
I just installed babel as followed: npm install -g babel-cli
However when I try to enter the babel command in either nodejs cmd (as admin) or my editor pycharm's terminal, nothing happens.. It's like it's loading or something but even waiting for more than 20min. nothing appeares.
Screenshot
This started happening after I added C:\Users\sebas\PycharmProjects\storage\node_modules\.bin as a path to the environment variables
Before that, every time I tried running babel I would get a babel command not recognized as an external or internal command error.
What is going on?
In my opinion, the easiest way to solve this (see: not adding to your path) is to simply add an entry inside your package.json
For example:
...
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib --copy-files",
},
...
This way, all you need to do is run npm run build, and it will take care of figuring out where babel is. Also, remember to add a .babelrc with the following content if you're using babel-preset-env:
{
"presets": ["env"]
}
More than likely because you have not added the .\node_modules\.bin directory to your path.
Until you do that, you can use .\node_modules\.bin\babel
I am trying to setup WebStorm with Flow typing for a Node.js project.
I have it all working fine with NPM scripts but would like to integrate with the IDE.
Here is the scripts portion of my package.json:
"scripts": {
"dev":
"watch --wait=1 'flow-remove-types src/ -d lib/ --all --pretty' ./src/ & nodemon ./lib/server.js",
"start": "npm run flow:build && node ./lib/",
"lint": "eslint src/**",
"test": "npm run flow:build && jest lib",
"coverage": "jest --collectCoverageFrom=src/**.js --coverage src",
"flow": "flow",
"flow:check": "flow check ./src/",
"flow:build": "flow-remove-types ./src/ -d ./lib/ --all --pretty",
"flow:deps": "flow-typed install",
"flow:watch": "flow-watch"
},
Now if I modify the run configuration for a test and:
change the src directory to lib
specify a before launch, run NPM script 'flow:build'
then I can run that configuration.
I still have two problems.
Debugging will not stop on a breakpoint
If I hit the arrow in the source code gutter to run the test, it creates a new config which runs against the flow source and fails
Does anyone have Node.js and flow working well together in WebStorm?
You can use --sourcemaps and -pretty flags:
flow-remove-types --pretty --sourcemaps --out-dir out/ in/
The -m or --sourcemaps flag adds sourcemaps files to your /out folder
The -p or --pretty flag removes the empty spaces in the files of your /out folder
flow-remove-types does not generate sourcemaps, so there is absolutely no way for debugger to map the generated file in lib to original files in src. You have to add breakpoints to the generated files located in lib folder if you like to debug your tests
no way - configuration is generated for the file you hit the arrow in. If you like to run individual tests from gutter, hit the arrow in generated file, not in the source one
You can use Babel flow preset instead of flow-remove-types:
npm install --save-dev babel-cli babel-preset-env babel-preset-flow
create a .babelrc file in your project root dir:
{
"presets": ["flow"]
}
And that's all you have to do - no precompiling, etc., running from gutter/debugging for source files will work out of the box
I need to create a deploy package. That would after ng build --prod will create SOME_APP.zip file any name I will put in deploy.config.json or anywhere.
There is a way to do it without using webpack-plugins?
this kinda works but probably it's not how package.json was supposed to be used:
"scripts": {
"all": "ng test; ng build --prod; zip -r dist/app.zip dist/app;"
},
in other proj I see ppl relying on Jenkins and/or deploy tools to zip it.
Windows + 7-Zip Version:
Zip in dist-Folder without the folders dist/app-name
File is named according to your app-name and version, leading to a local history of version-builds if something's going wrong..
assuming that outputPath in angular.json is not changed..
"scripts": {
"build": "ng build --prod && cd dist && c:\\\"Program Files\"\\7-Zip\\7z.exe a %npm_package_name%_%npm_package_version%.zip ./%npm_package_name%/*",