Skip to content

Live walk-through hosting your react app on Vercel and Netlify hosting services! Compare and contrast live!

License

Notifications You must be signed in to change notification settings

kintone-workshops/host-react-app-database

Repository files navigation

Hosting Your React App with Web Database

banner.png

Live walk-through hosting your React App on Vercel and Netlify hosting services! Compare and contrast live!

Outline

Completed Project

Project demo gif

Get Started

Clone the Repo & Install Dependencies 💪

First, clone the kintone-workshops/host-react-app-database repo! 🚀
Then go inside the folder & install the dependencies!

cd Downloads

git clone https://github.com/kintone-workshops/host-react-app-database

cd host-react-app-database

npm install

Open the host-react-app-database 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
Step 1: Fill out the Kintone Developer license sign-up form Step 2: Email address will be the login name & the subdomain will be your unique link
Step 3: Check for a "Welcome to Kintone! One More Step To..." email Step 4: Log into Kintone

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


Workshop Steps


Debugging

Let's Fix Those Problems 💪

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

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:

vite build --emptyOutDir

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol 'node:'
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:782:11)
    at Loader.resolve (internal/modules/esm/loader.js:85:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
    at link (internal/modules/esm/module_job.js:50:36) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Solution:

cd host-react-app-database
npm install

npm install command is not working

  1. Verify the Node.js & npm versions inside the host-react-app-database folder
  2. Just installed Node.js? Verify you configured Node.js versions inside the host-react-app-database 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}.

(2) Verify that the .env login info is correct (including the password)

  • ⚠️ Make sure your login info is inside the .env file & NOT the .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: Step 4 - Create a .env File

(3) Verify your customize-manifest.json was updated with the correct App ID

(4) Verify that the npm run build command was run before the npm run upload

Not seeing a highlighted TODO:?

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

  • vscode-setting-extension.png

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
docs/Workshop_Steps.md Step-by-step guide that we do during the workshop

About

Live walk-through hosting your react app on Vercel and Netlify hosting services! Compare and contrast live!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published