Let’s talk about how to use Angular+Jenkins to display build versions

At the end of the article about Angular combined with Git Commit version processing, we are left with questions?️ Now let’s concrete the problem

and combine it with Jenkins build. Can we get the build information, such as the build number, and backfill it to the page? [Recommended related tutorials: "Angular Tutorial"]

as follows:

Uha, let’s modify it based on the original.

Add the file build_info.json to the root directory.

{ }

You read that right, the content of build_info.json is {}

The build_info.json file is generated when building Jenkinsfile .

The specific implementation ideas are as follows:

• During the building process, execute Jenkinsfile to generate build_info.json file. When

• packaging the project, consider whether to obtain the content of the build_info.json file for different environments.

For the convenience of demonstration, the environment here only considers the production environment

. The steps are two simple steps, the most important point is how to write the content of the build_info.json file .

If you are not familiar with Jenkinsfile related content, please read the article about automatic construction of Node projects using Jenkins Pipeline and Gitlab. At this point, your focus is on the content of the article Jenkinsfile , as follows:

pipeline {
    agent any
    
    tools { 
        nodejs "nodejs" 
    }
    
    { stages
        stage('Dependency') {
            {steps
                sh 'npm install'
            }
        }
        # We have added a stage here, see below?
        stage('Build') { 
            {steps
                sh 'npm run clean' 
                sh 'npm run build' 
            }
        }
    }
}

We have added a stage to complete our writing of the build_info.json file.

stage('Version') {
  {steps
    script {
      def amap = 
        'build_number': BUILD_NUMBER, # Build number 'job_name': JOB_NAME # Task name]
      
      # Write file writeJSON file: WORKSPACE+'build_info.json', json: amap # WORKSPACE root directory}
  }
}

Yeah, the idea is okay... Right?

Let's go to the second step: read the content of build_info.json , I intercept the content of the production environment part of version.js :

// Introduce the generated build_info.json file let buildInfo = require ('./build_info.json');

if(config.env === 'production') { 
    // Get the build version number, otherwise get the default version versionObj.version = buildInfo.build_number || config.version 
}

After completing the above file, you can publish it to the relevant environment. If everything goes well, you can see the relevant version number on the page.

This article is not very related to angular , it is just used to cooperate with jenkins . The next article is about using Angular for spa development, so stay tuned.

This article is reproduced from: https://juejin.cn/post/7081642981890981895

Author: Jimmy