Quick Start: VS Code Setup for Kintone Customization Development

Tips & Tricks
, , ,
1

Quick Start: VS Code Setup for Kintone Customization Development

Want to develop Kintone customizations quickly?

If so, let's set up your Visual Studio Code (VS Code) so your code is seamlessly synced with your Kintone App.

No more manually uploading customization files to the Kintone App each time! :raised_hands:

Setup Overview

overview
overview2100×960 145 KB

  1. Open the Kintone customization project in VS Code
  2. Live Server extension will host the files locally
  3. mkcert command-line tool enables HTTPS on the local development server
  4. Set the localhost URLs with HTTPS in the Kintone App's settings
  5. Kintone actively fetches the JavaScript and CSS files from the localhost

Prep

Tools we will use:

Install VS Code and the Live Server extension on your laptop.

5 Steps to Setup the 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 with HTTPS in the Kintone App's settings
  5. Refresh the Kintone App to reflect the changes

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

To install mkcert:

  • For macOS, use Homebrew → brew install mkcert
  • For Windows, use Chocolatey → choco install mkcert

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

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

Generate a certificate and private key for localhost.

  • mkcert localhost 127.0.0.1 ::1

When you see The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅, everything went well!

  • localhost+2-key.pem is the private key
  • localhost+2.pem is the certificate

For more information, refer to the mkcert's Installation documentation.

:warning: Do not share the certificate and private key with others.

Step 2. Enable HTTPS on the Live Server Extension

Open your Kintone customization project in VS Code as a VS Code Workspace.

  • To create a VS Code Workspace: Open the folder in VS Code, then go to File and click the Save Workspace As option.

Add a VS Code Workspace Setting file named .vscode/settings.json to the project folder.

Finally, add the following code to the .vscode/settings.json file.

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

:zap: Be sure to swap INSERT_PATH_TO_CERT with the paths to the certificate and private key generated in the previous step.

:zap: You can also configure the Live Server extension settings via the VS Code Settings UI.

  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, cert, key, and passphrase values as shown below

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

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

Navigate to the JavaScript and CSS files.

Step 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 JavaScript and CSS files will be accessed and used by the Kintone App.

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

Step 5. Refresh the Kintone App to Reflect the Changes

Modify a Kintone customization file and refresh the Kintone App.

The changes should be reflected in the Kintone App immediately. :clap:

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

Conclusion

With this setup, you can verify the changes without manually uploading customization files to the Kintone App each time! :muscle: