This application contains examples of embedding Looker. It is a React application that uses the Looker Embed SDK and Components. It requires running a backend application to handle API calls safely. These applications are tightly coupled. There is a node and java version of the backend application.
This is intended to be an example application, and shows many different ways of embedding Looker in another site. It demonstrates several similar ways to inclue a dashboard or visualization, and all of these techniques are valid. The examples that this application uses come from a 'data block' provided by Looker, using a public data set.
Embedding Looker into a site can involve showing Looker content directly, and/or using the Looker API to interact with Looker. An embedding website requires hosting, and usually requires a user login. For companies who don't yet have non-public websites, consider the Looker Extension Framework instead of creating a new website.
The frontend server (from this repository) serves a static web site. It relies on a backend server (node or java examples provided) to communicate securely with Looker. To show Looker Dashboards or Looks, the frontend requests a Signed SSO URL from the backend server. This URL is then added to an iframe on the site. Inside the iframe, the dashbaord or Look is served directly from the Looker server.
The frontend server will handle user authentication, navigation, and rendering everything except Looker content. In most cases, the frontend uses an iframe (inline frame element) to set space aside for Looker content. Within the iframe, Looker renders and controls the content. To investigate where these pieces are defined in the code, investigate these files:
- html entry point (src/index.js)
- menu (src/App.js)
- routing (src/App.js)
- dashboard embedding (src/components/EmbedDashboard)
- explore embedding (src/components/EmbedExplore)
- query embedding (src/components/EmbedQuery)
- embedding multiple iframes (src/components/EmbedTwoIframes)
- Implementing download button (src/components/EmbedDashboardDownload)
- Implementing filters outside of iFrame using Looker component library (src/components/EmbedDashboardWFilters)
- Implementing schedule button outside of iframe (src/components/EmbedDashboardEvents)
- Implementing start and Stop button outside of iframe (src/components/EmbedDashboardEvents)
- Capturing callbacks on user interactions of embedded content (src/components/EmbedDashboardEvents)
- Ability to adjust tiles on embedded dashboards (src/components/EmbedDashboardLayout)
- Hiding tiles
- Adjusting the colors
- Looker Visualization Components (src/components/VizComponent)
This application relies heavily on Looker Components. The Looker Components library allows developers to quickly replicate the polished Looker user experience. This application uses UI Components in many places. It also contains examples of the new Visualization Components in the Visualization Component file
You need administartive access to a Looker instance to embed Looker.
This frontend example uses a pre-defined set of Looker dashboards and explores, made available through a public Looker block that can be added to your Looker instance.
If you already have a connection to Google BigQuery configured in your Looker instance, please skip to step 3 below.
- Start a free trial of GCP
- Sign up for a free trial
- This requires entering payment information, but you won't be charged unless you sign up for a paid account.
- Create a new BigQuery database
- Visit the Bigquery site and click Try BigQuery free
- This will guide you through the creation process
- Sign up for a free trial
- Create a connection to BigQuery, create a new one
- Create a service account with access to the Google project and download the JSON credentials certificate.
- Create a temporary dataset for storing persistent derived tables.
- Set up the Looker connection to your database.
- Use the public_datasets schema
- Enable Persistent Derived Tables when configuring the connection
- Test the connection.
- Install the ASC Demographic Data via the marketplace in your looker instance
- In your Looker instance, click the Marketplace icon in the upper right hand corner
- Click the Models menu icon on the left
- Click on ASC Demographic Data
- Click Install
- When prompted, choose to install using the BigQuery connection from step 2
- Once installed, you can view the dashboard in Looker with the context
/embed/dashboards/data_block_acs_bigquery::acs_census_overview
In Looker, navigate to the Admin -> Platform -> Embed configuration page. Add the entry 'https://localhost:3001' to the Embed Domain Allowlist. If you are running the application on an app server, add that server's URI as well. If this URI is misspelled, or has a trailing '/', you will have CORS issues and the app will not function properly.
Before using the frontend server, you'll need to install it.
From the root folder (./Frontend), run:
yarn install
These can be set in a .env file in the root project directory (./Frontend). In production systems, they are often set in the environment directly using export PBL_CLIENT_PORT=3001, or similar OS-specific commands.
PBL_CLIENT_PORT=3001 # Note different port from backend
API_HOST=http://localhost:3000
LOOKER_HOST=https://helloworld.looker.com
LOOKER_API_HOST=https://helloworld.looker.com:19999
LOOKERSDK_EMBED_HOST=https://example.looker.com
For most installations, the LOOKER_HOST will be the same as the LOOKERSDK_EMBED_HOST variable. The LOOKER_API_HOST is usually the same, but with port 19999.
yarn dev
Follow directions in the backend repository examples provided (node or java)
5. Access frontend https://localhost:3001/embed-dashboard
Change the port from 3001 if you set a different PBL_CLIENT_PORT environment variable
Instead of running this locally, use Google AppEngine to run it in the cloud. Follow the directions in the backend repository README (node or java)
See CONTRIBUTING.md for details.
Apache 2.0; see LICENSE for details.
This project is not an official Google project. It is not supported by Google and Google specifically disclaims all warranties as to its quality, merchantability, or fitness for a particular purpose.