Overview

This article introduces how to instantly reflect local customization code changes to the Kintone App using Visual Studio Code (VS Code) and the Live Server extension . With this setup, developers can remove the need to manually upload customization files to the Kintone App when developing JavaScript customizations.

Preparation

The following tools are used in this setup:

• Visual Studio Code (VS Code) editor
• Live Server VS Code extension
• mkcert command-line tool that generates locally-trusted development certificates

Install VS Code and the Live Server extension on the local device.

How It Works

The following processes occur when syncing the local code with a Kintone App.

1. The Kintone customization project is opened in VS Code
2. The files are hosted locally using the Live Server extension
3. HTTPS is enabled on the local development server using the mkcert command-line tool
4. The localhost URLs are set in the Kintone App's settings
5. Kintone actively fetches the JavaScript and CSS files from the localhost

Steps for Setting up the Development Environment

The following are the key steps in setting up the Kintone customization development environment:

1. Generate a certificate and private key using the mkcert tool
2. Enable HTTPS on the Live Server extension
3. Launch a local development server using the Live Server extension
4. Set the localhost URLs in the Kintone App's settings
5. Refresh the browser to load and apply the latest customization files

Note

For Webpack setup, additional steps are required.
For more information, refer to the Steps for Webpack Projects section.

1. Generate a Certificate and Private Key Using the mkcert Tool

This step covers installing, initializing, and using the mkcert command-line tool to generate a valid certificate and private key for https://localhost access.

As of August 2023, v1.4.4 is the latest version of mkcert.

For macOS, install mkcert using Homebrew .

1

brew install mkcert

For Windows, install mkcert using Chocolatey .

1

choco install mkcert

Initialize mkcert to install a local certificate authority (CA) .

When prompted for a password, input the device password.
Click Yes when a security warning appears.

1
2
3
4

mkcert -install
# Created a new local CA 💥
# Sudo password:
# The local CA is now installed in the system trust store! ⚡️

Generate a certificate and private key for localhost.

1
2
3
4
5
6
7
8

mkcert localhost 127.0.0.1 ::1

# Created a new certificate valid for the following names 📜
#  - "localhost"
#  - "127.0.0.1"
#  - "::1"

# The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅

The following files are generated:

• localhost+2-key.pem (the private key)
• localhost+2.pem (the certificate)

Note

mkcert supports Windows, macOS, and Linux. For more information, refer to the mkcert's Installation documentation.

Warning

The certificate and private key are for development purposes only and should not be shared with others.

2. Enable HTTPS on the Live Server Extension

This step enables the Live Server extension's HTTPS mode and configures the settings to use the certificate and private key generated in the previous step.

Follow these steps to enable Live Server extension's HTTPS mode:

1. Open the VS Code Command Palette
2. Type and select Preferences: Open Settings (UI)
3. In the settings search bar, type liveServer.settings.https
4. Set the enable property to true
5. Set the cert property to the path of the certificate generated in the previous step
6. Set the key property to the path of the private key generated in the previous step

The Live Server extension's HTTPS setting should look like the following screenshot:

Live Server extension's HTTPS mode can also be enabled through VS Code's User and Workspace Settings by appending the following JSON to the .vscode/settings.json file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "settings": {
    "liveServer.settings.https": {
      "enable": true,
      "cert": "/home/kintone/cert/localhost+2.pem",
      "key": "/home/kintone/cert/localhost+2-key.pem",
      "passphrase": ""
    }
  }
}

Warning

Be careful when modifying the settings.json file since it holds all of the VS Code settings.
VS Code may not work properly if the file is not configured correctly.

3. Launch a Local Development Server Using the Live Server Extension

To launch the local development server:

1. Open the Kintone customization project in VS Code
2. Open the VS Code Command Palette
3. Type and select Live Server: Open With Live Server
4. Navigate to https://localhost:5500 on the web browser to access the server

The project directory will be accessible via the browser.
Accessing https://localhost:5500 should look like the below image.

Navigate to the JavaScript and CSS files.

4. Set the localhost URLs with HTTPS in the Kintone App's Settings

To get the localhost URL with HTTPS for a file:

1. Navigate to the file hosted on the local development server via the browser
2. Copy the URL from the browser's address bar
3. Navigate to the Kintone App's JavaScript and CSS Customization settings
4. Set the localhost URL with HTTPS to the desired option

   • 

5. Click on Save and then the Update App buttons

The setup for the optimized Kintone customization development environment is now complete.

5. Refresh the Browser to Load and Apply the Latest Customization File

Modify a Kintone customization file and manually refresh the browser displaying the Kintone App.

The Kintone App will load and apply the customization file with the latest changes.

Attention

This is only a development environment setup.
The changes are only implemented on other devices once the code is uploaded to the Kintone App.

Note

If other users want to verify the changes as the code is being developed, consider using the customize-uploader CLI tool.

Steps for Webpack Projects

Webpack is a module bundler that is helpful when building a complex Kintone customization project with multiple files and dependencies. Projects built with frameworks like React also require a bundler like Webpack to have all the JavaScript files bundled into a single file.

Since Webpack can watch files and recompile whenever they change with the watch option, the setup differs.

To set up the optimized Kintone customization development environment for Webpack projects:

1. Build Webpack with the watch option

   1	npx webpack --mode development --colors --watch

2. Access https://localhost:5500 and copy the file's URL for the build artifact set in webpack.config.js.

3. Set the URL in the Kintone App's JavaScript and CSS Customization settings .

Note

webpack-dev-server can also host files locally with HTTPS mode. For more information, refer to their development guide .