Help Center> CloudArtifact> Getting Started> Releasing/Obtaining a Self-Hosted npm Component via a Build Task
Updated on 2022-09-29 GMT+08:00

Releasing/Obtaining a Self-Hosted npm Component via a Build Task

This section describes how to release a component to a self-hosted npm repo via a build task and obtain a dependency from the repository for deployment.

Prerequisites

  1. You already have a project. If no project is available, create one.
  2. You have created a self-hosted npm repo.

Releasing a Component to a Self-Hosted npm Repo

  1. Download the configuration file of the self-hosted repo.

    1. Log in to the DevCloud homepage and access the self-hosted npm repo. Click Set Repository on the right of the page and record the repository path.

    2. Click Cancel to return to the self-hosted repo page. On the right of the page, click Operation Guide.

    3. In the dialog box that is displayed, click Download Configuration File.

    4. Save the downloaded npmrc file as an .npmrc file.

  2. Configure a code repository.

    1. Go to CodeHub and create a Node.js repository. For details, see Cloud Repository Creation. This procedure uses the Nodejs Webpack Demo template.
    2. Go to the code repository and upload the .npmrc file to it.

    3. Find the package.json file in the code repository and open it. Add the repository address recorded on the Edit Repository page to the name field in the file.

      If the name field cannot be modified, add the address to the Include Patterns field on the Edit Repository page.

  3. Configure and execute a build task.

    1. On the code repository page, click Create Build Task in the upper right. The Create Task page is displayed.

      Select Blank build template and click OK.

    2. Add the Build with npm action.

    3. Edit the Build with npm action.
      • Select the desired tool version. In this example, nodejs12.7.0 is used.
      • Delete the existing commands and run the following instead:
        export PATH=$PATH:/root/.npm-global/bin
        npm config set strict-ssl false
        npm publish

    4. Click Create and Run to start the build task.

      After the task is successfully executed, go to the self-hosted repo and find the uploaded npm component.

Obtaining a Dependency from a Self-Hosted npm Repo

The following procedure uses the npm component released in Releasing a Component to a Self-Hosted npm Repo as an example to describe how to obtain a dependency from a self-hosted npm repo.

  1. Configure a code repository.

    1. Go to CodeHub and create a Node.js repository. For details, see Cloud Repository Creation. This procedure uses the Nodejs Webpack Demo template.
    2. Obtain the .npmrc file (see Releasing a Component to a Self-Hosted npm Repo) and upload it to the root directory of the code repository where the npm dependency is to be used.
    3. Find and open the package.json file in the code repository, and configure the dependency to the dependencies field. In this document, the value is as follows:
      "@test/vue-demo": "^1.0.0"

  2. Configure and execute a build task.

    1. On the code repository page, click Create Build Task in the upper right. The Create Task page is displayed.

      Select Blank build template and click OK.

    2. Add the Build with npm action.

    3. Edit the Build with npm action.
      • Select the desired tool version. In this example, nodejs12.7.0 is used.
      • Delete the existing commands and run the following instead:
        export PATH=$PATH:/root/.npm-global/bin
        npm config set strict-ssl false
        npm install --verbose

  3. Click Create and Run to start the build task.

    After the task is successfully executed, view the task details. If information similar to the following is found in the log, the dependency has been downloaded from the self-hosted repo.

npm Commands

When configuring build tasks, you can also run the following npm commands as required:

  • Delete an existing component from a self-hosted repo.
    npm unpublish @socpe/packageName@version
  • Obtain tags.
    npm dist-tag list @scope/packageName
  • Add a tag.
    npm dist-tag add @scope/packageName@version tagName --registry registryUrl --verbose
  • Delete a tag.
    npm dist-tag rm @scope/packageName@version tagName --registry registryUrl --verbose

Command parameter description:

  • scope: path of a self-hosted repo. For details about how to obtain the path, see Releasing a Component to a Self-Hosted npm Repo.
  • packageName: the part following scope in the name field of the package.json file.
  • version: value of the version field in the package.json file.
  • registryUrl: URL of the self-hosted repo referenced by scope in the configuration file.
  • tagName: tag name.

The following uses the self-hosted component released in Releasing a Component to a Self-Hosted npm Repo as an example:

  • scope: test
  • packageName: vue-demo
  • version: 1.0.0

The command for deleting this component is as follows:

npm unpublish @test/vue-demo@1.0.0