tidbcloud / vercel-fortune500-demo Goto Github PK

First, create a .env.local file in the root folder with given environment variables, you can get them in the setting of chat2query in TiDBCloud's web console:

TIDBCLOUD_URL=https://data.tidbcloud.com/api/v1beta/apps/[YOUR_DATAAPI_ENDPOINT]/v1/chat2chart
TIDBCLOUD_API_KEY=YOUR_DATA_API_KEY
TIDBCLOUD_DB=YOUR_DATABASE_NAME
TIDBCLOUD_CLUSTER_ID=YOUR_CLUSTER_ID

Install the dependencies:

npm install
# or
yarn install
# or preferred
pnpm install

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

If you want to deploy your own clone and also protect the page from being visited by the public, we also provided a simple basic access authentication solution. You'll need to add two more environment variables in your .env.local and the Vercel dashboard. Don't use a simple passphrase like below, replace admin with your own one:

BASIC_AUTH_USER=admin
BASIC_AUTH_PASSPHRASE=admin

Then re-deploy, all your pages will be protected, and they can only be accessed with correct user and passphrase!

This is a Next.js project bootstrapped with create-next-app.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Check out our Next.js deployment documentation for more details.

1. Click the Deploy to Netlify button.
2. Click Connect to GitHub and authenticate your GitHub account.
3. Fill in Repository name for your own GitHub repository.
4. Enter the environment variables:
   • TIDBCLOUD_URL: The TiDB Cloud chart2chart data api url.
   • TIDBCLOUD_API_KEY: The TiDB Cloud data api key.
   • TIDBCLOUD_DB: TiDB Cloud Database Name.
   • TIDBCLOUD_CLUSTER_ID: TiDB Cloud cluster ID.
5. Click Save & Deploy.