React Workshop by Kintone - Version 3
Thank you for attending our Kintone x React workshop!
- Get Started
- Overview of the Repo
- Kintone Web Database & Credentials
- Debugging - Let's Fix Those Problems?
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_Kintonels
README.md backend frontendInside there should be two folders (frontend & backend) and a README file.
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 |
| Install packages | npm install |
npm install |
| Run the scripts | npm start |
npm start |
| View Results | localhost:3000 | localhost:5000/getData |
| Expected Results | React App listing out records from Kintone Web Database App | Raw API response in JSON with all the records |
⚡ Note: Please ignore the package deprecation warnings ⚡
| File | Path | Purpose | Need to Modify? |
|---|---|---|---|
| index.js | frontend/src/index.js |
Nope | |
| index.html | frontend/public/index.html |
Nope | |
| App.js | frontend/src/App.js |
Yes! - Append POST | |
| getRecords.js | frontend/src/requests/getRecords.js |
Nope | |
| ListRecords.js | frontend/src/components/ListRecords.js |
Nope | |
| .env | backend/.env |
Holds your Kintone credentials | Yes! - Create |
| server.js | backend/server.js |
Setup the Express server that makes the Kintone API calls | Yes! - Append POST |
| postRecord.js | frontend/src/requests/postRecord.js |
Pass the POST API request from React to Express server | Yes! - Code it |
| InputForm.js | frontend/src/components/InputForm.js |
Appends the form that is used to create a POST API call | Yes! - Code it |
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 nor special characters
Confused? 🤔 → Check out the video below:
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 |
| Record number | Record number | recordID |
Auto-generated ID for each entry |
To generate an API Token for a Kintone App:
- Go to the Kintone App
- Go to the Gear icon ⚙️ (top right corner) > Open the App Settings page
- Click on the App Settings Tab > Click on API Token settings
- Click the
Generatebutton to generate a token - Click the
Savebutton (top left corner) to save the token setting - Finally, click the
Update Appbutton (top right corner) to implement the token setting change.
In the backend folder, create a .env file.
Follow the template below and input your Kintone credentials.
SUBDOMAIN = ""
APPID = ""
APITOKEN = ""Here is an example .env file.
SUBDOMAIN = "devevents"
APPID = "1"
APITOKEN = "dXNlckBleGFLtcGxlmNvbTpzZWNyZXQe9q3IhtcG"Here is a rundown of problems & solutions that may occur during our workshop
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:
The code in the workshop requires Node ≥ 10.16 and npm ≥ 5.6.
Confused? 🤔 → Check out our Install Node.JS on macOS & Windows and Create a Sample React App - YouTube Video!
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
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.
- Verify that you have created a
.envfile with your Kintone credentials inside thebackendfolder - Verify the Kintone credentials are correct: Subdomain, App ID, and API Token
- Verify that the Kintone App is configured as done in the Create a Kintone Web Database App section
- Verify that the Kintone Web Database App is updated after generating the Kintone API Token
Make sure you are inside the backend folder when starting the Express server.
cd ~/Downloads/React_Workshop_by_Kintone/backend
npm start(node:5379) UnhandledPromiseRejectionWarning: FetchError: request to https://.kintone.com/k/v1/records.json?app= failed, reason: getaddrinfo ENOTFOUND .kintone.com
- It looks like Kintone API credentials are missing
- Be sure to enter your Subdomain, App ID, and API Token in the
.envfile - Confused? 🤔 → Check out the 🔐 Securely input your credentials in a
.envfile section
- Enter the App's API Token in
.envfile asAPITOKEN = "" - Be sure to hit the
savebutton & theUpdate Appbutton to implement the API Token change.