# Quick Start: VS Code Setup for Kintone Customization Development **URL:** \ **Category:** Tips & Tricks\ **Tags:** quick-start, tips, vs-code, setup\ **Created:** [June 30, 2023, 6:24am UTC](https://forum.kintone.dev/t/quick-start-vs-code-setup-for-kintone-customization-development/806 "2023-06-30T06:24:46Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Genji](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.kintone.dev/genji/32/646_2.png) [@Genji](https://forum.kintone.dev/u/Genji)\ **Post date:** [June 30, 2023, 6:24am UTC](https://forum.kintone.dev/t/quick-start-vs-code-setup-for-kintone-customization-development/806/1 "2023-06-30T06:24:46Z")
# 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)](https://code.visualstudio.com/) so your code is seamlessly synced with your Kintone App. No more manually uploading customization files to the Kintone App each time! 🙌 ## Setup Overview ![overview](https://canada1.discourse-cdn.com/flex035/uploads/kintone/original/1X/870384a21a52f6fc75f14b6c0a9968dbe67d035b.png) 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: - [Visual Studio Code (VS Code)](https://code.visualstudio.com/) - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension - [mkcert](https://github.com/FiloSottile/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 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](https://brew.sh/) → `brew install mkcert` - For Windows, use [Chocolatey](https://chocolatey.org/) → `choco install mkcert` Initialize mkcert to install a local [certificate authority (CA)](https://en.wikipedia.org/wiki/Certificate_authority). - `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](https://github.com/FiloSottile/mkcert#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](https://code.visualstudio.com/docs/editor/workspaces). - 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. ```json { "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. 1. Open the [VS Code Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_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 - ![live-server-extension-settings-updated](https://canada1.discourse-cdn.com/flex035/uploads/kintone/original/1X/a519efdcadd476e211df43376e6333ed1474b871.png) ## Step 3. Launch a Local Development Server Using the Live Server Extension 1. Open the [VS Code Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_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](https://get.kintone.help/k/en/id/040556.html) 4. Set the localhost URL with HTTPS to the desired option - ![kintone-settings-urls](https://canada1.discourse-cdn.com/flex035/uploads/kintone/original/1X/400208f2c645eb9a76b0b6b79327f04bec01b7a9.png) 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. 👏 ⚠ 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! 💪