-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
efeae58
commit a3fe61d
Showing
2 changed files
with
38 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,20 @@ | ||
# Looker Extension Hello World (React & Typescript) | ||
# Looker Extension Hello World (React & JavaScript) | ||
|
||
This repository demonstrates a bare bones Looker extension using Typescript. | ||
|
||
It uses [React](https://reactjs.org/) and [Typescript](https://typescriptlang.org) for writing your extension, the [React Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react) for interacting with Looker, [Looker Components](https://components.looker.com) for UI, and [Webpack](https://webpack.js.org/) for building your code. | ||
This example has been adopted from the extension-examples helloworld example. | ||
|
||
## Getting Started for Development | ||
|
||
1. Clone or download a copy of this template to your development machine, if you haven't already cloned the entire repo. | ||
1. Clone this repo. | ||
|
||
``` | ||
# cd ~/ Optional, your user directory is usually a good place to git clone to. | ||
git clone git@github.com:looker-open-source/extension-examples.git | ||
[email protected]:llooker/scooter-extension.git | ||
``` | ||
|
||
2. Navigate (`cd`) to the template directory on your system | ||
2. Navigate (`cd`) to the scooter-extension directory on your system | ||
|
||
``` | ||
cd extension-examples/react/typescript/helloworld-ts | ||
cd query-builder-ef | ||
``` | ||
|
||
3. Install the dependencies with [Yarn](https://yarnpkg.com/). | ||
|
@@ -25,93 +23,10 @@ It uses [React](https://reactjs.org/) and [Typescript](https://typescriptlang.or | |
yarn install | ||
``` | ||
|
||
> You may need to update your Node version or use a [Node version manager](https://github.com/nvm-sh/nvm) to change your Node version. | ||
4) Start the development server | ||
4. Start the development server | ||
|
||
``` | ||
yarn develop | ||
``` | ||
|
||
The extension is now running and serving the JavaScript locally at http://localhost:8080/bundle.js. | ||
|
||
5) Log in to Looker and create a new project. | ||
|
||
This is found under **Develop** => **Manage LookML Projects** => **New LookML Project**. | ||
|
||
Select "Blank Project" as your "Starting Point". This will create a new project with no files. | ||
|
||
1. The extension folder has a `manifest.lkml` file. | ||
|
||
Either drag & upload this file into your Looker project, or create a `manifest.lkml` with the same content. Change the `id`, `label`, or `url` as needed. | ||
|
||
``` | ||
project_name: "helloworld-ts" | ||
application: helloworld-ts { | ||
label: "Helloworld (TypeScript)" | ||
url: "http://localhost:8080/bundle.js" | ||
entitlements: { | ||
core_api_methods: ["me"] | ||
} | ||
} | ||
``` | ||
|
||
6. Create a `model` LookML file in your project. The name doesn't matter but the convention is to name it the same as the project— in this case, helloworld-js. | ||
|
||
- Add a connection in this model. | ||
- [Configure the model you created](https://docs.looker.com/data-modeling/getting-started/create-projects#configuring_a_model) so that it has access to the selected connection. | ||
We do this because Looker permissions data access via models— In order to grant / limit access to an extension, it must be associated with a model. | ||
|
||
7. Connect the project to Git. This can be done in multiple ways: | ||
|
||
- Create a new repository on GitHub or a similar service, and follow the instructions to [connect your project to Git](https://docs.looker.com/data-modeling/getting-started/setting-up-git-connection) | ||
- A simpler but less powerful approach is to set up git with the "Bare" repository option which does not require connecting to an external Git Service. | ||
|
||
8. Commit the changes and deploy them to production through the Project UI. | ||
|
||
9. Reload the page and click the `Browse` dropdown menu. You will see the extension in the list. | ||
|
||
- The extension will load the JavaScript from the `url` provided in the `application` definition. By default, this is http://localhost:8080/bundle.js. If you change the port your server runs on in the package.json, you will need to also update it in the manifest.lkml. | ||
- Refreshing the extension page will bring in any new code changes from the extension template, although some changes will hot reload. | ||
|
||
## Extension Entitlements | ||
|
||
Entitlements are defined in the project manifest file for the extension. | ||
|
||
Resources required by the extension (Looker API methods for example) must be defined in entitlements. This extension uses the `me` api method, as such it is defined in the entitlements. | ||
|
||
[//] TODO: List entitlement options. | ||
|
||
## Deployment | ||
|
||
The process above describes how to run the extension for development. Once you're done developing and ready to deploy, the production version of the extension may be deployed as follows: | ||
|
||
1. In the extension project directory build the extension by running `yarn build`. | ||
2. Drag and drop the generated `dist/bundle.js` file into the Looker project interface | ||
3. Modify the `manifest.lkml` to use `file` instead of `url`: | ||
|
||
``` | ||
project_name: "helloworld-ts" | ||
application: helloworld-ts { | ||
label: "Helloworld (TypeScript)" | ||
url: "http://localhost:8080/bundle.js" | ||
file: "bundle.js" | ||
entitlements: { | ||
core_api_methods: ["me"] | ||
} | ||
} | ||
``` | ||
|
||
## Notes | ||
|
||
- Webpack's module splitting is not currently supported. | ||
- This template uses Looker's [component library](https://components.looker.com) and [styled components](https://styled-components.com/). Neither of these libraries are required, and you may remove and replace them with a component library of your own choice or simply build your UI from scratch. | ||
|
||
## Related Projects | ||
|
||
- [Looker Extension SDK React](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react) | ||
- [Looker Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk) | ||
- [Looker SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/sdk) | ||
- [Looker Embed SDK](https://github.com/looker-open-source/embed-sdk) | ||
- [Looker Components](https://components.looker.com/) | ||
- [Styled components](https://www.styled-components.com/docs) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters