Skip to content

Let's create a front-end React Component that exchanges Kintone data using Express as a proxy.

License

Notifications You must be signed in to change notification settings

ahandsel/React_Workshop_by_Kintone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React Workshop by Kintone - Version 3

Overview of the Repo

File Path Purpose Need to Modify?
πŸ“— [README.md] README.md Notes on how to configure this Kintone x React App setup Nope
πŸ“• Slides.pdf Slides.pdf Slides for the workshop Nope
πŸ“• Install_NodeJS.md docs/Install_NodeJS.md Step-by-step guide on how to install NodeJS & npm Nope
πŸ“• Steps.md docs/Steps.md Step-by-step guide on how to setup the Kintone x React App Nope
πŸ“• Debugging_Log.md docs/Debugging_Log.md Common bugs & its solutions for this workshop Nope
πŸ“• Change_FieldCodes.md docs/Change_FieldCodes.md Guide on how to modify this codebase to use your own field codes. Nope
index.js frontend/src/index.js Renders React code & passes it to index.html; ReactDOM.render(...); Nope
index.html frontend/public/index.html Homepage of the React App; <div id="root"></div> Nope
App.js frontend/src/App.js Parent component - Combines the list & form components Yes! - Append POST
getRecords.js frontend/src/requests/getRecords.js Fetches Kintone records, transforms response, & returns array of list items Nope
ListRecords.js frontend/src/components/ListRecords.js List component - Creates a list from the list items array Nope
.env.example backend/.env.example Template for .env file that holds your Kintone credentials Yes! - Rename
server.js backend/server.js Sets up the Express server that routes API requests from the frontend to Kintone Yes! - Append POST
postRecord.js frontend/src/requests/postRecord.js Passes the POST API request from React to Express server Yes! - Code it
InputForm.js frontend/src/components/InputForm.js Form component - Create a form that submits a POST request Yes! - Code it

Let's POST Data to a Web Database From a React Component

Thank you for attending our Kintone x React workshop!

Outline

Get Started

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

cd Downloads

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

cd React_Workshop_by_Kintone
ls

README.md   Slides.pdf   backend   frontend

Inside there should be two folders (frontend & backend) and a README file & Slides PDF.

Open the React_Workshop_by_Kintone folder in VS Code

code .

Let's open a terminal per folder.
Then inside the folders, download the required packages with npm install.

Terminal 1 - Frontend Terminal 2 - Backend
Go inside the folder cd ~/Downloads/React_Workshop_by_Kintone/frontend cd ~/Downloads/React_Workshop_by_Kintone/backend
What is inside? Code for the React App Code for the Express server
Install packages npm install npm install
Prep Tasks Rename .env.example file to .env beforehand
To run the scripts npm start npm start

⚑ Notes ⚑

⚑ 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 Section

⚑ Note: Please ignore the package deprecation warnings ⚑

πŸ”Ž The npm install command installs the required dependencies defined in the package.json files (in both the frontend & backend folders) and generates a node_modules folder with the installed modules.

Kintone Web Database & Credentials

Built for teamwork, designed by you!

πŸš€ Getting your FREE Kintone Database

bit.ly/KDP_NEW

  • ⚑ Only use lowercase, numbers, & hyphens in your subdomain
  • ⚠ Do not use uppercase nor special characters
SignUp-1.png SignUp-2.png

Create a Kintone Web Database App

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

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

Field Type Field Name Field Code Note
Text Title title The manga's title
Text Author author The manga's author

Confused? πŸ€” β†’ Check out the How to Create a Kintone Database App video πŸ“Ί

Kintone API Token

To generate an API Token for a Kintone App:

  1. Go to the Kintone App
  2. Go to the Gear icon βš™οΈ (top right corner) > Open the App Settings page
  3. Click on the App Settings Tab > Click on API Token settings
  4. Click the Generate button to generate a token
  5. Click the Save button (top left corner) to save the token setting
  6. Finally, click the Update App button (top right corner) to implement the token setting change.

Confused? πŸ€” β†’ Check out the Get the API Token video clip πŸ“Ί

πŸ“Ί How to Create a Kintone Database App | Video

How to Create a Kintone Database App YouTube Thumbnail

πŸ” Securely input your credentials in a .env file

In the backend folder, rename the .env.example to .env!

Then following the template, input your Kintone credentials.

.env template:

SUBDOMAIN = ""
APPID = ""
APITOKEN = ""

Here is an example .env file.

SUBDOMAIN = "example"
APPID = "1"
APITOKEN = "dXNlckBleGFLtcGxlmNvbTpzZWNyZXQe9q3IhtcG"

Expected Results

Here are the expected results after running the npm start in both the terminals.

Right After npm install

Terminal 1 - Frontend Terminal 2 - Backend
View Results localhost:3000 On the Terminal
Expected Results React_v3_img/Terminal_1_A.png React_v3_img/Terminal_2_A.png

After Creating a .env

Terminal 1 - Frontend Terminal 2 - Backend
View Results localhost:3000 localhost:5000/getData
Expected Results React_v3_img/Terminal_1_B.png React_v3_img/Terminal_2_B.png

After Completing the POST Section

Terminal 1 - Frontend Terminal 2 - Backend
View Results localhost:3000 n/a
Expected Results React_v3_img/Terminal_1_C.png n/a

Want the Slide Deck?

Check it out at Slides.pdf


Guide on Installing Node.js & npm

Check if you already have Node.js or npm

React requires Node β‰₯ 10.16 & npm β‰₯ 5.6
Go inside the React_Workshop_by_Kintone folder.

$ node -v
$ npm -v

If Node & npm are missing, let's install them!

Options:

macOS with nodenv

We recommend installing Node.js using nodenv to manage node versions. This allows your computer to have a specific Node.js version per project.

