Angular-cli build (ng build) on Teamcity - javascript

I hope someone has already done this.
I am trying to set up a continuous build in teamcity for one my angular 2 project.
After done some research and I have followed the steps as follows:
Build Step1: installed the jonnyzzz.node plugin for the teamcity. (Now I can pick Node.js NPM from Runner type)
npm commands: I added install command
Build Step 2: Another Node.js NPM and npm commands: install -g angular-cli
So far so good
Now I wanted to build ng build as the third step and I am really stuck as I have no way to do this.
Any help would be appreciated.
Thank you.

Rather than changing your package.json you can use the node.js NPM plugin and the run command:
run build
build it not a default command for NPM so you need the 'run build' which is mapped to ng build in default ng-cli package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
See image

In order to get ng build work from nodejs plugin for Team city, I have modified the package.json file.
In start replace the value with "ng build".
And from team city, npm build command will trigger the ng build command.

First start with the build agents where you can edit the buildAgent.properties file and define 3 environment variables. You should have the surrounding single quotes here or later on in your build definitions:
env.exec.node='C\:\\Program Files\\nodejs\\node.exe'
env.exec.npm='C\:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js'
env.exec.ng='%env.APPDATA%\\npm\\node_modules\\#angular\\cli\\bin\\ng'
The %env.APPDATA% is used here but some setups may be installed on the Program Files, in most cases the AppData will be the one to take.
Next you can define build steps for your project. Create these new build steps of type Powershell and set Script as Source Code. Inside the Script Source you can now enter:
Install Angular CLI
& %env.exec.node% %env.exec.npm% install -g #angular/cli
Install node_modules folder
& %env.exec.node% %env.exec.npm% install
Build and publish solution
& %env.exec.node% %env.exec.ng% build --environment '%env.build.environment%' --scripts-prepend-node-path
After this step production builds will create your dist folder which you can include into your Artifacts paths so you have access to it should you want to create seperate Deployment type build configurations
Some considerations to take into account here:
You could define the variables inside your however
different paths may be used on the build agents, which would brake
your builds
Make sure you have proper Clean-Up Rules in place, since node_modules
folders can get big really fast
Hope it helps out someone!

Related

How do i minify amplify application?

I'm using react/amplify stack. After publishing app, i realized that all code there is not minified, i'm able to open any component and see it's unminified source code. As i understood, amplify builds app based on it's amplify.yml file. I didn't change there anything and it looks like this:
version: 0.1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I can see a command there - 'npm run build' which i suppose should build app and then publish it as minified version. So why it hasn't happened?
npm run build is going to do whatever is configured in the scripts section of your package.json. Likely you'd want to configure environmental variables to indicate what type of build to do. Here is how the create-react-app project has chosen to do it:
...
"scripts": {
"build": "REACT_APP_ENV=development react-scripts build",
"build:development": "REACT_APP_ENV=development react-scripts build",
"build:production": "REACT_APP_ENV=production react-scripts build",
...
},
...
Using this pattern, you can either manually specify what type of build you want, or set the environment variable and just run npm run build.
Environmental variables in Amplify are configured under App Settings > Environmental Variables.

Nodejs: How to prepare code for production environment

I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.

NPM build package after install

I made a package with react and typescript. Because of how typescript handles the publishing of the classes and interfaces, I need to build the package and commit the built files with every change.
Is there a way to tell npm, that it has to build the specific package after "npm install" or "yarn install"?
I tried adding "postinstall": "npm run build" and "prepare": "npm run build" but it seems, that the project, in which the package is installed, runs this commands in his own root directory, so it builds itself, instead of just the package.
I thought of something like this:
Coding in a project
yarn add packageX
yarn install
packageX runs npm run build in its own directory
make changes in packageX
run yarn update packageX
packageX runs npm run build in its own directory
run yarn build in project root
Project builds itself
Is there a way to accomplish that?
Thanks for your answers.

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......
After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.
You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Custom startup command for Node.js app on Azure with Babel 6

I'm having the same issue as this question which wasn't really resolved as the original questioner abandoned this route. I'm trying to run a node app on Azure using Babel6. The package.json file I'm using has the following in it:
"scripts": {
"start": "node ./node_modules/babel-cli/bin/babel-node.js server.js"
}
I've checked using the Azure console and the babel-cli node module is installed and the server.js file is in wwwroot. Despite this I get the following when I commit to Azure:
remote: Start script "./node_modules/babel-cli/bin/babel-node.js
server.js" from package.json is not found.
The npm version running on Azure is 3.10.3, node version is 6.6.0. Can anyone advise on how to get this up and running. Any help much appreciated!
It seems that to run node.js applications in ES2015 on Web Apps. We need to compile them to ES5 version, you can leverage Custom Deployment Script to achieve this.
Here is example repos on GitHub, which leverages gulp and custom deployment script to compile the node.js from ES6 to ES5 via the Azure deployment task.
Specially, this example defines several scripts in package.json for the deployment task calling:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp nodemon",
"build": "gulp build"
},
And manually call the npm scripts in deploy.cmd before KuduSync task move the deployment folder to production folder.
:Deployment
echo Handling node.js deployment.
:: 0. Select node version for build
call :SelectNodeVersion
:: 1. Install build dependencies
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! install --production
IF !ERRORLEVEL! NEQ 0 goto error
popd
:: 2. Run build command
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! run-script build
IF !ERRORLEVEL! NEQ 0 goto error
popd

Categories