Create Plug-in Files using webpack-plugin-kintone-plugin

Introduction
Installation
Quick Start
Notes

Introduction

This article introduces webpack-plugin-kintone-plugin, a CLI tool designed to create Kintone plug-in files using webpack .
It can be used to compress files or bundle third party libraries.

It is available as a npm package on Windows, macOS, and Linux environments.

Installation

Node.js and npm are needed to run webpack-plugin-kintone-plugin.
npm is installed automatically when installing Node.js.

Download the installer from the Node.js Official Site .
Check the engines property in package.json for the Node.js version requirements.
For example, if the following property is stated, version 18 or higher is required.
1 2 3

"engines": { "node": ">=18" },
Run the installer and follow the instructions.

Quick Start

Step 1: Prepare the plug-in

This article uses a template created in the Create Plug-in Templates using create-plugin article. Follow the steps in Basic Usage and confirm the directory structure before going to the next step.

To prepare your own package file, follow the steps in the Package Plug-in Files using plugin-packer article.

Step 2: Install Webpack

Install webpack-plugin-kintone-plugin and webpack using the following commands.

1
2
3
4
5
6
7
8


# Go to the plug-in files directory
cd sample_plugin_project

# Install webpack-plugin-kintone-plugin
$ npm install --save-dev @kintone/webpack-plugin-kintone-plugin

# Install webpack and webpack-cli
$ npm install --save-dev webpack webpack-cli

Step 3: Create build directory

Files in the "plugin" directory will be packaged to Kintone plug-in files.

1

mkdir plugin

Step 4: Set up webpack-plugin-kintone-plugin

To run webpack-plugin-kintone-plugin, create and modify the following three files

manifest.json
webpack.config.js
package.json

manifest.json

This is a configuration file for packaging plug-ins.
Move 'src/manifest.json' to the "plugin" directory created in Step 3.

1

mv src/manifest.json plugin/

webpack.config.js

This is a webpack configuration file.
Use the following code and create webpack.config.js under the "sample_plugin_project" directory created in step 1.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


const path = require('path');
const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');

module.exports = {
  // Specify js file
  entry: {
    desktop: './src/js/desktop.js',
    // mobile: './src/js/mobile.js',
    config: './src/js/config.js',
  },
  // Specify destination
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js',
  },
  // Setting file paths
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/plugin.zip'
    }),
  ],
};

In addition, to set the plug-in ID and version of the manifest.json as the file name of the generated zip file, use the following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// ...
module.exports = {
  // ...
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: (id, manifest) => `${id}.${manifest.version}.plugin.zip`
    })
  ]
};

package.json

This is a file for managing npm packages.
Modify the scripts property in the package.json as follows.

1
2
3
4
5
6
7


    "scripts": {
        "build": "webpack --mode production",
        "develop": "webpack --mode development --watch",
        "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000",
        "lint": "eslint src",
        "start": "npm run develop"
    },

Step 5: Move files to "plugin"

Move the css, HTML, and image files to the "plugin" directory for packaging.

1
2
3


mv src/css plugin/
mv src/html plugin/
mv src/image plugin/

The file tree should now be updated into the following structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


├── node_modules
├── package-lock.json
├── package.json # Step4
├── plugin
│   ├── css # Step5
│   │   ├── 51-modern-default.css
│   │   ├── config.css
│   │   └── desktop.css
│   ├── html # Step5
│   │   └── config.html
│   ├── image # Step5
│   │   └── icon.png
│   └── manifest.json # Step4
├── private.ppk
├── scripts
│   └── npm-start.js
├── src
│   └── js
│       ├── config.js
│       └── desktop.js
└── webpack.config.js # Step4

Step 6: Package plug-in files

Run the following command to package the files:

1

npm run build

Under the "dist" directory, a plug-in file is generated with the name "plugin.zip".

Step 7: Upload the plug-in

Add the plug-in created to Kintone and use it in the Kintone app.
There are two ways to add plug-ins to Kintone:

Notes

Automatically package and upload plug-ins to Kintone

Run the following command to automatically package and upload the plug-in when the code is modified.

This command is running plugin-uploader.
For more details, refer to the Upload Plug-in Files using plugin-uploader article.

1

npm start