I'm just starting a new project using NativeScript + Angular and have hosted the code in Visual Studio Team Services. I'm brand new to NativeScript however I want to have a Build Definition setup to build the iOS and Android artifacts for Continuous Integration.
When I build locally, I do the following command: tns build however I'm unclear how I would be able to use this in a Team Services Build Definition. Right now my build definition only consists of
Get Sources
npm install
??? (where I'd like to do tns build here)
It currently fails because it doesn't know what the tns command is and as far as I'm aware, I cannot install these tools on an agent since its a hosted instance.
Appreciate any thoughts or alternative ideas!
Here's the answer, you need to set your global directory and add it to the path.
Feel free to remove the debugging comments.
echo 'This is the current path.'
echo $PWD
echo 'This is the global path.'
npm prefix -g
echo 'Setting the npm prefix path'
npm config set prefix "$PWD/NPM"
echo 'Setting path'
PATH=$PATH:"$PWD/NPM/bin"
npm install nativescript -g
echo "PATH: $PATH"
tns doctor
I was able to get this working. I did this yaml pipeline in Azure Devops.
For ios
- task: UseNode#1
displayName: "Use Node ${{ parameters.nodeVersion }}"
inputs:
version: XX.XX
- task: Npm#1
displayName: 'npm clean'
inputs:
command: custom
verbose: false
customCommand: 'run clean'
- task: Npm#1
displayName: 'npm install nativescript'
inputs:
command: custom
verbose: false
customCommand: 'install nativescript#6 -g'
- task: PythonScript#0
displayName: "Install python package six"
inputs:
scriptSource: 'inline'
script: |
import os
os.system("pip install six")
- task: InstallAppleProvisioningProfile#1
displayName: "Install an Apple provisioning profile"
inputs:
provisioningProfileLocation: 'secureFiles'
provProfileSecureFile: ${{ parameters.iosProvisionProfile }}
- task: InstallAppleCertificate#2
displayName: "Install an Apple certificate"
inputs:
certSecureFile: 'devops-cn.p12'
certPwd: ${{ parameters.certificatePassword }}
keychain: 'temp'
signingIdentity: 'iPhone Distribution: Whatever Company'
- task: PythonScript#0
displayName: "Build"
env:
IOS_PROVISION_PROFILE_NAME: ${{ parameters.iosProvisionProfileName }}
IOS_IPA_FILE_NAME: ${{ parameters.iosIpaFileName }}
inputs:
scriptSource: 'inline'
script: |
import os, shutil
os.system("tns build ios --bundle --provision \"{}\" --for-device --release".format(os.environ.get('IOS_PROVISION_PROFILE_NAME')))
For Android
- task: UseNode#1
displayName: "Use Node XX.XX"
inputs:
version: XX.XX
- task: Npm#1
displayName: "npm install"
inputs:
command: 'custom'
customCommand: 'run clean'
- task: Npm#1
displayName: "npm install nativescript"
inputs:
command: 'custom'
customCommand: 'install nativescript#6 -g'
- task: PythonScript#0
displayName: "Build"
env:
AND_KEY_STORE_PASSWORD: ${{ parameters.androidKeyStorePassword }}
AND_KEY_STORE_ALIAS: ${{ parameters.androidKeyStoreAlias }}
AND_KEY_STORE_ALIAS_PASSWORD: ${{ parameters.androidKeyStoreAliasPassword }}
inputs:
scriptSource: 'inline'
script: |
import os
os.system("tns build android --bundle --release --key-store-path \"$(secureFile.secureFilePath)\" --key-store-password \"{}\" --key-store-alias \"{}\" --key-store-alias-password \"{}\"".format(os.environ.get('AND_KEY_STORE_PASSWORD'), os.environ.get('AND_KEY_STORE_ALIAS'), os.environ.get('AND_KEY_STORE_ALIAS_PASSWORD')))
You need to add install NativeScript Command-Line interface by using NPM task, for example:
NPM task 1.* (Command: custom; Command and arguments: install nativescript –g)
Command Line (call tns command) (Tool: tns; Arguments: --help)
On the other hand, you can setup a private build agent, then running it as your account (change service account)
Note: Based on my test, it works fine with Hosted Linux Preview agent; it throws error with Hosted agent (not supported platform)
Related
I have a question about running a xcode build with azure pipelines on an ionic capacitor app.
The ionic and capacitor stuff is working fine. But with the Xcode build part I have a problem. The modules are not found.
At the bottom you can find my pipe. When I run this I got following error message:
/Users/runner/work/1/s/ProjectName/MobileApp/ProjectName/ios/App/App/AppDelegate.swift:2:8: no such module 'Capacitor'
Anyone that has an idea what could be the issue?
jobs:
- job: Job_1
displayName: Agent job 1
pool:
vmImage: macos-latest
steps:
- checkout: self
- task: NodeTool#0
displayName: Use Node 16.x
inputs:
versionSpec: 16.x
checkLatest: true
- task: CmdLine#2
displayName: Install global ionic and npx
inputs:
script: npm install -g #ionic/cli
- task: CmdLine#2
displayName: Npm install & ionic build in App Folder
inputs:
script: "npm install \nionic build"
workingDirectory: ProjectName/MobileApp/ProjectName
- task: CmdLine#2
displayName: Create iOS App
inputs:
script: "npx cap add ios \nnpx cap sync ios"
workingDirectory: ProjectName/MobileApp/ProjectName
- task: CocoaPods#0
displayName: pod install
inputs:
cwd: ProjectName/MobileApp/ProjectName/ios/App
- task: Xcode#5
displayName: Xcode build
inputs:
signingOption: auto
teamId: XXXXXXXX
cwd: ProjectName/MobileApp/ProjectName/ios/App/App
I ran into this same error and had to specify the Xcode#5 task input
xcWorkspacePath: '$(Build.SourcesDirectory)/ios/App/App.xcworkspace'
scheme: 'App'
I am creating a pipeline on Azure devOps to deploy an angular application. Inside the project dependencies there is a library published on the artifact of another project (under the same organization). How to configure my yaml file so that only that library is installed from the artifact registry?
This is my yaml file
pool:
name: Azure Pipelines
steps:
- task: NodeTool#0
displayName: 'Use Node 14.x'
inputs:
versionSpec: 14.x
- task: Npm#1
displayName: 'npm install angular-cli'
inputs:
command: custom
verbose: false
customCommand: 'install -g #angular/cli#12.1.1'
- **TASK TO INSTALL MY LIBRARY FROM ARTIFACT**
- task: Npm#1
displayName: 'npm install'
inputs:
verbose: false
- task: Npm#1
displayName: 'create build'
inputs:
command: custom
verbose: false
customCommand: 'run build'
- ...task to deploy
You can set the Artifact feed containing your required npm packages as upstream sources for the current project Artifact feed. To add upstream sources to your feed you can refer to Configure upstream sources.
Then you can add the packages you need to the dependencies of your package.json. And use npm task to install the packages.
I have a node.js/typescript/angular project in BitBucket that I want to create a build (CI) pipeline for it on Azure Devops. I used the classic editor to create the pipeline (reason below) and am trying to add the following task(s)/step(s):
npm install #types/node#8.10.52
ng build (ng is angular)
If was to use the YAML configuration, the resulting YAML file looks like the following file below, so how do i create a "script" manually after the Node task i have in classic editor? I only have options to add "npm" as a task, which is why i have added 3 npm tasks as shown in image above with 3 separate custom commands to mimic the steps configuration in the YML file below. Is that the way to do it with custom command?
YAML file npm/angular representation via YAML configuration:
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install -g #angular/cli
npm install
ng build --prod
displayName: 'npm install and build'
Reason why Im using classic editor:
When i tried saving the YAML configuration pipeline, i got a "Error from bitbucket: something went wrong" error, which appears to be a write-permission issue based on what i found from Atlassian forums.
So i ended up just using the classic pipeline editor, and this way i was able to select a specific branch (i.e. dev) instead of master (prod) branch.
The way I've handled this is to add a script to your package.json:
"scripts": {
"ng": "ng",
"build": "ng build",
"build-prod": "ng build --configuration=production"
"build-dev": "ng build --configuration=dev"
},
...
Then, you just call run-script from the custom NPM task:
Or you could optionally on the task just call run-script build --prod since you can pass arguments on the task.
These same steps are available in YAML, it would look something like this:
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install node.js'
- task: Npm#1
inputs:
command: 'install'
displayName: npm install
- task: Npm#1
inputs:
command: 'custom'
customCommand: 'run-script build --prod'
displayName: 'npm build'
I'm trying to run a cypress test in an Azure Pipeline job using YAML. When the pipeline runs, it gets to the line where the cypress test runs and throws this error:
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\myagent\_work\5\s\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\myagent\_work\5\s\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
Here is my YAML file:
trigger:
- master
pool:
name: Default
variables:
buildConfiguration: 'Release'
steps:
- task: NodeTool#0
displayName: 'Use Node 12.x'
inputs:
versionSpec: 12.18.3
checkLatest: false
- task: Npm#1
displayName: 'npm install'
inputs:
workingDir: WebApp
verbose: false
- task: Npm#1
displayName: 'Build Angular'
inputs:
command: custom
customCommand: run build -- --prod
workingDir: WebApp
- task: UseDotNet#2
displayName: 'Use .NET Core SDK 3.1.300'
inputs:
packageType: sdk
version: 3.1.300
- task: DotNetCoreCLI#2
displayName: 'dotnet restore'
inputs:
command: restore
projects: AppApi/AppApi.csproj
vstsFeed: '*************'
- task: DotNetCoreCLI#2
displayName: 'dotnet publish'
inputs:
command: publish
arguments: '--no-restore --configuration $(buildConfiguration) --verbosity quiet --output $(build.artifactstagingdirectory)'
publishWebProjects: true
zipAfterPublish: true
- script: 'npx cypress verify'
displayName: 'cypress verify'
failOnStderr: true
- script: 'npm run cy:run --headless --spec cypress/integration/TestDemoExpanded.spec.ts --project ./WebApp'
displayName: 'run cypress tests'
workingDirectory: $(Build.SourcesDirectory)/WebApp
My package.json is checked into my Git repository and is located in my WebApp subfolder. How do I solve this error?
UPDATED:
I added the workingDirectory parameter as suggested but now I have this new error: npm ERR! missing script: cypress
I solved the 'missing script' error. The cypress run command I had in my YAML file didn't match the cypress run command I had in my package.json. I updated the cypress run step and now the tests run in the pipeline.
The task searches the package.json in the root folder and not in WebApp.
Just add:
workingDirectory: $(Build.SourcesDirectory)/WebApp
To the cypress step:
- script: 'npm run cypress run --headless --spec cypress/integration/TestDemoExpanded.spec.ts --project ./WebApp'
displayName: 'run cypress tests'
workingDirectory: $(Build.SourcesDirectory)/WebApp
I am struggling to get a simple build and deploy working and was hoping for some assistance. Could anyone review the steps and also why the Publish Artifacts does not work? It's a simple Angular 7 project.
Error:
[section]Starting: Publish Artifact: dist
========================================================================== Task: Publish Build Artifacts Description: Publish build
artifacts to Azure Pipelines/TFS or a file share Version:
1.142.2 Author : Microsoft Corporation Help : More Information
[warning]Directory 'D:\a\1\s\dist' is empty. Nothing will be added to build artifact 'dist'.
[section]Finishing: Publish Artifact: dist
YAML:
pool:
vmImage: Hosted VS2017
demands: npm
steps:
- script: |
echo Write your commands here
mkdir dist
echo Use the environment variables input below to pass secret variables to this script
displayName: 'Command - mkdir dist'
- task: Npm#1
displayName: 'npm install'
inputs:
verbose: false
- task: Npm#1
displayName: 'npm build'
inputs:
command: custom
verbose: false
customCommand: 'build --prod'
- task: PublishBuildArtifacts#1
displayName: 'Publish Artifact: dist'
inputs:
PathtoPublish: dist
ArtifactName: dist
- task: FtpUpload#1
displayName: 'FTP Upload: dist'
inputs:
credentialsOption: inputs
serverUrl: ‘xxx’
username: Tester2
password: 'Tester$2'
rootDirectory: dist
filePatterns: '*'
remoteDirectory: /
trustSSL: true
Azure DevOps Pipeline issue
The Publish Build Artifacts task is used to publish build artifacts to Azure Pipelines, TFS, or a file share.
But, just like Daniel and Andrey said, although you add the npm build, you did not set the installed folder to be dist. So the result of npm build will not be saved in the dist folder. In this case, the folder dist is empty.
Besides, to save the build result to the dist folder, you can try to use the option -- -op like following:
run ng build --prod -- -op ..\..\dist
The ..\..\dist should use relative path based on the project.json file.
Check the document JavaScript frameworks: AngularJS for some more details info.
Hope this helps.