⚠️ Remove any existing installations of Node.js before installing nodenv! ⚠️
Having different Node.js installations can lead to conflict issues.

Step 1: Install nodenv with Homebrew

Update Homebrew brew update && brew upgrade
Install nodenv brew install nodenv

Step 2: Set up nodenv shell integration

Run the initialization command nodenv init
Append the following line into the shell's rc/profile eval "$(nodenv init -)"
For Zsh users For Bash users
echo 'eval "$(nodenv init -)"' >> ~/.zshrc echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
cat < ~/.zshrc cat < ~/.bash_profile

Step 3: Implement the changes

Close & open a new Terminal window for the changes to take place.

Optional: Verify that nodenv is properly set up using nodenv-doctor script.

  • For those using Z shell (Zsh) shell:

    curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
  • Expected result:

    Checking for `nodenv' in PATH: /usr/local/bin/nodenv
    Checking for nodenv shims in PATH: OK
    Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 3.0.22-4-g49c4cb9)
    Counting installed Node versions: none
      There aren't any Node versions installed under `~/.nodenv/versions'.
      You can install Node versions like so: nodenv install 2.2.4
    Auditing installed plugins: OK

Step 4: Install Node.js inside the React Workshop folder (React_Workshop_by_Kintone)

  • Now you're ready to install specific Node.js versions!

  • Inside React_Workshop_by_Kintone folder, install Node.js version 14.5.0:

    cd React_Workshop_by_Kintone/
    
    nodenv install 14.5.0
    
    nodenv local 14.5.0

Alright! Your Mac is now armed with Node.js!

Download the required packages by going opening a terminal inside the frontend folder & backend folder & running the npm install command!


Windows with nvm-windows

The following steps are straight from the Microsoft Docs on Set up NodeJS on native Windows. We recommend installing and managing Node.js with nvm-windows

⚠️ Remove any existing installations of Node.js before installing nvm-windows! ⚠️
Having different Node.js installations can lead to conflict issues.

Step 1: Go to the windows-nvm's latest release.

Step 2: Download the nvm-setup.zip file for the most recent release.

Step 3: Once downloaded, open the zip file, then open the nvm-setup.exe file.

Step 4: The Setup-NVM-for-Windows installation wizard will walk you through the setup steps, including choosing the directory where both nvm-windows and Node.js will be installed.

  • install-nvm-for-windows-wizard.png

Step 5: After the installation is complete, open PowerShell & enter nvm ls

  • nvm ls lists out installed Node versions (should be none at this point)
  • windows-nvm-powershell-no-node.png

Step 6: Install Node.js inside the React Workshop folder (React_Workshop_by_Kintone)

  • Now you're ready to install specific Node.js versions!

  • Inside React_Workshop_by_Kintone folder, install Node.js version 14.5.0:

    cd .\Documents\React_Workshop_by_Kintone
    
    nvm install 14.5.0
    
    nvm use 14.5.0

Alright! Your Windows is now armed with Node.js!

Download the required packages by going opening a terminal inside the frontend folder & backend folder & running the npm install command!

πŸ“Ί Installing Node.js | Video

Installing Node.js & Create a New React App YouTube Thumbnail


Debugging - Let's Fix Those Problems πŸ’ͺ

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

npm install command is not working

  1. Verify the Node.js & npm versions inside the React_Workshop_by_Kintone folder
  2. Just installed Node.js? Verify you configured Node.js versions inside the React_Workshop_by_Kintone folder
  • Mac: nodenv local 14.5.0
  • Windows: nvm use 14.5.0

How do I get my Kintone Subdomain?

It might be a bit confusing since 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:

  • https://youtu.be/Gzz8SbTuoFg

React not updating after updating server.js?

After making changes to server.js, be sure to restart the Express server On the Terminal 2 - backend!

  • Stop the server: ctrl + c
  • Start the server: npm start

Then reload the browser showing the React App: localhost:3000

Error from Terminal 2 - backend?

Do you see an error on .../React_Workshop_by_Kintone/backend/node_modules/node-fetch/lib/index.js:272 like the following?

return Body.Promise.reject(new FetchError(`invalid json response body at ${_this2.url} reason: ${err.message}`, 'invalid-json'));
                           ^
FetchError: invalid json response body at https://r.kintone.com/notfound/subdomain.html reason: Unexpected token < in JSON at position 0
    at /Users/g001494/Downloads/React_Workshop_by_Kintone/backend/node_modules/node-fetch/lib/index.js:272:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /Users/g001494/Downloads/React_Workshop_by_Kintone/backend/server.js:43:24 {
  type: 'invalid-json'
}

This error is related to your Kintone credentials.

  1. Verify that you have created a .env file with your Kintone credentials inside the backend folder
  2. Verify the Kintone credentials are correct: Subdomain, App ID, and API Token
  3. Verify that the Kintone App is configured as done in the Create a Kintone Web Database App section
  4. Verify that the Kintone Web Database App is updated after generating the Kintone API Token

No response when starting the Express server?

  1. Make sure you are inside the backend folder when starting the Express server.
    • cd ~/Downloads/React_Workshop_by_Kintone/backend
    • npm start
  2. Verify that you have renamed .env.example to .env
    • Be sure to enter your Subdomain, App ID, and API Token in the .env file

Got a UnhandledPromiseRejectionWarning error?

(node:5379) UnhandledPromiseRejectionWarning: FetchError: request to https://.kintone.com/k/v1/records.json?app= failed, reason: getaddrinfo ENOTFOUND .kintone.com

Got a GAIA_IA02 error?

  • Enter the App's API Token in .env file as APITOKEN = ""
  • Be sure to hit the save button & the Update App button to implement the API Token change.

About

Let's create a front-end React Component that exchanges Kintone data using Express as a proxy.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published