Can't npm install on a TFS2017 pipeline - tfs

I would like to create a build pipeline of my Angular application.
In this one I want to do 5 jobs:
1- import the sources
2- install npm
3- build the application with npm build
4- Create an archive
5- And publish it in a folder.
but the task hangs at the npm install.
Can you explain the error?
This is the debug.log

Related

How to Generate Gradlew on to Jenkins?

How to generate gradlew file to Jenkins Android Project? My project is not Android Native. My project is Flutter.
I try to create CD with Jenkins and I got some errors.
this is my pipeline code (JenkinsFile)
stage('Build Release APK') {
sh "ls ./android"
sh "./android/gradlew clean assembleRelease"
}
ls output is,(There is not gradlew file)
ls ./android
app
build.gradle
gradle
gradle.properties
key.properties
settings.gradle
This is an error I got
./android/gradlew clean assembleRelease
/Users/donperera/.jenkins/workspace/demo#tmp/durable-b0592b49/script.sh: line 1: ./android/gradlew: No such file or directory
Is there any way to build apk/aap with Jenkins?
Is it possible to use this plugin? but I already added this one. But not in this my script. https://guides.gradle.org/executing-gradle-builds-on-jenkins/
gradlew or gradlew.bat is an executable of Gradle that can be used to execute gradle commands.
gradlew or gradlew.bat uses gradle/wrapper/gradle-wrapper.jar file for execution.
So there are 3 files in play:
gradlew for mac and linux
gradlew.bat for windows
gradle/wrapper/gradle-wrapper.jar
The thing here is, these files already exists when you create your flutter project. But these files are ignored by .gitignore of the project by default. so these files won't be available in your CI/CD server.
METHOD 1 [RECOMMENDED]
You don't need them to build your project when it is a flutter project. You need flutter SDK to be installed. You can use flutter SDK to build your project. Use following command for release build [you might need to set flutter SDK for your Jenkins server]:
flutter build apk --release
It will run assembleRelease internally and will generate your APK file.
METHOD 2 [NOT RECOMMENDED]
If you want to do it your way then you can add those 3 files to version control by removing their references from .gitignore file and push it to your repository. Then you'll have those file in your Jenkins workspace. You'll have to grant execution permissions to gradlew if you are on mac or linux which can be done by following command.
chmod +x ./gradlew
then you can use following command to build your app:
./gradlew clean assembleRelease
NOTICE: Method 2 is not recommended because when you run flutter commands, it sets some properties to gradle from pubspec.yaml file like version name, version code. So if you made changes to pubspec.yaml file and haven't run flutter command after that, then running gradlew directly won't include those changes. In this case, your apk might built with older version or might not even built as it reads version info from local.properties file which is auto-modified by flutter commands and it is excluded by default from version control. So, you'll also have to add local.properties file by removing its reference from .gitignore file which is very very dirty because it has location reference of android SDK and your server might not have android SDK on that location. Again you need to tackle that. so don't use this method.
You should not do that "on Jenkins". You should do that in your codebase. Execute the wrapper command (gradle wrapper), add wrapper files to Git, commit and push.

Correct deployment script for Azure Git backed continuous Deployment

I have a ASP.Net 4.5 MVC application which uses Angular 1.5. The JS code is Typescript and a post build action builds the js code and deploys it to the folder where my application refers to.
I have a Slot on my azure web app which is backed my gitlab repo. Committing to the repo, triggers the deployment, however the post deployment build frequently seems to have issues when a bower/npm or typings library is updated (which is resolved by manually clearing the folder via the kudu console). Does someone have an example of a deploy.cmd script which does the equivalent of
npm install
typings install
at the correct point in the pipeline so that the files get deployed correctly.
I want to start scratch with a new slot, and to get the existing slot to work in the past i had to manually install typings for example "npm install typings --global" in order to get the build to work without a typings error.
Update Output Below
I'm guessing that the errors below are due to azure running typescript 1.6 compiler over reference files which need typescript > 1.6.
My csproj has <TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>
(ive removed my files from the compile output, but the _all.d.ts file does reference the errored files below
CompileTypeScript:
D:\Program Files (x86)\Microsoft SDKs\TypeScript\1.6\tsc.exe --sourcemap --target ES5 --noEmitOnError "REMOVED MY TYPESCRIPTFILES" "D:\home\site\repository\mymvcproject\app\src\_all.d.ts"
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,32): error TS1110: Build: Type expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,50): error TS1005: Build: ']' expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,58): error TS1005: Build: ',' expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,59): error TS1136: Build: Property assignment expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1941,1): error TS1128: Build: Declaration or statement expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
Done Building Project "D:\home\site\repository\mymvcproject\mymvcproject.csproj" (Build;pipelinePreDeployCopyAllFilesToOneFolder target(s)) -- FAILED.
FINAL UPDATE
After the typescript team finally generated a version of typescript 2.* which could be installed on Azure, and then the Kudu team deployed it. Now the whole process works! the note from below about using
"preinstall": "npm install typescript -g && npm install typings -g"
Was the other part of the solution!
According to your requirement, you could follow the steps below to achieve your purpose.
Create a deployment script
You could log in to KUDU tool (https://.scm.azurewebsites.net/), click "Tool" > "Download deployment script". Also, you could leverage azure-cli to generate the script. For more details about how to generate deployment script via azure-cli, you could refer to this tutorial.
Customize the deployment script
For using NPM to manage your packages, you could add the following scripts in your package.json file.
"scripts":{
"preinstall": "npm install typescript -g && npm install typings -g"
}
Then, you need to add the following scripts to the deploy.cmd file.
IF EXIST "%DEPLOYMENT_SOURCE%\package.json" (
pushd "%DEPLOYMENT_SOURCE%"
echo installing npm package
call :ExecuteCmd npm install --production
IF !ERRORLEVEL! NEQ 0 goto error
popd
)
Or you could add the following scripts to install typescript and typings directly via command line.
echo Installing typescript and typings
call npm install typescript -g && npm install typings -g
IF !ERRORLEVEL! NEQ 0 goto error
Note: The .deployment, deploy.cmd files need to be placed in the root directory of your solution. You could refer to this sample project for details.

TFS Build process hangs on any NPM command

I'm building an angular2 app, and I've developed a build profile in TFS to auto-build it.
There are four npm commands:
npm install angular-cli -g
npm install
npm run typings (executes typings install)
npm run build (executes ng build)
And then a Copy Publish Artifact step.
However, even when every step passes, it says Finishing Copy and Publish Build Artifacts, the project has been built, and the files have been moved, the actual build never finishes. I've tried breaking those npm commands into a powershell script, having them as NPM commands within TFS, and running them as CMD commands, but the same thing happens every time. Also, if I just remote into the build server and run the commands by hand, it works just fine.
Any ideas?
We've gone through the same headache recently, and I'd strongly suggest you not rely on TFS Build to restore npm packages. Even when you get that right, it takes long and doesn't deploy the node_modules you need to IIS.
Instead, use WebPack to bundle up your node_modules into a bundle.js.
Reference this in your projects/scripts folder and check it into source control.
Remove any npm install steps in your build process (it won't be required anymore since you're referencing the bundle.js now).
This will increase your quality (no future package version surprises), and speed up your deployment (no need to download npm packages on each build anymore).
It's fairly quick to get Webpack installed and you'll save yourself headaches :)

