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")?
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'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.
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 node.js+express application. To deploy it to my server the partner is asking me to "build" the app into a folder called "dist" where all the files that need to be deployed to the server will exist. How can I implement such kind of a build.
Any hint or guidance would be appreciated.
You could create a script which does this in your package.json. You simply need to create the directory and copy everything required for running your application in production to it and no more.
//package.json
{
//...
"scripts": {
"dist": "mkdir -p dist && cp -R node_modules src server.js ... dist"
}
//...
}
Not the above is not cross-platform compatible. This is always the complex part of such build scripts. If this is an issue for you, I'd recommend looking at using available tooling such as gulp.
You can also use a NPM lifecycle hook to do this automatically as part of your install. Ensure you also run npm install --production rather than npm install to omit your dev dependencies.
I'am searching for a good way for building a multi project application.
At the moment I have this structure:
Every app is a nodejs application
- parent folder (git root)
|- app1
|-- app1-backend
|-- app1-frontend
|- app2
|- app3
at the moment i need to install every app by hand with the following steps:
install npm modules with npm install
install typings with typings install
compile app with tsc
every app folder contains the following: (app1-backend, app1-frontend, app2, app3)
tsconfig.json, package.json, typings.json
should i automate that with grunt?
Should I use a own grunt file for each project?
greets
Since it's already 3 self contained commands, you can probably get by with just adding a script in the package.json of each project that handles all it's building commands, ie:
{
"name": "project-name",
...
"scripts": {
"build": "npm install && typings install && tsc"
}
}
Which will allow you to just run npm run build to run all 3 commands for any given project.
Then you can just run
(cd /path/to/project1 && npm run build) & (cd /path/to/project2 && npm run build) & (cd /path/to/project3 && npm run build)
Which will build all 3 simultaneously.
Note: I'm assuming npm will handle multiple processes, but you may have to run sequentially
It is possible to use grunt to run whatever shell commands such as using grunt-shell; however for me personally, it doesn't make sense to have a build process in one project that will cause another project to build.