Skip to content

Latest commit

 

History

History
35 lines (27 loc) · 2.33 KB

README.md

File metadata and controls

35 lines (27 loc) · 2.33 KB

App-Frontend

This directory provides a minimal Saas Analytics App setup with Looker Embedded via iFrame & API. Please see the Notes section for what to look out for when considering a production deployment.

Frontend Technologies

  • LookerEmbedSdk: a Javascript SDK for the setup, creation, and interacting of the embedded Looker iFrame with the parent application. Simplifies the Looker iFrame Embed Process.
  • Looker Javascript SDK: a browser based SDK for calling the Looker API from the browser directly. Leverages a CORS proxy service to exchange an access token from the server for an authenticated SDK. As it is browser based, there are less network requests required overall to fetch data.
  • ReCharts: a React wrapper on D3, providing visualization and configuration options through components. Very quick to setup with Looker API queries.
  • TailwindCSS: a modern, utility first CSS framework for styling UI.

Getting Started

To get started cd into the App-Frontend Directory & npm install all packages.

Then create a .env file and fill in the required environment variables. Examples provided below. Make sure to allowlist the domain hosting the frontend in the Looker Admin Embed page to allow for proper event messaging.

VITE_COMPANY_NAME="" // ficticous company name
VITE_EMBED_HOST="" // the domain of the parent application (*no trailing backslash*)
VITE_EMBED_THEME="" // the Looker Theme of the embedded dashboards in lightmode
VITE_EMBED_THEME_DARK="" // the Looker Theme of the embedded dashboards in darkmode
VITE_EXPLORE_ID="" // the Looker explore id to embed
VITE_LOOKERSDK_EMBED_HOST="" // the Looker host url of content being embedded (*do not include the protocal*)
VITE_LOOKER_API_HOST="" // the host url of your Looker instance (* optionally include the port ie. :443*)
VITE_LOOKER_HOST="" // the full url of your Looker instance
VITE_MARKETING_DASHBOARD_ID="" // the id of a marketing dashboard to embed for this Saas app
VITE_PBL_BACKEND_PORT="" // the backend port of the Backend Service
VITE_PBL_CLIENT_PORT="" // the backend port of the Frontend Service
VITE_SALES_DASHBOARD_ID="" // the id of a sales dashboard to embed for this Saas app

Next following the modules below to work through implementing a Looker API based Embed & an iFrame based Embed.

Looker API [coming soon]

Looker iFrame [coming soon]