I have an angular project. when we run ng build command the build artifacts are created in dist folder as we have set "outDir": "dist", in angular-cli.json. After this I have to manually copy these files from dist to Webcontent folder of java to generate a WAR file.
Is there any way to automate the process coping the artifacts. If I set the path of WebContent as outDir value "outDir": "../server/WebContent", the build command is cleaning up the existing java files before generating build artifacts.
Any suggestions will help..
Consider the following solution:
Add a npm script named build in your projects package.json file to execute your ng build command.
Also add a post hook npm script named postbuild to copy your files.
The following describes how to achieve this on a *Nix platform, and also provides a cross-platform solution.
*Nix (Linux, macOS, ... )
On *nix platforms npm utilizes sh as the default shell for running npm scripts. Therefore add the following to the scripts section of your projects package.json:
package,json
"scripts": {
"build": "ng build",
"postbuild": "cp -r dist/ ../server/WebContent"
}
This postbuild npm script utilizes the shells cp command to recursively copy artifacts from the dist directory to the ../server/WebContent directory. The postbuild script will automatically run when the build script successfully completes.
Running:
Via your command line run the following command instead of ng build:
npm run build
Cross-platform (Linux, macOS, Windows, ... )
For a cross-platform solution firstly install shx - it’s a wrapper around ShellJS Unix commands:
cd to your project directory.
Then run the following command:
npm install -D shx
Define the scripts section of your projects package.json as follows:
package.json
"scripts": {
"build": "ng build",
"postbuild": "shx cp -r \"dist/*\" \"../server/WebContent\""
}
Running:
Via your command line run the following command instead of ng build:
npm run build
Related
We're using Storybook platform to build UI components and pages in isolation. According to Storybook documentation, an npm package can be published with npm publish command after it's been built. But first they say that it needs to be built with this command:
{
"scripts": {
"build": "cross-env BABEL_ENV=production babel src -d dist"
}
}
This creates dist folder which looks like this:
My issue is that it doesn't include any .css or .json files that are part of the project. So I have to move them there manually.
Any idea how can I configure the project to include them automatically so I don't have to do it each time I run the build command?
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")?
The package.json of an Angular library defines the following scripts:
"scripts": {
"build": "node ../../node_modules/#angular/cli/bin/ng build dining",
"watch": "node ../../node_modules/#angular/cli/bin/ng build dining --watch",
"postbuild": "node copy-assets.js"
}
The postbuild script is executed successfully when I build the library: npm run build
but NOT when I call the watch script npm run watch:
Built dining
Built Angular Package!
- from: C:\[...]\projects\dining
- to: C:\[...]\dist\dining
Compilation complete. Watching for file changes...
"dining" is a angular library created by running npm run ng generate library dining.
copy-assets.js copies the library's assets folder to the dist folder.
Node.js version is 12 and npm version is 6.9.0.
How can I have the project built and watched for file modifications and the postbuild script executed in one command?
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%/*",