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

• Demo of Build
• Get Started
  • ⚡ Notes ⚡
• 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
• Debugging - Let's Fix Those Problems 💪
  • Errors related to .env
  • npm install command is not working
  • "npm run upload" failed?
  • Uncaught Error: Target container is not a DOM element
  • Errors related to Kintone Subdomain
    • How do I get my Kintone Subdomain?
    • How do I log into my Kintone account?
• Appendix
  • Files
  • Branches

First, let's download the ahandsel/Kintone_React_Search_Bar Repo and go inside the folder.

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

cd Downloads

git clone https://github.com/ahandsel/Kintone_React_Search_Bar

cd Kintone_React_Search_Bar

npm install

npm install -g @kintone/customize-uploader

⚡ React requires Node ≥ 10.16 & npm ≥ 5.6 ⚡

• Check the versions inside the React_Workshop_by_Kintone folder:
  • node -v
  • npm -v
• Not the correct versions or Confused? 🤔 → Check out the Guide on Installing Node.js & npm Doc

⚡ Note: Please ignore the package deprecation warnings ⚡

🔎 The npm install command installs the required dependencies defined in the package.json files and generates a node_modules folder with the installed modules.

Built for teamwork, designed by you

• bit.ly/KDP_signup
  • ⚠ Do NOT use Safari
  • ⚡ Accept Cookies First
  • ✅ Use Chrome & Firefox

• bit.ly/K_DevLic
  • ⚡ Only use lowercase, numbers, & hyphens in your subdomain
  • ⚠ Do not use uppercase or special characters

Let's create a Kintone App to list off your favorite mangas!

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

Then create a Custom View

• From App Settings, click on the Views tab
• Click on the Plus Button ⊕ to create a View
• Select Custom view under Visible Fields and Column Order section
• Get the View ID! (Required in .env file)
• Under HTML Code, input <div id="root"></div>
• Save!

Be sure to click 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.

This is what the .env.example looks like:

KINTONE_BASE_URL=
KINTONE_USERNAME=
KINTONE_PASSWORD=
VIEW_ID=

Here is what your .env might look like:

KINTONE_BASE_URL="https://example.kintone.com"
KINTONE_USERNAME="[email protected]"
KINTONE_PASSWORD="ILoveKintone!"
VIEW_ID="1234567"

⚠️ DO NOT EDIT NOR DELETE THE .env.example FILE!
.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": "10",
    "scope": "ALL",
    ...

So to ensure the file gets uploaded to the correct App, replace the 10 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/
   • index.html, index.js, index.css, etc.
2. Run npm run dev to generate testing builds continuously
3. Run npm run production to create a production version
   • 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/index.js for changes
   • Input Kintone credentials when asked
5. Refresh the Kintone App to see the changes!

Good luck coding! ᕙ(⇀‸↼‶)ᕗ

Here is a rundown of common problems & their solutions!

Are you getting one of the following error messages? If you get one of the following error messages, then please verify , and you have not modified the .env.example

• Failed to find .env file at default paths: [./.env,./.env.js,./.env.json]
• [webpack-cli] Error: Missing environment variable: KINTONE_BASE_URL
• [webpack-cli] Error: Missing environment variable: KINTONE_USERNAME
• [webpack-cli] Error: Missing environment variable: KINTONE_PASSWORD
• [webpack-cli] Error: Missing environment variable: VIEW_ID

Then please do the following:

1. Verify your .env file has been correctly configured! Details
2. Make sure you did NOT change the .env.example file!
   • It should still be in your project folder
   • It should NOT contain your login information

1. Verify the Node.js & npm versions inside the Kintone_React_Search_Bar folder
2. Just installed Node.js? Verify you configured Node.js versions inside the Kintone_React_Search_Bar folder

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

@kintone/customize-uploader not working? Lets 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

Verify that the Custom View (Search Bar View) has the following HTML Code:

<div id="root"></div>

This may be a bit confusing since the order matters.
You need to sign-up for Developer Program Account (Website) 🌐 BEFORE creating your Kintone Subdomain (Database) 📂.

Check out our Sign up for Kintone Developer Program & Developer License YouTube video:

You need three things to log into your Kintone account:

1. Subdomain - Unique alphanumeric & underscore text that you filled out when creating your Kintone Subdomain (Database) 📂.
2. Username (Login Name) - By default, it is your email address
3. Password - The password you set after activating your Kintone Developer License

Your Kintone Subdomain determines the URL used to access your Kintone account

• Kintone's URL follows this template: https://<SUBDOMAIN>.kintone.com/
• Example: The example subdomain leads to https://example.kintone.com/

• ⚠️ Make sure your password is correct (surprisingly a common problem)
• You can always reset the the password by clicking on the Having Trouble Logging In? link on the login page
  • Input your email & reset the password