Steps.md

Steps to Complete the Kintone x React App Setup

Outline

• Prep: Got NodeJS?
• Step 1: Git clone & Install Dependencies
• Step 2: Create a Kintone Web Database App
  • Step 2 - A: Build the Kintone App
  • Step 2 - B: Generate a Kintone API Token
  • Step 2 Video: How to Create a Kintone Database App
• Step 3: Create a .env File
• Expected Results
  • Right After npm install
  • After Creating a .env
  • After Completing the POST Section

Prep: Got NodeJS?

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!

• Here is a step-by-step Guide on Installing Node.js & npm

Step 1: Git clone & Install Dependencies

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

⚡ 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.

Step 2: Create a Kintone Web Database App

Step 2 - A: Build the Kintone 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 📺

Step 2 - B: Generate a 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 📺

Step 2 Video: How to Create a Kintone Database App

Step 3: Create a .env File

1. Using the backend/.env.example file as a template, create a .env file.
2. Then input your Kintone credentials like the following:

SUBDOMAIN = "example"
APPID = "1"
APITOKEN = "abcdefghijklmnopqrstuvwxyz"

⚠️ DO NOT DELETE THE .env.example FILE!

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

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

Then following the template, input your Kintone credentials.

.env template:

SUBDOMAIN = ""
APP_ID = ""
API_TOKEN = ""

Here is an example .env file.

SUBDOMAIN = "example"
APPID = "1"
API_TOKEN = "dXNlckBvbTpzZWNyZXQe9q3IhtcGleGFLtcGxlmN"

---

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

After Creating a .env

	Terminal 1 - Frontend	Terminal 2 - Backend
View Results	localhost:3000	localhost:5000/getData
Expected Results

After Completing the POST Section

	Terminal 1 - Frontend	Terminal 2 - Backend
View Results	localhost:3000	n/a
Expected Results		n/a