Looker Extension Hello World (JavaScript)

This repository demonstrates a bare bones Looker extension using javascript

It uses React and TypeScript for writing your extension, the React Extension SDK for interacting with Looker, and Webpack for building your code.

Getting Started for Development

1. Clone or download a copy of this template to your development machine

2. Navigate (cd) to the template directory on your system

3. Install the dependencies with Yarn.

   yarn install
   

   You may need to update your Node version or use a Node version manager to change your Node version.

4. Start the development server

   yarn start
   

   THe extension is now running and serving the JavaScript 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 project 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-js"
   application: helloworld-js {
    label: "Helloworld (JavaScript)"
    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.

• Add a connection in this model.
• Configure the model you created so that it has access to the selected connection.

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
• 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/
• Reloading 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.

Deployment

The process above describes how to develope the extension. Once development has completed, the production version of the extension maybe 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-js"
   application: helloworld-js {
    label: "Helloworld (JavaScript)"
    file: "bundle.js"
    entitlements: {
    core_api_methods: ["me"]
   }
   

Notes

• Webpack's module splitting is not currently supported.
• The template uses Looker's component library and styled components. Neither of these libraries are required so you may remove and replace them with a component library of your own choice,

Related Projects

• Looker React extension template
• Looker React/Redux extension template
• Looker extension SDK
• Looker extension SDK for React
• Looker SDK
• Looker Embed SDK
• Looker Components
• Styled components