I was updating the scripts in package.json which uses the "./node_modules" to use NPX commands and came across ng build with "max-old-space-size" argument. I have converted the command as following from
node --max-old-space-size=10240 ./node_modules/#angular/cli/bin/ng build --prod
to
npx --max-old-space-size=10240 ng build --prod
I have two questions:
The npx command runs without errors, but couldn't verify if it's using the max-old-space-size argument. So, am I doing it right?
Is there any better way to reduce the repeated "./node_modules" in scripts?
Related
I have a React project which is used to bundle a React app as a shared component. I copied the general implementation for it from an example that I found online. Package.json has the following "build" script configuration:
"build": "rm -rf dist && NODE_ENV=production babel src/ --out-dir dist --copy-files"
The Jenkins build server encounters the following error when attempting to run the build for this project:
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
I found the following solution on SO with 39 upvotes:
npm install -g win-node-env
I was planning on asking the server admin to run that ^^^ install command on the build server in order to prevent the build process from erroring out but I was wondering what the purpose of that piece of the build script is and what the downside would be of simply excluding it ("NODE_ENV=production")?
I'm doing the fullstackopen course. There's a part where you create the production build files of a React application and copy them to the backend directory so that they can be served as static files. To optimize the task, they suggest adding this npm script to the backend directory:
"build:ui": "rm -rf build && cd ../../osa2/materiaali/notes-new && npm run build --prod && cp -r build ../../../osa3/notes-backend/",
If I understand correctly, this removes the build folder from the backend, then changes directory to the frontend where it creates a new production build and then copies the folder to the backend. But what is the --prod flag doing? I made a small test, running npm run buildand npm run build --prod and the output seems to be the same.
Seems like that the --prod flag is ignored during builds. You need to call the build command as npm run build -- --prod. The extra “--“ makes sure the --prod flag is passed.
When I try to build an angular7 project inside docker it takes around 40 minutes. The line that takes 40 minutes is
ng build --prod
92% chunk asset optimization TerserPlugin
I've ran ng build --prod outside docker on the same laptop it takes 2 minutes.
I've tried adding --build-optimizer false
and --sourceMap=false
Does not make any difference
Here is my Dockerfile
FROM node:carbon
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
RUN npm install -g #angular/cli#6.1.0
COPY . .
RUN ng build --prod
EXPOSE 4200
CMD [ "npm", "start" ]
HEALTHCHECK --interval=5s --timeout=30s --retries=20 CMD curl --fail http://localhost:4200 || exit 1
This issue with extremely slow builds is almost always related to the build process lacking memory.
Node will not allocate a lot of memory for a single process (512mb on 32bit systems and 1gb on 64bit systems), but running ng build with production settings uses a lot of memory.
You can use the Node paramteter max_old_space_size to set how much RAM you allow the process to use, but you have to pass the parameter directly to node so replace
ng build --prod
with
node --max_old_space_size=8192 ./node_modules/#angular/cli/bin/ng build --prod
it will allocate up to 8GB of RAM for the process, which will make it run much faster.
You can also add this to your scripts in package.json:
"scripts": {
....
"build:prod": "node --max_old_space_size=4096 ./node_modules/#angular/cli/bin/ng build --prod"
}
(If increasing the memory limit doesn't work, try running ng build --prod --verbose to see exact timings for different phases of the compilation)
As Daniel mention in answer you can use node parameter --max_old_space_size but I prefer to set it up via environment var:
NODE_OPTIONS=--max-old-space-size=4096
I have a problem with my Angular project. Especially on the build of the project.
When I build my Angular poject with
ng build
it creates the dist-folder with the correct build. When I use the following command:
ng build --prod
it creates the production build (correct)
When I use NPM (used by build server) I use this:
run build
But I want the production build. Whatever I do, it doesn't work locally or on the buildserver. I used these:
npm run build --prod
npm run build --target=production
npm run build --environment=prod
npm run build --environment=production
npm run build --env=production
npm run build --env=prod
npm run build *projectname* --environment=production
npm run build *projectname* --env=production
npm run build *projectname* production
And probably a lot more. It just does not build the production!
I have a environment.prod.ts (production = true). It is set in the Angular.json. I have no clue what I am doing wrong.
You could also use -- to separate the params passed to npm command itself and params passed to your script.
So the correct syntax for your case would be:
npm run build -- --prod
npm run build should have the script in the package.json
have a look there and maybe add the line in the scripts
{
...
scripts: {
"build": "ng build --prod"
},
...
}
this should do the trick
What you can do is update the build script in the package.json as
scripts:{
"build": "npm run ng build --",
"ng": "ng"
}
-- allows you to pass arguments to a script.
Then you can pass the arguments to ng build like ng build --prod
Try this if your environment is production:
npm run build -- --configuration=production
or this if it's prod:
npm run build -- --configuration=prod
If you don't specify the "configuration" parameter name you may see this error:
npm run build -- --prod
Error: Unknown argument: prod
npm run build -- --production
Error: Unknown argument: production
I'm using webpack.
Also I don't commit npm_modules folder and public folder, where all generated files are. And I can't figure out how to build my app (I have webpack build command) after deploy and setup my server (it's already looking for public folder).
It seems me a bad idea to commit before upload. Maybe there are some gentle decisions... Any thoughts?
Forked from: How to deploy node that uses Gulp to heroku
"heroku-postbuild": "webpack -p --config ./webpack.prod.config.js --progress"
this is better because if you use postinstall, everytime you do npm i the build script get fired
Do it in a postinstall script as suggested by #orlando:
"postinstall": "webpack -p --config ./webpack.prod.config.js --progress"
In this approach make sure to heroku config:set NODE_ENV=production heroku config:set NPM_CONFIG_PRODUCTION=true
OR
You can find this custom buildpack heroku-buildpack-webpack usable.
These links might help you build understanding:
heroku hook-things-up
npm scripts
In 2019, the simplest way to do this is to use the heroku/nodejs buildpack (automatically selected if you have a package.json at the root of the repository) and add a build script to package json:
"build": "webpack --mode production --config ./webpack.prod.config.js"
Heroku will automatically run this script on deploy. Bonus points because this is the intuitive script to run to test the build locally or in CI.
This is described in Heroku's Best Practices for Node.js Development document:
npm’s lifecycle scripts make great hooks for automation. Heroku provides custom hooks that allow you to run custom commands before or after we install your dependencies. If you need to run something before building your app, you can use the heroku-prebuild script. Need to build assets with grunt, gulp, browserify, or webpack? Do it in a build script.