Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

We’ve been consolidating our knowledge of angular, so let’s get involved in this activity and hopefully keep it going and get some rewards.

I am In.

We left a question at the end of Angular with Git Commit at 🤔️

Combined with Jenkins build, can we get build information, such as build number, backfill to the page?

As follows:

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

Add the file build_info.json to the root directory.

{}
Copy the code

The build_info.json file contains {}.

The build_info.json file is generated when Jenkinsfile is built.

The specific implementation ideas are as follows:

  1. Execute during buildJenkinsfilegeneratebuild_info.jsonfile
  2. When packaging a project, consider whether to capture it for different circumstancesbuild_info.jsonContents of the document

For the sake of the demonstration, the environment is considered production only

The above steps are two simple steps, the most important of which is how to write the build_info.json file contents.

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

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

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

stage('Version') {
  steps {
    script {
      def amap = 
        'build_number': BUILD_NUMBER, # # to build
        'job_name': JOB_NAME # task name
      ]
      
      Write file
      writeJSON file: WORKSPACE+'build_info.json', json: amap # WORKSPACE root}}}Copy the code

Yeah, ideas can be… Right?

Let’s go to step 2: read the build_info.json file. I’ll grab the version.

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

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

Once you complete the above file, you can publish to the relevant environment, and hopefully you will see the relevant version number on the page.

This article is not very angular related, but is intended to complement Jenkins. Stay tuned for the next article on SPA development with Angular.

【 the 】 ✅