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%/*",
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 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
I have a react app. In my package.json:
"build": "react-scripts build",
After running this build script:
npm run build
Everything is built into the build folder and any files from the public folder get copied to the root of the build folder as they are (not minified into chunks). So any static files I want copied over and not changed I can put into the public folder.
I want to copy a file over as if it were in the public folder, but from a different folder such as /src/files/config.js
What's the best way to do that? Is it something like adding a webpack.config.js to the root of my app and having a custom configuration for sending over a file like this? Or maybe just a quick modification to the npm script in package.json somehow? Or am I missing something...
Thanks
Without ejecting or getting overly complex, set your scripts to something:
"build": "react-scripts build && cp /src/files/config.js build"
Might be worth pointing out to make sure that cp works in the environments you are supporting.
Windows:
"react-scripts build && copy src\\files\\config.js build"
In windows when I tried to build react app I am getting error saying 'GENERATE_SOURCEMAP' is not recognized as an internal or external command.
I have added below line in my package.json file
"build": "GENERATE_SOURCEMAP=false react-scripts build"
Keep this in package.json:
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"winBuild": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
Use npm run build for creating build on Linux.
Use npm run winBuild for creating build on Windows.
Another solution is to create a new file in your project's root directory named .env and include the following inside the file. This will remove any .map files from your build/static/js folder the next time you run build.
GENERATE_SOURCEMAP=false
Use cross-env to safely set environment variables across multiple operating systems:
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build"
Also you can try the below setting in your scripts if you are running on windows
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
For windows
use "set" and
use "&&" in between,
like
"build": "set GENERATE_SOURCEMAP=false && react-scripts build"
,this command also can be used to remove .map files after generated
"build": "react-scripts build && del build/static/js/*.map"
maybe something like this would help you, create new app:
npx create-react-app app
cd app
and then run:
GENERATE_SOURCEMAP=false yarn build
For Cross Platform: Just open .env and add GENERATE_SOURCEMAP=false
Linux: GENERATE_SOURCEMAP=false
Windows:
set \"GENERATE_SOURCEMAP=false\"
create a file name .env
add this code to the file : GENERATE_SOURCEMAP=false
On Heroku, go to Settings -> Config vars -> add GENERATE_SOURCEMAP with value false
On Vercel, go to Settings -> Environment Variables -> add GENERATE_SOURCEMAP as key and False as value, set environment Production -> Save
If you are using Heroku, you have to add this in the Config Vars inside the settings of your App. This is the way is supposed to be set from the documentation documentation
In a nodejs express.js application, and trying to build the app using babel for cross browser compatibility.
package.json scripts:
"scripts": {
"start": "node dist/app.js",
"build": "babel src -d dist"
}
On running npm build and check my build folder everything builds correctly except my non-js files like [.html,.css,.ejs]. At the moment just copied those file to the build folder in their respective sub directories and everything works fine.
I have even tried
"build": "babel src -d dist --ignore *.css,*.ejs,*.png,*.jpg"
Is there a way to do this in a better way instead of copying the non-js files. Thanks in advance any help will be highly appreciated.
If you have non-JavaScript files in the source directory that should be automatically copied to the output location when the command is run, simply add the --copy-files flag.
babel src -d dist --copy-files
The flag doesn't take any arguments and will copy all non-JS files over.