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.
Related
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?
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")?
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 created new Angular2 app by angular-cli and run it in Docker.
At first I init app on my local machine:
ng new project && cd project && "put my Dockerfile there" && docker build -t my-ui && docker run.
My Dockerfile
FROM node
RUN npm install -g angular-cli#v1.0.0-beta.24 && npm cache clean && rm -rf ~/.npm
RUN mkdir -p /opt/client-ui/src
WORKDIR /opt/client-ui
COPY package.json /opt/client-ui/
COPY angular-cli.json /opt/client-ui/
COPY tslint.json /opt/client-ui/
ADD src/ /opt/client-ui/src
RUN npm install
RUN ng build --prod --aot
EXPOSE 4200
ENV PATH="$PATH:/usr/local/bin/"
CMD ["npm", "start"]
Everything is OK, problem is size of image: 939MB!!! I tried to use FROM: ubuntu:16.04 and install NodeJs on it (it works), but still my image has ~450 MB. I know that node:alpine exists, but I am not able to install angular-cli in it.
How can I shrink image size? Is it necessary to run "npm install" and "ng build" in Dockerfile? I would expect to build app on localhost and copy it to image. I tried to copy dist dir and and package.json etc files, but it does not work (app start fail). Thanks.
You can certainly use my alpine-ng image if you like.
You can also check out the dockerfile, if you want to try and modify it in some way.
I regret to inform you that even based on alpine, it is still 610MB. An improvement to be sure, but there is no getting around the fact that the angular compiler is grossly huge.
For production, you do not need to distribute an image with Node.js, NPM dependencies, etc. You simply need an image that can be used to start a data volume container that provides the compiled sources, release source maps and other assets, effectively no more than what you would redistributed with a package via NPM, that you can attach to your webserver.
So, for your CI host, you can pick one of the node:alpine distributions and copy the sources and install the dependencies therein, then you can re-use the image for running containers that test the builds until you finally run a container that performs a production compilation, which you can name.
docker run --name=compile-${RELEASE} ci-${RELEASE} npm run production
After you have finished compiling the sources within a container, run a container that has the volumes from the compilation container attached and copy the sources to a volume on the container and push that to your Docker upstream:
docker run --name=release-${RELEASE} --volumes-from=compile-${RELEASE} -v /srv/public busybox cp -R /myapp/dist /srv/public
docker commit release-${RELEASE} release-${RELEASE} myapp:${RELEASE}
Try FROM mhart/alpine-node:base-6 maybe it will work.