Storing angular dist folder in artifactory

Question

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)

Answer 1

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.

• "Our continuous deployment pipeline" (from Xavier Sierra) does include a "Release Beta Version" section where:

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.

• "enter link description here" has a "Deployment process" section which does the same, with a push to Nexus (but the same applies to Artifactory)

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.