https://github.com/fahey252/ReactPowerBI
Sample NodeJS application to authenticate to Azure Active Directory, get a PowerBI Embed Token and embed PowerBI into a React app via proxy user.
https://github.com/fahey252/ReactPowerBI
azure javascript powerbi react
Last synced: 3 months ago
JSON representation
Sample NodeJS application to authenticate to Azure Active Directory, get a PowerBI Embed Token and embed PowerBI into a React app via proxy user.
- Host: GitHub
- URL: https://github.com/fahey252/ReactPowerBI
- Owner: fahey252
- License: mit
- Created: 2017-10-31T00:55:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-09T16:49:22.000Z (almost 8 years ago)
- Last Synced: 2024-11-27T10:35:59.231Z (11 months ago)
- Topics: azure, javascript, powerbi, react
- Language: JavaScript
- Homepage: https://fahey-react-powerbi.azurewebsites.net
- Size: 1.95 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - fahey252/ReactPowerBI - Sample NodeJS application to authenticate to Azure Active Directory, get a PowerBI Embed Token and embed PowerBI into a React app via proxy user. (JavaScript)
README
# React PowerBI Sample (Proxy User)
Sample NodeJS application to authenticate to Azure Active Directory, get a PowerBI Embed Token and embed PowerBI into a React app via proxy user.
Demo site: . Note: may load slow due to shared/free hosting app service plan.
## Getting Started
```bash
$ git clone https://github.com/fahey252/ReactPowerBI
$ npm install # using node version 9.0.0
$ npm run build # compiles frontend ReactJS code to /build
$ cp .env.sample .env # populate environment variable values.
$ node server.js
# Open web browser, go to http://localhost:3000 to see PowerBI embeded in React app
# If this fails, it is likely because values in .env files are not populated correctly.
# Recommend to run for live reload during local development
# Note: if running as same time, client may run before server causing race condition, failed request.
$ nodemon # assumed installed globally, assumes server.js is the entry point, reloads server code on save
$ npm run start-react # compiles ES6/React on file save
```
## Notes
* Proof of concept, some things done in a non-production way.
* No build process, would have a build process that runs `npm run build` and not keep build artifacts in source control
- Build artifacts kept in source control for quick deployment to Azure Web App.
* Microsoft code samples use JavaScript/jQuery which isn't ideal in a ReactJS app. Would need to break out into components.
- PowerBI JavaScript SDK
- Weak React support from Microosft:
+ Last commit over a year ago, 3 total commits, 2 contributors at the time of this writing.
* Note handling refresh tokens for the proxy user. New token is regenerate each request. Could be improved/cached.
* Could use axious client and server side instead of `request-promise`
* Can embed tiles, dashboards and reports.
* Can embed for organization or for customers
- For customers, at least one PowerBI Pro account is needed, acts as a proxy.
- User that aren't on AAD, will access PowerBI through embed token.
* Security Contexts - App workspaces (previously groups)
## Helpful Links
* Microsft's Sample PowerBI Embedded
-
* PowerBI Pricing
-
- Cost per node/number of nodes
* Sample Node Auth for when user owns data:
* PowerBI Developer Embedding Getting Started
-
* PowerBI JavaScript Embed Sample
-
* PowerBI Portal:
* Sample PowerBI React Client:
* NPM PowerBI Client:
* PowerBI JavaScript SDK:
* PowerBI React plugin (not widely contributed to):
* App Owns/User Owns Data Samples:
* React DevTools:
* Generating a PowerBI embed token:
* Registering a PowerBI App:
* Good starting points for Azure Active Directory Auth Flow:
-
-
-
-
## High Level Steps
* Create Git Repo
* Start React App
-
```bash
$ sudo npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
```
* Create Azure Web App
* Deployment Options > GitHub > Authorize
* Rename npm script `start` to `start-react`. add `start: node server.js`.
- start command conflicts, called by Azure when deploying.
* Create `server.js`
* add `express`, `dotenv`
* Added node engine version: `"engines":{"node":">= 8.8.1"}` to `package.json` for Azure.
* Move `create-react-app` related dependencies as devDependencies. (deploys faster, unecessary remotely.)
* `npm run build` before deploying to Azure to get JavaScript compiled.
* Remove `/build` directory from .gitignore (real app, setup build process)
- Wouldn't do this for a production based application.
```js
// in src/index.js un register service worker. Not needed, causes page to be white on reload due to invalid manifest.json.
import { unregister } from './registerServiceWorker';
unregister();
//registerServiceWorker();
```
* Set Application settings in Azure Web App with environment variables
* Deploy to Azure
* Embed PowerBI