Romain Rigaux 6c63af13f3 [docs] Small styling in demo app README il y a 4 ans
..
public fecccf040c [frontend] Add the query editor component to the SQL Scratchpad example il y a 4 ans
src 8feb5ceefa [frontend] Update the SQL Scratchpad example to use the published gethue NPM version il y a 4 ans
.env 219f34199c [frontend] Add the remaining scratchpad components to the SQL Scratchpad example il y a 4 ans
README.md 6c63af13f3 [docs] Small styling in demo app README il y a 4 ans
package-lock.json 8feb5ceefa [frontend] Update the SQL Scratchpad example to use the published gethue NPM version il y a 4 ans
package.json 8feb5ceefa [frontend] Update the SQL Scratchpad example to use the published gethue NPM version il y a 4 ans
tsconfig.json 219f34199c [frontend] Add the remaining scratchpad components to the SQL Scratchpad example il y a 4 ans

README.md

Getting Started with SQL Scratchpad

This app demonstrates how to import the Hue web components from within a React project to create a SQL Scratchpad.

It's based on a clean create-react-app project, relevant changes are:

  • gethue dependency in package.json, tested with version 4.9.3
  • "components" folder with React wrappers around the Hue web components
  • App.tsx using the React wrappers

The components are wrapped to set certain attributes/properties on elements that are required by the web components.

There are two ways to import the SQL Scratchpad:

Use the published package

  1. Setup Hue to allow CORS, in your hue .ini add:

    [desktop]
    cors_enabled=true
    
  2. Go to the example project cd tools/examples/components/sql-scratchpad

  3. npm install

  4. npm start

  5. Open http://localhost:3000 to view it in the browser.

Use your local package

  1. In the SQL Scratchpad project change the "gethue" dependency in package.json to

    "gethue": "file:../../../../npm_dist",
    
  2. Go to the Hue root folder cd ../../../../

  3. npm install

  4. npm run dev-webpack-npm

  5. Go to the example project cd tools/examples/components/sql-scratchpad

  6. npm install

  7. npm start

It will monitor changes of the related Hue sources and update npm_dist when needed, if the SQL Scratchpad project doesn't pick up the changes a restart of the app might be needed.

Base project creation steps (for reference)

  1. npx create-react-app sql-scratchpad --template typescript
  2. Add "gethue": "file:../../../../npm_dist" to dependencies in package.json
  3. Add SKIP_PREFLIGHT_CHECK=true to .env (required when using local Hue package)