|
|
@@ -1,6 +1,6 @@
|
|
|
# Getting Started with SQL Scratchpad
|
|
|
|
|
|
-This projects demonstrates how you can use the Hue web components from within a React project to
|
|
|
+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:
|
|
|
@@ -9,23 +9,28 @@ It's based on a clean create-react-app project, relevant changes are:
|
|
|
- "components" folder with React wrappers around the Hue web components
|
|
|
- App.tsx using the React wrappers
|
|
|
|
|
|
-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.
|
|
|
+The components are wrapped to set certain attributes/properties on elements that are required by the web components.
|
|
|
|
|
|
-## To run this project
|
|
|
+There are two ways to import the SQL Scratchpad:
|
|
|
+
|
|
|
+- from the Hue package https://www.npmjs.com/package/gethue
|
|
|
+- from your local Hue repository (when developing above package)
|
|
|
+
|
|
|
+
|
|
|
+## Use the published package
|
|
|
|
|
|
1. Setup Hue to allow CORS, in your hue .ini add:
|
|
|
```
|
|
|
[desktop]
|
|
|
- cors_enabled=true
|
|
|
+ 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](http://localhost:3000) to view it in the browser.
|
|
|
|
|
|
-To kill it press `ctrl-c` in the terminal
|
|
|
|
|
|
-## To use this project while developing the Hue NPM package,
|
|
|
+## Use your local package
|
|
|
|
|
|
1. In the SQL Scratchpad project change the "gethue" dependency in `package.json` to
|
|
|
```
|
|
|
@@ -41,8 +46,10 @@ To kill it press `ctrl-c` in the terminal
|
|
|
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 running inside nested Hue folder)
|
|
|
+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)
|
|
|
+
|