|
|
4 年之前 | |
|---|---|---|
| .. | ||
| public | 4 年之前 | |
| src | 4 年之前 | |
| .env | 4 年之前 | |
| README.md | 4 年之前 | |
| package-lock.json | 4 年之前 | |
| package.json | 4 年之前 | |
| tsconfig.json | 4 年之前 | |
This projects demonstrates how you can use 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:
We wrap the web components to be able to set certain attributes/properties on the web component elements that are required by the web components.
Setup Hue to allow CORS, in your hue .ini add:
[desktop]
cors_enabled=true
Go to the example project cd tools/examples/components/sql-scratchpad
npm install
npm start
Open http://localhost:3000 to view it in the browser.
To kill it press ctrl-c in the terminal
In the SQL Scratchpad project change the "gethue" dependency in package.json to
"gethue": "file:../../../../npm_dist",
Go to the Hue root folder cd ../../../../
npm install
npm run dev-webpack-npm
Go to the example project cd tools/examples/components/sql-scratchpad
npm install
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.
npx create-react-app sql-scratchpad --template typescript"gethue": "file:../../../../npm_dist" to dependencies in package.jsonSKIP_PREFLIGHT_CHECK=true to .env (required when running inside nested Hue folder)