development kintone PLUGIN with Reactjs + CREATE-KINTONE-PLUGIN

I. Requirement

• Nodejs

II. Usage CLI @kintone/create-plugin.

• npm install -g @kintone/create-plugin

You can configure your kintone plugin settings interactively.

After running the initialization command, a kintone plugin project will be created.
Directory tree structure and default package.json file.

III. Install the Reactjs library and configure the webpack.

Step 1: install library.

Access the directory containing the project and run commands:

• npm i react react-dom react-scripts cross-env babel-preset-stage-0 css-loader style-loader webpack-cli @kintone/kintone-ui-component
• npm i uglifyjs-webpack-plugin –save-dev
• rm -f src/js/desktop.js

Step 2: Add folder and file.

• mkdir src_component

Add Desktop.js file to src_component and add source code:

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from '@kintone/kintone-ui-component';

export function Desktop(props) {
  const {PLUGIN_ID, events} = props
  console.log(events)
  return (
    <Button text='Submit' type='submit' onClick={function() {
      alert(`This is plugin ID ${PLUGIN_ID}`);
    }}/>
  );
}

// Adding your customization into header space of kintone app
(function(PLUGIN_ID) {
  kintone.events.on('app.record.index.show', function(ev) {
    let kintoneSpaceElement = kintone.app.getHeaderSpaceElement();
    ReactDOM.render(<Desktop events={ev} PLUGIN_ID={PLUGIN_ID} />, kintoneSpaceElement);
  });
})(kintone.$PLUGIN_ID);

Add webpack.config.js file to the project’s main folder and add source code:

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = (env = {}) => {
  return {
    entry: {
      "desktop.min": './src_component/Desktop.js',
      // "mobile.min": './src_component/Mobile.js' 
      // "config.min": './src_component/config.js'
    },
    output: {
      path: path.resolve(__dirname, 'src/js'),
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['react-app','@babel/preset-env'],
              plugins: ["transform-class-properties"]
            }
          }
        },
        {
          test: /\.css$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" }
          ]
        }
      ]
    },
    watch: env.watch,
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          include: /\.min\.js$/,
        })
      ]
    }
  }
}

Add the code to the manifest.json file in the project’s ./src folder

"desktop": {
   "js": [
     ...
     "js/desktop.min.js"
   ],
}

Step 3: Add a script to buiding by webpack to package.json

"scripts": {
  ....
  "build-webpack": "cross-env NODE_ENV=production webpack",
  ....
}

Run command to build the customization file.

• npm run build-webpack

result:

Step 4: start the project with: npm start

You need to login in order to like this post: click here