npmの@oracle/create-database-appパッケージを使ってReactアプリを生成する

オラクルが提供している@oracle/create-database-appパッケージをインストールし、ReactによるサンプルのTodoアプリケーションを作成してみます。

npmのパッケージCreate Database Appについて、以下のサイトで説明されています。

https://github.com/oracle/create-database-app

https://www.npmjs.com/package/@oracle/create-database-app

作成したTodoアプリケーションは以下のように動作します。

アプリケーションはReact + Node.js + Express、それに加えてデータベースとしてOracle Databaseを使用します。Node.jsからOracle Databaseに接続するため、あらかじめ接続先を準備します。

接続先としてAutonomous Databaseまたはオンプレミスのデータベースを選べます。今回の作業では、接続先としてローカルのPCで動作しているOracle Databaseを使用します。そのため、データベースを起動した上で以下の情報を準備しておきます。

• 接続先ホスト名（例: localhost）
• 接続先ポート番号（例: 1521）
• 接続先サービス名（例：FREEPDB1）
• 接続先ユーザー名（データベース・ユーザー名）
• 接続先パスワード（上記ユーザーのパスワード）

本記事ではTodoアプリケーションが使用する表TASKSを扱うAPEXアプリも作成する予定です。そのため、接続先ユーザーとしてはAPEXワークスペースに紐づくスキーマを指定します。

以下より作業を紹介します。 本作業はmacOS Sequoia 15.5で行なっています。npmやnodeはbrew installで行いましたが、それ以外はmacOS固有の作業はないはずです。

作業に使用したnpmのバージョンは11.3.0、nodeのバージョンはv24.2.0です。

% npm -v

11.3.0

% node -v

v24.2.0

% 

パッケージ@oracle/create-database-appをインストールします。

npm install -g @oracle/create-database-app

~ % npm install -g @oracle/create-database-app

npm warn deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs

npm warn deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs

npm warn deprecated debuglog@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

npm warn deprecated npmlog@5.0.1: This package is no longer supported.

npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported.

npm warn deprecated gauge@3.0.2: This package is no longer supported.

changed 274 packages in 10s

86 packages are looking for funding

  run `npm fund` for details

~ % 

サンプル・アプリケーションを作成します。引数は指定せず、対話形式で入力することにします。

npm create @oracle/database-app

コマンドを実行するとアプリケーション名を聞かれます。入力したアプリケーション名のディレクトリが、カレント・ディレクトリに直下に作成されます。そのため、適切な親ディレクトリに移動した後に、上記のコマンド実行します。

% cd MyApps

MyApps % npm create @oracle/database-app

> npx

> create-database-app

? What would you like your application's name to be?

What would you like your application's name to be?

作成するアプリケーションの名前です。作成されるディレクトリ名になります。今回はmy-todoとします。

? What would you like your application's name to be? my-todo

? Which template would you like to use for your project?

  node-vanilla

  node-react

  node-vue

  node-jet

  node-angular

❯ node-react-todo

  ords-remix-jwt-sample

This creates a simple Todo app made with ExpressJS as the backend, React as the

frontend, and an Oracle Database connection that will be created from the

details you provide later...

Which template would you like to use for your project?

アプリケーションを作成するテンプレートを選びます。今回はコードを変更せずにアプリケーションを動作させたいので、node-react-todoを選択します。選択にはキーボードの上下矢印キーを使います。node-react-todoを選択し、Enterを入力します。

? What would you like your application's name to be? my-todo

? Which template would you like to use for your project? node-react-todo

? Which database connection type would you like to choose?

  Cloud Wallet Path

❯ Basic Connection (Protocol, Hostname, Port, Service Name / SID)

Which database connection type would you like to choose?

Autonomous Databaseの場合はCloud Wallet Path、オンプレミスの場合はBasic Connectionを選択します。本記事ではオンプレミスを想定しているため、Basic Connectionを選択し、Enterを入力します。

? What would you like your application's name to be? my-todo

? Which template would you like to use for your project? node-react-todo

? Which database connection type would you like to choose? Basic Connection 

(Protocol, Hostname, Port, Service Name / SID)

? What is your database protocol? tcp

? What is your database hostname? localhost

? What is your database port? 1521

? Which service type would you like to use? Service name

? Please enter your database service name:  freepdb1

? What's your database username? wksp_apexdev

? What's your database password? ******

データベースの接続情報として、protocol、hostname、port、service name、database username、database passwordを入力します。

以上の入力でアプリケーションmy-todoが生成されます。

MyApps % npm create @oracle/database-app

> npx

> create-database-app

? What would you like your application's name to be? my-todo

? Which template would you like to use for your project? node-react-todo

? Which database connection type would you like to choose? Basic Connection 

(Protocol, Hostname, Port, Service Name / SID)

? What is your database protocol? tcp

? What is your database hostname? localhost

? What is your database port? 1521

? Which service type would you like to use? Service name

? Please enter your database service name:  freepdb1

? What's your database username? wksp_apexdev

? What's your database password? ******

