Bitbucket Pipeline: Command not found in

[Jannis Röglin]

Hallo,

I'm stoke do build a Bitbucket Pipeline for an ionic app. The Problem occurred for "ionic build --prod" command not found 

That is my .yml-file:

image: node:18.13.0

clone:

  depth: full # SonarCloud scanner needs the full history to assign issues properly

definitions:

  caches:

    sonar: ~/.sonar/cache # Caching SonarCloud artifacts will speed up your build

  steps:

  - step: &build-test-sonarcloud

      name: Build, test and analyze on SonarCloud

      caches:

      # See https://confluence.atlassian.com/bitbucket/caching-dependencies-895552876.html

        - node

        - sonar

      script:

        - npm install

        - ionic build --prod

        - npm test

        - npm install -g sonar-scanner

        - sonar-scanner

  - step: &check-quality-gate-sonarcloud

      name: Check the Quality Gate on SonarCloud

      script:

        - pipe: sonarsource/sonarcloud-quality-gate:0.1.6

pipelines: # More info here: https://confluence.atlassian.com/bitbucket/configure-bitbucket-pipelines-yml-792298910.html

  branches:

    master:

      - step: *build-test-sonarcloud

      - step: *check-quality-gate-sonarcloud

  pull-requests:

    '**':

      - step: *build-test-sonarcloud

      - step: *check-quality-gate-sonarcloud

and her is my package.json file:

{

  "name": "******",

  "version": "0.0.1",

  "private": true,

  "dependencies": {

    "@capacitor/android": "4.2.0",

    "@capacitor/app": "4.1.1",

    "@capacitor/camera": "4.1.4",

    "@capacitor/core": "^4.0.0",

    "@capacitor/haptics": "4.1.0",

    "@capacitor/keyboard": "4.1.0",

    "@hookform/resolvers": "^2.9.8",

    "@ionic/pwa-elements": "^3.1.1",

    "@ionic/react": "^6.0.0",

    "@ionic/react-router": "^6.0.0",

    "@reduxjs/toolkit": "^1.8.3",

    "@testing-library/jest-dom": "^5.11.9",

    "@testing-library/react": "^11.2.5",

    "@testing-library/user-event": "^12.6.3",

    "@tiptap/react": "^2.0.0-beta.207",

    "@tiptap/starter-kit": "^2.0.0-beta.207",

    "@toast-ui/react-image-editor": "^3.15.2",

    "@types/jest": "^26.0.20",

    "@types/node": "^12.19.15",

    "@types/react": "^16.14.3",

    "@types/react-dom": "^16.9.10",

    "@types/react-router": "^5.1.11",

    "@types/react-router-dom": "^5.1.7",

    "aws-amplify": "^4.3.39",

    "axios": "^0.27.2",

    "axios-mock-adapter": "^1.21.2",

    "flag-icons": "^6.6.6",

    "i18next": "^22.0.4",

    "i18next-browser-languagedetector": "^7.0.1",

    "ionicons": "^5.4.0",

    "joi": "^17.6.1",

    "joi-password": "^4.0.0",

    "lodash": "^4.17.21",

    "quagga": "^0.12.1",

    "react": "^17.0.1",

    "react-collapsed": "^3.6.0",

    "react-dom": "^17.0.1",

    "react-hook-form": "^7.36.1",

    "react-i18next": "^12.0.0",

    "react-native-uuid": "^2.0.1",

    "react-paginate": "^8.1.4",

    "react-redux": "^8.0.2",

    "react-router": "^5.2.0",

    "react-router-dom": "^5.2.0",

    "react-scripts": "^5.0.0",

    "react-select": "^5.7.0",

    "recorderjs": "github:mattdiamond/Recorderjs",

    "remixicon": "^2.5.0",

    "signature_pad": "^4.1.4",

    "typescript": "^4.1.3",

    "underscore": "^1.13.6",

    "videojs-record": "^4.6.0",

    "web-vitals": "^0.2.4",

    "workbox-background-sync": "^5.1.4",

    "workbox-broadcast-update": "^5.1.4",

    "workbox-cacheable-response": "^5.1.4",

    "workbox-core": "^5.1.4",

    "workbox-expiration": "^5.1.4",

    "workbox-google-analytics": "^5.1.4",

    "workbox-navigation-preload": "^5.1.4",

    "workbox-precaching": "^5.1.4",

    "workbox-range-requests": "^5.1.4",

    "workbox-routing": "^5.1.4",

    "workbox-strategies": "^5.1.4",

    "workbox-streams": "^5.1.4",

    "xmlbuilder2": "^3.0.2"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)\"",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  },

  "devDependencies": {

    "@capacitor/cli": "^4.0.0",

    "@ionic/cli": "6.20.3",

    "@types/lodash": "^4.14.190",

    "@types/recordrtc": "^5.6.10",

    "@types/underscore": "^1.11.4",

    "@types/video.js": "^7.3.50",

    "sass": "^1.54.8"

  },

  "description": "An Ionic project"

}

[Patrik S]

Hello @Jannis Röglin ,

Thank you for reaching out to Atlassian Community!

The issue here is that npm will install dependencies defined in the package.json file as local dependencies, not global dependencies.

Globally installed dependencies put executable files in /usr/local/bin, while Locally installed dependencies put executables in ./node_modules/.bin/.

Since the ./node_modules/.bin/ is not part of the PATH variable (where the shell will look for the binary of the command you are executing - in this case ionic), it's returning the "ionic command not found" error.

To fix this issue you can execute the below command in your pipelines script before the ionic command : 

- export PATH="${BITBUCKET_CLONE_DIR}/node_modules/.bin:$PATH"
- ionic -v

This will include the node_modules/.bin folder into the PATH variable, so when you execute the ionic command, the shell will also look at that folder for a binary called ionic, and since this folder should contain this binary after the npm install, the command should run successfully.

Hope that helps! Let me know in case you have any questions.

Thank you, @Jannis Röglin !

Patrik S 

[Jannis Röglin]

Thanks, that's it.