kintone開発環境構築手順

この手順書では、esbuildとTypeScriptを使ったkintoneの開発環境構築手順について説明しています。

kintoneのカスタマイズを容易にするために、URL指定でローカルファイルを参照することで、更新を即座に反映できるようにしています。URLはHTTPSである必要があるため、mkcertでローカル用の証明書を生成しています。クラス名が被るのを防ぐためにCSS Moduleも利用できます。

開発環境の雛形をgit cloneする

git clone https://github.com/ryokdy/kintone-local-https.git
cd kintone-local-https

ライブラリのインストール

npm install

証明書を生成する

certフォルダに、localhot.pemとlocalhost-key.pemのふたつのファイルを生成します。

cd cert
mkcert --key-file localhost-key.pem --cert-file localhost.pem localhost 127.0.0.1

デバッグする

npm run dev

実行すると、dist/devフォルダにファイルが生成されます。kintoneの「アプリの設定」>「JavaScript / CSSでカスタマイズ」を開いて、生成されたJavaScriptファイルとCSSファイルのURLを指定します。

JavaScriptファイル

https://localhost:8080/dist/dev/desktop.js

CSSファイル

https://localhost:8080/dist/dev/desktop.css

ビルドする

npm run build

本番環境のファイルをprodフォルダに出力します。

最終更新: