Pipeline Example: Npm Build

JFrog Pipelines Documentation

Products
JFrog Pipelines
Content Type
User Guide
ft:sourceType
Paligo

This pipeline demonstrates the definition of a simple pipeline that builds and publishes an npm package. An example Pipelines DSL is used to show how to use integrations, resources, and steps to construct a simple, automated workflow.

This example shows the following:

See it Live!

Click here to see this quickstart in action.

A successful run of the pipeline in this quickstart looks like this:

Before you Begin

Before trying this quickstart, ensure that you have:

  • A GitHub account. This is required for forking the example repository.

  • A JFrog Platform account, or self-hosted JFrog Pipelines.

  • Set up Artifactory as an npm Registry. Create three repositories:npm Registry

    • A remote npm registry. Remote Repositories defined in Artifactory serve as a caching proxy for a registry managed at a remote URL such as https://registry.npmjs.org. Artifacts (such as TGZ files) requested from a remote repository are cached on demand.npm RegistryRemote Repositories

    • A local npm registry.

    • A virtual npm registry. A Virtual Repository defined in Artifactory aggregates packages from both local and remote repositories. This allows you to access both locally hosted npm packages and remote proxied npm registries from a single URL defined for the virtual repository.npm Registry

      When adding the virtual npm registry, ensure that both the remote and local npm registries are selected, and the Default Deployment Repository is set to the local npm registry.

      npm_registries_1.png
  • At least one node pool. This is the set of nodes that all pipeline steps will execute in. For more information, see Managing Pipelines Node Pools.

Run the Pipeline

Perform the steps below to build and push your npm image:. For a detailed look at the Npm Build Pipeline Example yaml, see Npm Build Example: pipelines.yml.

  1. Fork the repository

    The Pipelines DSL for this example is available in the npm-example repository in the JFrog GitHub account.

    The DSL file is a yaml file that contains the pipeline definitions. This example uses two yaml files:

    • pipelines.yml, which contains the declarations for all the resources and workflow steps required to run the pipeline.

    • values.yml, which contains the values required for the pipelines.yml file.

    For a full breakup of all the resources, pipelines and steps used in the yml file, see Npm Build Example: pipelines.yml .

    Fork this repository to your account or organization. This is important since you need admin access to repositories that are used as Pipeline Sources or GitRepo resources, in order to add webhooks to these repositories and listen for change events.

  2. Sign in to Artifactory

    Sign in to JFrog Platform with your Artifactory credentials.

  3. Add Integrations

    a. Go to Administration | Pipelines | Integrations to add two integrations:

    b. Write down the names of both GitHub and Artifactory integrations as these are required for the next step. Ensure that the names are unique and easy to remember.

  4. Update values.yml and pipelines.yml

    The pipelines configuration is available in the values.yml file. Edit this file in your fork of this repo and replace the following:

    Tag

    Description

    Example

    gitProvider

    Provide the name of the Github integration you added in the previous step.

    gitProvider: my_github

    path

    Provide the path to your fork of this repository.

    path: myuser/project-examples

    Edit the pipelines.yml file and replace the following:

    Tag

    Description

    Example

    sourceArtifactory

    Provide your Artifactory integration.

    sourceArtifactory: art

    repositoryName

    Provide the name of the npm repository in Artifactory.

    repositoryName: npm-virtual

    Note

    All pipeline definitions are global across JFrog Pipelines within a Project. The names of your pipelines and resources need to be unique within the Project in JFrog Pipelines.

  5. Add Pipeline Sources

    The Pipeline Source represents the git repository where our pipelines definition files are stored. A pipeline source connects to the repository through an integration, which we added in step 3.

    In your left navigation bar, go to Administration | Pipelines | Pipeline Sources. Click on Add a Pipeline Source and then choose From YAML. Follow instructions to Add a Pipeline Source. This automatically adds your configuration to the platform and pipelines are created based on your YAML.Add a Pipeline Source

  6. Execute the Pipeline

    After your Pipeline Source is synced successfully, navigate to Pipelines | My Pipelines in the left navbar to see the newly added pipeline. In this example, npm_example_pipeline_jfp is the name of our pipeline. Click the name of the pipeline. This renders a real-time, interactive, diagram of the pipeline and the results of its most current run.

    npm_example_pipeline_jfp_1.png

    You can trigger the pipeline by committing a change to your repository, or by manually triggering it through the UI. The steps in the pipeline execute in sequence. Multiple steps can execute in parallel if the node pool has multiple build nodes available.

    npm_trigger_this_step_1.png

    Once the pipeline has completed, a new run is listed.