How to use modified node module using github branch?

I'm using the rc-slider component in my application and had to
add one feature to meet my needs.
I forked the main repository and pushed my changes to this branch.
In the application, I changed the package.json as below and ran the npm install again:
"rc-slider": "Rodrigora/slider#add-label"
Nothing changed. Seems that npm doesn't update the dependencies.
So, I removed the node_modules and rails cache folder and ran the install command again:
rm -rf node_modules/
rake tmp:cache:clear
npm install
Now, I have this error:
events.js:142
throw er; // Unhandled 'error' event
^
Error: Cannot find module 'rc-slider' from '/Users/rodrigora/project/app/assets/javascripts'
NPM can't find the rc-slider when I using the modified branch.
NPM does not update the dependencies only changing the package.json file?
Should I run some build command to install my branch code?
In npm docs:
"dependencies": {
"rc-slider": "git://github.com/Rodrigora/slider.git#add-label"
}
Also you can use
npm install git://github.com/Rodrigora/slider.git#add-label --save
The above command will add that dependency in your package.json.
Edit:
I miss understood your question. I tried the below fix in the repo that you mentioned and it worked. (you should also have the dependency setup like above)
It is a react project. It is compiled and published to NPM.
So, if you want to install it directly from your github fork, you should make some changes to package.json
Before making changes in package.json install rc-tools globaly:
sudo npm install rc-tools -g
Change the files that should be included:
"files": [
"index.js",
"assets",
"src"
]
and add postinstall script in scripts:
"postinstall": "rc-tools run compile"
Then try installing from github after making these changes in that branch.
You can use git repositories as NPM packages:
"rc-slider": "git://github.com/Rodrigora/slider#add-label"

Managing bower dependencies with ionic

After starting with a new ionic app, I can see at bower.json that comes with ionic is in devdependencies. Why is it a devdependency and not a normal dependency?
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.0.0-rc.0"
},
Thanks, I feel confused right now
having devDependencies gives you the opportunity to simplify the steps that drive you from the source files (a git clone of the project) to the production ready app
when you don't need to make changes and (develop) the application, you could just run
bower install --production
or
npm install --production
they work the same
bower install options
-F, --force-latest: Force latest version on conflict
-p, --production: Do not install project devDependencies
-S, --save: Save installed packages into the project’s bower.json dependencies
-D, --save-dev: Save installed packages into the project’s bower.json devDependencies
-E, --save-exact: Configure installed packages with an exact version rather than semver
bower documentation
npm install options
By default, npm install will install all modules listed as
dependencies. With the --production flag (or when the NODE_ENV
environment variable is set to production), npm will not install
modules listed in devDependencies.
npm documentation
This way you take less time to ship the app and don't waste bandwidth downloading stuff you won't need.
Given that, to me, the choice of listing ionic as devDependecy is a poor one: it implies that I could take advantage of this choice to get ready the app for execution this way:
git clone my-project
git cd my-project
npm install --production # ionic not installed here
ionic state restore
ionic build ios
Now, if you ignore the content of /lib folder in your sources, this should not work, and if it works because the ionic-cli does some more checks to save your ass, I think this is unclear.
From what I understand, dependencies are required to run, and devDependencies are only for development, like minification, unit tests, etc.
Both will install when you do npm install but only dependencies will install when you do npm install $package, unless you add the --dev option

Resources