Generating database app...

   create my-todo/README.md

   create my-todo/eslintrc.cjs

   create my-todo/index.html

   create my-todo/objects.sql

   create my-todo/package.json

   create my-todo/vite.config.js

   create my-todo/public/oracle.svg

   create my-todo/src/App.css

   create my-todo/src/App.jsx

   create my-todo/src/index.css

   create my-todo/src/main.jsx

   create my-todo/src/api/rest-service.js

   create my-todo/src/assets/react.svg

   create my-todo/src/components/ToDoListFilter.jsx

   create my-todo/src/components/ToDoListInput.jsx

   create my-todo/src/components/TodoList.jsx

   create my-todo/src/components/TodoListFooter.jsx

   create my-todo/src/components/TodoListItems.jsx

   create my-todo/src/components/style.css

   create my-todo/src/images/all.png

   create my-todo/src/images/checked.png

   create my-todo/src/images/completed.png

   create my-todo/src/images/loading.gif

   create my-todo/src/images/todo.png

   create my-todo/src/images/unchecked.png

   create my-todo/src/images/uncompleted.png

   create my-todo/src/utils/utils.js

   create my-todo/.github/dependabot.yml

   create my-todo/.github/ISSUE_TEMPLATE/bug_report.yml

   create my-todo/.github/ISSUE_TEMPLATE/config.yml

   create my-todo/.github/ISSUE_TEMPLATE/feature_request.yml

   create my-todo/.github/workflows/automerge.yml

   create my-todo/.github/workflows/manualRelease.yml

   create my-todo/.github/workflows/onPushToMain.yml

   create my-todo/.github/workflows/onRelease.yml

   create my-todo/.github/workflows/test.yml

   create my-todo/.eslintrc.cjs

   create my-todo/.gitignore

   create my-todo/server/index.cjs

   create my-todo/server/routes/tasks.cjs

   create my-todo/server/utils/db/config.cjs

   create my-todo/server/utils/db/index.cjs

   create my-todo/server/utils/rest-services/tasks.cjs

   create my-todo/.env.example

   create my-todo/.env

   create my-todo/CONTRIBUTING.md

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.

npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead

npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported

npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead

npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 412 packages, and audited 413 packages in 9s

124 packages are looking for funding

  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:

  npm audit fix --force

Run `npm audit` for details.

Initialized empty Git repository in /Users/********/Documents/MyApps/my-todo/.git/

Application generated successfully. Run the following command: 

cd /Users/********/Documents/MyApps/my-todo

Please check out the README file to learn how to configurate the ORDS Concert App

MyApps % 

作成されたディレクトリに移動します。

cd my-todo

MyApps % cd my-todo

my-todo % 

ディレクトリmy-todo以下にobjects.sqlがあります。データベースに接続してobjects.sqlを実行し、表TASKSを作成します。以下ではSQLclを使用して、SQLファイルを実行しています。

sql wksp_apexdev/******@localhost/freepdb1 @objects.sql

my-todo % sql wksp_apexdev/******@localhost/freepdb1 @objects.sql

SQLcl: 金 6月 20 12:06:03 2025のリリース25.1 Production

Copyright (c) 1982, 2025, Oracle.  All rights reserved.

接続先:

Oracle Database 23ai Free Release 23.0.0.0.0 - Develop, Learn, and Run for Free

Version 23.8.0.25.04

Table TASKSは作成されました。

INDEX TASKS_PKは作成されました。

Table TASKSが変更されました。

SQL> exit

Oracle Database 23ai Free Release 23.0.0.0.0 - Develop, Learn, and Run for Free

Version 23.8.0.25.04から切断されました

my-todo % 

以上で準備は完了です。

サンプル・アプリケーションを実行して、ブラウザからTodoアプリケーションにアクセスします。

npm run dev

my-todo % npm run dev

> my-todo@1.0.0 dev

> concurrently --names server,client --prefix-colors blue,yellow --success all --kill-others 'node ./server/index.cjs' 'vite'

[server] App listening on port 3000

[client] The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

[client] 

[client]   VITE v5.4.19  ready in 272 ms

[client] 

[client]   ➜  Local:   http://localhost:5173/

[client]   ➜  Network: use --host to expose

[server] Connection pool created successfully.

[server] GET /api/tasks/ 304 - - 82.073 ms

[server] GET /api/tasks/ 304 - - 1.096 ms

クライアントはhttp://localhost:5173/で待ち受けていると表示されています。

ブラウザでこのURLにアクセスすると、Todoアプリケーションを操作することができます。

Reactのサンプル・アプリケーションは以上で完成です。

Oracle Databaseを使ったフルスタックのReactアプリの作り方を学ぶにあたって、あらかじめ動くアプリケーションがあった方が良いですし、今ならサンプルに含まれるJavaScriptのファイルをClaude CodeやOpenAI Codexに渡して機能を追加してもらうことも可能でしょう。

次に、表TASKSを操作するAPEXアプリケーションを作成してみます。

SQLワークショップのオブジェクト・ブラウザを開きます。

左ペインの表からTASKSを選択し、その他のアプリケーションの作成を実行します。

アプリケーション作成ウィザードが開きます。

デフォルトで表TASKSをソースとしたファセット検索のページと、フォーム付き対話モード・レポートのページが追加されます。

このまま、アプリケーションの作成を実行します。

作成されたアプリケーションを実行します。

対話モード・レポートとフォームを使って、表TASKSのデータを操作します。

Reactアプリも同じ表TASKSを参照しています。ページをリロードするとAPEXアプリケーションで操作したデータが反映されます。

今回の記事は以上になります。

完