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! π
Outline
- Setup Overview
- Prep
- 5 Steps to Setup the Development Environment
- Step 1. Generate a Certificate and Private Key Using the mkcert Tool
- Step 2. Enable HTTPS on the Live Server Extension
- Step 3. Launch a Local Development Server Using the Live Server Extension
- Step 4. Set the localhost URLs with HTTPS in the Kintone App's Settings
- Step 5. Refresh the Kintone App to Reflect the Changes
- Conclusion
Setup Overview
- Open the Kintone customization project in VS Code
- Live Server extension will host the files locally
- mkcert command-line tool enables HTTPS on the local development server
- Set the localhost URLs with HTTPS in the Kintone App's settings
- Kintone actively fetches the JavaScript and CSS files from the localhost
Prep
Tools we will use:
- Visual Studio Code (VS Code)
- Live Server extension
- mkcert command-line tool that generates locally-trusted development certificates
Install VS Code and the Live Server extension on your laptop.
5 Steps to Setup the Development Environment
- Generate a certificate and private key using the mkcert tool
- Enable HTTPS on the Live Server extension
- Launch a local development server using the Live Server extension
- Set the localhost URLs with HTTPS in the Kintone App's settings
- 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.
β οΈ 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 theSave 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": ""
}
}
β‘ Be sure to swap INSERT_PATH_TO_CERT
with the paths to the certificate and private key generated in the previous step.
β‘ You can also configure the Live Server extension settings via the VS Code Settings UI.
- Open the VS Code Command Palette
- Type and select
Preferences: Open Settings (UI)
- In the settings search bar, type
liveServer.settings.https
- Set the
enable
,cert
,key
, andpassphrase
values as shown below
Step 3. Launch a Local Development Server Using the Live Server Extension
- Open the VS Code Command Palette
- Type and select
Live Server: Open With Live Server
- 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:
- Navigate to the file hosted on the local development server via the browser
- Copy the URL from the browser's address bar
- Navigate to the Kintone App's JavaScript and CSS Customization settings
- Set the localhost URL with HTTPS to the desired option
- 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. π
β οΈ This is only a development environment setup.
β οΈ 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! πͺ
Got Questions? π€
Post them on the Kintone Developer Forum.
Top comments (0)