JavaScript Workshop - Build a React App Using Web Database ⚙️

---

Let's create a front-end React Component that exchanges the contents of a 3rd party Web Database service using Express as a proxy.

Outline

• Completed Project
• Get Started
  • Terminal 1
  • Terminal 2
• Get Your Free Kintone Database
• Workshop Steps
• Debugging
  • npm install command is not working
  • Errors related to .env
  • Errors related to Node.js & npm
  • Express Server inside backend folder not working?
  • Not seeing a highlighted TODO:?
• Completed Code
• Overview of the Repo

Completed Project

Get Started

Clone the Repo & Install Dependencies 💪

First, clone the kintone-workshops/React-x-REST-API-Workshop repo! 🚀
Then go inside the folders & install the dependencies!

⚡ Two terminal windows are required for this workshop.

Terminal 1

cd Downloads

git clone https://github.com/kintone-workshops/React-x-REST-API-Workshop

cd React-x-REST-API-Workshop

npm install

Terminal 2

cd Downloads/React-x-REST-API-Workshop

cd backend && npm install

⚠️ WARNING ⚠️

⚡ Node.js v18.16.1 or higher is required to run this workshop.
(The current LTS version is recommended)

For more information, refer to the Guide on Installing Node.js & npm {macOS & Windows}.

Open the React-x-REST-API-Workshop folder in VS Code as well:

code .

Get Your Free Kintone Database

kintone.dev/new/

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

For more information, check out the Workshop_Steps.md > B. Get Your Free Kintone Database section!

---

Workshop Steps

1. A. Get started - clone the repo & install dependencies
2. B. Get your free Kintone database
3. C. Create a .env file
4. D. Create a Kintone web database app
5. E. Generate an API token for the Kintone app
6. H. Edit server.js
7. I. Start the servers

---

---

Debugging

Let's Fix Those Problems 💪

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

npm install command is not working

1. Verify the Node.js & npm versions inside the React-x-REST-API-Workshop folder
2. Just installed Node.js? Verify you configured Node.js versions inside the React-x-REST-API-Workshop folder

• Mac:nodenv install 18.16.1 && nodenv local 18.16.1
• Windows: nvm install 18.16.1 && nvm use 18.16.1

Not the correct versions, or confused? 🤔 → Check out the Guide on Installing Node.js & npm {macOS & Windows}.

Errors related to .env

If you get one of the following error messages:

• [webpack-cli] Error: Missing environment variable: KINTONE_BASE_URL
• [webpack-cli] Error: Missing environment variable: KINTONE_PASSWORD
• [webpack-cli] Error: Missing environment variable: KINTONE_USERNAME
• [webpack-cli] Error: Missing environment variable: VIEW_ID
• [webpack-cli] TypeError: Cannot convert undefined or null to object
• Failed to find .env file at default paths: [./.env,./.env.js,./.env.json]
• 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 are correct
• you have not modified the .env.example

Errors related to Node.js & npm

Error Message:

❯ npm run start

> react-x-rest-api-workshop@1.0.0 start
> react-scripts start

sh: react-scripts: command not found

Solution:

cd React-x-REST-API-Workshop
npm install

Express Server inside backend folder not working?

Inside backend folder and trying to execute npm run start command

Error Message:

> backend@1.0.0 start
> nodemon --watch .env --watch ../frontend server.js

[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): .env ../frontend
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::50000
    at Server.setupListenHandle [as _listen2] (node:net:1740:16)
    at listenInCluster (node:net:1788:12)
    at Server.listen (node:net:1876:7)
    at Function.listen (/Users/username/Downloads/React-x-REST-API-Workshop/backend/node_modules/express/lib/application.js:635:24)
    at Object.<anonymous> (/Users/username/Downloads/React-x-REST-API-Workshop/backend/server.js:78:5)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1767:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 50000
}

Node.js v18.16.1
[nodemon] app crashed - waiting for file changes before starting...

Solution:
The important line is Error: listen EADDRINUSE: address already in use :::50000.
This means that the port 50000 is already in use.

Restart the terminal and try again.

If the error persists, let's kill the process that is using port 50000 manually.

# Find the process that is using port 50000
lsof -i tcp:50000
# Kill the process
kill -9 <PID>

For more information, refer to the How to kill server when seeing "EADDRINUSE: address already in use" post by B. Chen.

Not seeing a highlighted TODO:?

Click the Install button on the VS Code pop-up message to install TODO Highlight extension.

• 

---

Completed Code

If you want the completed code for the index.js file, you can find it here:
Solution_server.js

---

Overview of the Repo

↯ Overview of the Repo ↯

File	Purpose	Need to Modify?
package.json	Project's metadata & scripts for building and uploading the customization
.env.example	The template for the .env file
.env	Holds the Kintone login credential and View ID	Yes! - Create it
./backend/server.js	Express server that handles the Kintone API requests	Yes! Complete the code
docs/Workshop_Steps.md	Step-by-step guide that we do during the workshop