Uploading Software Packages with npm

When to Use

CodeArts Build allows you to configure build scripts using YAML files. You can use YAML syntax to compile the build environment, parameters, commands, and steps into a build.yml file, which can be stored in a code repository with the built code. The system uses the build.yml file as the build script to execute the build task, making the build process traceable, recoverable, secure, and reliable. The build with npm is used as an example in this section.

Prerequisites

A project is available. If no project is available, create one.

Creating a Code Repository

1. Log in to CodeArts using the Huawei Cloud account.
2. Click the name of the project to create a repository for it.
3. In the navigation pane, choose Code > Repo, as shown in Figure 1.
   Figure 1 CodeArts Repo
   

4. Click New Repository.
5. Set parameters based on Table 1 and click OK.

   Table 1 Creating a code repository

   Parameter	Description
   Repository Name	Customize the name for the code repository, for example, npm_yml_build. The name starts with a digit, letter, or underscore (_). The value can contain periods (.) and hyphens (-). The value cannot end with .git, .atom, or a period (.).
   Description	Describe the code repository.
   .gitignore Programming Language	Select .gitignore based on the programming language, for example, Java.
   Permissions	Select all. Make all project developers automatic repository members: A project manager is automatically set as the repository administrator, and a developer is set as a common repository member. When the two roles are added to the project, they will be automatically synchronized to existing repositories. Generate README: You can edit the README file to record information such as the project architecture and compilation purpose, which is similar to a comment on the entire repository. Automatically create Check task (free of charge): After the repository is created, you can view the code check task of the repository in the check task list.
   Visibility	Set this parameter to Private. Private: Only repository members can access and commit code. Public: The repository is open and read-only to all guests, but is not displayed in their repository list or search results. You can select an open-source license as the remarks.

Creating a build.yml File

1. In the navigation pane, choose Code > Repo.
2. Click the name of the code repository you created (see Creating a Code Repository).
3. Choose Create > Create Directory, as shown in Figure 2.
   Figure 2 Creating a directory
   

4. Set parameters based on Table 2 and click OK.

   Table 2 Creating a directory

   Parameter	Description
   Directory Name	You can customize the value, for example, .cloudbuild.
   Commit Message	Enter remarks of the directory. The message is used to record the description of the files in the folder.

5. Click the name of the directory created in Step 4.
6. Choose Create > Create File, as shown in Figure 3.
   Figure 3 Creating a file
   

7. Name the file build.yml and copy the following code to the file:

   # This YAML is the default template and can be modified based on this 
   ---
   version: '2.0'
   steps:
     BUILD:
       - npm:
           inputs:
             #check: 
               #project_dir: .
             command: |
               export PATH=$PATH:~/.npm-global/bin
               #Set the cache directory.
               npm config set cache /npmcache
               npm config set registry http://mirrors.tools.huawei.com/npm/
               npm config set disturl http://mirrors.tools.huawei.com/nodejs
               npm config set sass_binary_site http://mirrors.tools.huawei.com/node-sass/
               npm config set phantomjs_cdnurl http://mirrors.tools.huawei.com/phantomjs
               npm config set chromedriver_cdnurl http://mirrors.tools.huawei.com/chromedriver
               npm config set operadriver_cdnurl http://mirrors.tools.huawei.com/operadriver
               npm config set electron_mirror http://mirrors.tools.huawei.com/electron/
               npm config set python_mirror http://mirrors.tools.huawei.com/python
               npm config set prefix '~/.npm-global'
               npm install --verbose
               zip -r ./nodeserver.zip ./
       - upload_artifact:
           inputs:
             path: "./nodeserver.zip"

8. Click OK.

Creating a package.json File

1. Create the package.json file in the root directory by referring to Step 6 and Step 7. The code in the file is as follows:

   {
   "name": "docker_web_app",
   "version": "1.0.0",
   "description": "Node.js on Docker",
   "author": "First Last <first.last@example.com>",
   "main": "server.js",
   "scripts": {
   "start": "node server.js"
   },
   "dependencies": {
   "express": "^4.16.1"
   }
   }
   

2. Click OK.

Creating a server.js File

1. Create a file named server.js in the root directory by referring to Step 6 and Step 7. The code in the file is as follows:

   'use strict';
   const express =require('express');
   // Constants
   const PORT=8080;
   const HOST='127.0.0.1';
   // App
   const app =express();
   app.get('/',(req, res)=>{  
   res.send('Hello world\n');
   });
   app.listen(PORT,HOST);
   console.log(`Running on http://${HOST}:${PORT}`);

2. Click OK.

Creating a Build Task

1. In the navigation pane, choose CICD > Build, as shown in Figure 4.
   Figure 4 Accessing the CodeArts Build homepage
   

2. Click Create Task.
3. Set parameters based on Table 3.

   Table 3 Basic information

   Parameter	Description
   Task Name	Enter a custom task name, for example, npm_yml_build.
   Code Source	Select Repo.
   Source Code Repository	Select the code repository you created (see Creating a Code Repository).
   Branch	Select the branch created when you create the repository in Creating a Code Repository. If no branch is available, select the default master.
   Description	Describe the build task.

4. Click Next.
5. Select Blank Template and click Next.
6. Click the Code tab to view the imported build script, as shown in Figure 5.
   Figure 5 Code tab
   

7. Click Create and Run in the upper right corner.

Viewing and Verifying the Build Result

1. In the navigation pane, choose Artifact > Release Repos.
2. Go to the release repos to view the released software package. The name of the software package is the same as the task name you use when Creating a Build Task, as shown in Figure 6.
   Figure 6 Viewing the software package