Thank you for attending our Kintone x Medium workshop!
Check out meetup.com/Kintone-Developers to check out all of our upcoming events!

• Get Started
• Overview of the Repo
• Kintone Web Database & Credentials
  • 🚀 Getting your FREE Kintone Database
  • Create a Kintone Web Database App
  • Create a .env file
• Input the App ID
• Build the customization
• Quick Dive into TypeScript & Vite
  • What is TypeScript?
  • What is Vite?
  • Want to learn more?
• Debugging - Let's Fix Those Problems!
  • Errors related to .env
  • npm install command is not working
  • "npm run upload" failed?

First, let's clone the sean-kintone/publish-to-medium repo and go inside the folder.

Once you are inside the folder, let's install the dependencies!

cd Downloads

git clone https://github.com/sean-kintone/publish-to-medium

cd publish-to-medium

npm install

npm install -g @kintone/customize-uploader

bit.ly/KDP_NEW

• ⚡ Only use lowercase, numbers, & hyphens in your subdomain
• ⚠ Do not use uppercase nor special characters

Let's create a Kintone App with an article title, and text to send to Medium!

Kintone makes it easy to setup a web database with API routes for getting information. The .gif above is one minute in length!

Here are the required fields & their configurations for our workshop:

Be sure to click the Save and Activate App buttons! 💪

Confused? 🤔 → Check out the How to Create a Kintone Database App video 📺

Using the .env.example file as a temple, create a .env file that will contain your login credentials and the Kintone App's View ID.

Here is what your .env might look like:

KINTONE_BASE_URL="https://example.kintone.com"
KINTONE_USERNAME="[email protected]"
KINTONE_PASSWORD="ILoveKintone!"
VITE_AUTHOR_ID="12345abcde67890"
VITE_API_TOKEN="09876edcba54321"

.env.example is used by env-cmd to verify that .env file is correctly configured.

The Kintone Customize Uploader uses customize-manifest.json to determine where to upload the JavaScript file (which Kintone App).

{
    "app": "1",
    "scope": "ALL",
    ...
}

So to ensure the file gets uploaded to the correct App, replace the 1 with your App ID.

What is my App ID? 🤔

• Go to your Kintone App & grab the URL
• Kintone App's URL follows this template: https://<SUBDOMAIN>.kintone.com/k/<App ID>/show#record=<RECORD ID>
• Grab the number between the /k/
• Example: https://example.kintone.com/k/1/ -> The App's ID is 1

1. Build the customization in the following files inside ./src/
   • main.ts, /requests/post_api.ts, etc.
2. Run npm run build to compile your TypeScript into JavaScript output in the /dist folder.
3. Run npm run upload to upload the compiled files to your Kintone subdomain.
   • To directly upload the Kintone customization, use ./dist/KintoneCustomization.js.
   • For more details, refer to Customizing an App with JavaScript and CSS
4. Run npm run start
   • This will trigger webpack & kintone-customize-uploader to run while watching ./src/main.ts for changes
   • Input Kintone credentials if asked
5. Refresh the Kintone App to see the changes!

Good luck coding!

TypeScript (TS) is a flavor of JavaScript (JS)

• Existing JS code works inside TS files

TypeScript layers a type system on top of JavaScript

• A type system simply enforces the JS types set per variable to avoid bugs

• Set types explicitly or implicitly

  Explicit	Implicit
  using : or interfaces	using initial value
  interface User { name: string; id: number; }	let helloWorld = "Hello World";

Convert a TypeScript file to a JavaScript file by either:

• tsc command (e.g., tsc index.ts)
• JS Bundlers (e.g. Webpack, Vite)

• Type system forces programmers to be consistent -> Great when you have 1+ dev team
• Avoids TypeErrors (when a value is not of the expected type)
• Compile TS code down to a JS version you want
• Works well with IntelliSense -> Better auto-complete function

• Vite is a fast JavaScript build tool for building frontend web apps
• Vite is opinionated and comes with default settings
  • Also, highly extensible via Vite's Plugin API and JavaScript API
• Similar to Webpack but faster
  • Vite uses native ES Modules in the browser to load the code faster

• Better development experience
  • Quickly serve code to localhost with native ESM
  • Hot Module Replacement (HMR) that stays fast regardless of app size.
• Bundle code for production using Rollup
• JSX and TSX are supported by default
• Works super fast with TypeScript
  • Vite supports importing TS files out of the box
  • Vite does not perform type checking making it 20x ~ 30x faster

• Vite in 100 Seconds - YouTube
• Getting Started | Vite
• Why Vite | Vite
• Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack - YouTube
• TypeScript in 100 Seconds - YouTube
• TypeScript for the New Programmer
• TypeScript for JavaScript Programmers
• TypeScript Playground - Types vs Interfaces
• Differences Between Type Aliases and Interfaces

Here is a rundown of common problems that may occur & their solutions!

If you get one of the following error messages:

• Failed to find .env file at default paths: [./.env,./.env.js,./.env.json]
• Failed to upload JavaScript/CSS files
• KintoneRestAPIError: [520] [CB_WA01] Password authentication failed...

Then please verify that

• your .env file has been correctly configured
• your username and password for your Kintone account is correct
• you have not modified the .env.example

1. Verify the Node.js & npm versions inside the publish-to-medium folder
2. Just installed Node.js? Verify you configured Node.js versions inside the publish-to-medium folder

• Mac: nodenv local 14.5.0
• Windows: nvm use 14.5.0

@kintone/customize-uploader not working? Let's try the following:

(1) Verify that customize uploader was installed globally

• npm install -g @kintone/customize-uploader

(2) Verify that the .env login info is correct (including the password)

• ⚠️ Make sure your login info is inside .env file & NOT .env.example file!
• ⚠️ Verify that KINTONE_BASE_URL input is correctly formatted:
  • ✅ Correct Format: https://example.kintone.com
  • ❌ Incorrect Format: https://example.kintone.com/ or example.kintone.com
• ⚠️ Re-run the npm commands after saving the .env file
• ⚙️ Details: Create a .env file

(3) Verify your customize-manifest.json was updated with the correct App ID

• ⚙️ Details: Input the App ID