Storing angular dist folder in artifactory

user_10993048 0
Viewed 2295

We use artifactory to pull libraries and store artifacts. We set the npm registry to this artifactory url to pull down the libraries. We use gitlab as our CI. I've written a job that builds the angular app with ng build --prod. My question is what's the best practice for pushing the dist/ folder to artifactory?. In the next step, I will be retrieving the dist/ folder and deploying it to cloud foundry with cf push. I looked into npm install, but it says it needs a package.json. Do i create one in the dist folder? If so what do i put in there? Another option appears to be to tar the dist/ , but that also seems to require package.json. Any thoughts are much appreciated.

I tried to push the folder using artifactory's REST API and curl with --data-binary, but this supports a single file only (as expected)

curl -u $ARTIFACTORY_USER:$ARTIFACTORY_APIKEY --data-binary @$RELEASE_PACKAGE -X PUT $ARTIFACTORY_URL/artifactory/

I was expecting to be able to push the entire dist folder so i could retreive and deploy it. But, i dont know what the best practice is (if its right to push the folder or should i push a tar.gz)

angular gitlab-ci artifactory
2 Answers

I was able to zip up the dist directory as tar.gz and push that into artifactory with the rest api and pull it down with curl, unzip and delpoy it.

So only question is around the best practice for an angular app. Do people follow the approach I listed above or is there a better way?

There does not seem to be an official best practice, only annecdotal evidence of such a process.

but can we grab all the generated files and put them inside the zip file. Therefore, we have to build the app, locate the project dist folder and compress its content to a zip file.

stage: deployscript:
# Installing zip / unzip in order to zip the artifact before uploading it.
    - apk add curl zip
# Create artifactName and remove version-file as it is supposed to only be used during the build
    - artifactName=${ARTIFACT_NAME_TEMPLATE/<VERSION>/$(cat $CI_PROJECT_DIR/$SUB_PATH/version)}
    - rm $CI_PROJECT_DIR/$SUB_PATH/version
# Zip artifact (note: we are using relative paths; otherwise the ZIP will include all parent folders)
    - cd $CI_PROJECT_DIR/$SUB_PATH
    - zip -9 -r ${artifactName} ./dist
# Upload to Sonatype Nexus
    - curl -v -u $SONAR_CI_USER:$SONAR_CI_PASSWORD --upload-file $CI_PROJECT_DIR/$SUB_PATH/${artifactName} $NEXUS_URL/

The deliver (in this case, to Docker) being:

build_image:
  script:
# Install curl and unzip in order to download and unzip artifact
    - apk add curl unzip

# Download artifact
    - curl $ARTIFACT_ON_NEXUS --output $CI_PROJECT_DIR/$OUTPUT_FILE

# Unzip artifact
    - unzip $CI_PROJECT_DIR/$OUTPUT_FILE -d $CI_PROJECT_DIR/frontend/
    - docker build -t particles-front-frontend-nginx:$VERSION_TO_PUBLISH .

  artifacts:
    expire_in: 1 hour
    paths:
      - $CI_PROJECT_DIR

So the general idea remains: store dist as zip, curl it back to the deployment environment.

VonC_63090

As below, you can set artifacts path to your dist folder in your build stage ( packing in my exmaple). And in your next stage ( deploying in the example) you can add previous stage ad a dependency. Then your files on the dist folder would be available in this stage.

packaging:
  stage: packaging
  artifacts:
     paths:
       - /dist

deploying:
  stage: deploying
  dependencies:
    - packaging
user_60482370
Related