power bi java script API - Finally have access tokens but no staticReportUrl

I have spent a good amount of time trying to properly embed a report using the javascript API, as far as I know the js API is the only way to get interactivity within embedded reports which is necessary for the use of external filters or printing. I think I have all the pieces of the puzzle here but it really seems as though the whole process is a lot more complicated than it needs to be. Why can I not just manage all of my workspaces, reports, accesstokens etc from within azure portal?

This is the process I have followed thus far:

Azure: create a workspace collection and a dataset, note down access keys and workspace ID credentials.

https://github.com/Azure-Samples/power-bi-embedded-integrate-report-into-web-app

PowerBI Embedded C# CLI (mvc sample): Create a workspace within the workspace collection using noted credentials from azure and import a pbix file into the newly created workspace, this generates an import ID which is really your report ID.

https://github.com/Microsoft/PowerBI-Cli

PowerBI Master-CLI (because one CLI program just isnt enough): Install node and NPM and then install the powerBI-Master-CLI project from github using npm.  Use the create-embed-token command along with the workspace collection credentials, you will need the report ID generated in the other cli program. This generates an access token for the report.

https://github.com/Microsoft/PowerBI-JavaScript

PowerBI Javascript API embedded sample code: The examples here wont work until the script sources and stylesheet references are fiddled with, it then loads with the standard salesreport pbix sample report. This is defined as 'staticReportURL' in the file 'index.js'.

Fetch(staticReportUrl): fetches a container 'embedConfig' which contains all the credentials and access token necessary to fetch the report from the azure service and display it on the page. 

  fetch(staticReportUrl)
    .then(function (response) {
      if (response.ok) {
        return response.json()
          .then(function (embedConfig) {
            staticReport = powerbi.embed($staticReportContainer.get(0), embedConfig);
          });
      }
      else {
        return response.json()
          .then(function (error) {
            throw new Error(error);
          });
      }
    });

In powerbi.js

	    function Embed(service, element, config) {
	        var _this = this;
	        this.allowedEvents = [];
	        Array.prototype.push.apply(this.allowedEvents, Embed.allowedEvents);
	        this.eventHandlers = [];
	        this.service = service;
	        this.element = element;
	        // TODO: Change when Object.assign is available.
	        var settings = utils.assign({}, Embed.defaultSettings, config.settings);
	        this.config = utils.assign({ settings: settings }, config);
	        this.config.accessToken = this.getAccessToken(service.accessToken);
	        this.config.embedUrl = this.getEmbedUrl();
	        this.config.id = this.getId();
	        this.config.uniqueId = this.getUniqueId();
	        var iframeHtml = "<iframe style=\"width:100%;height:100%;\" src=\"" + this.config.embedUrl + "\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>";
	        this.element.innerHTML = iframeHtml;
	        this.iframe = this.element.childNodes[0];
	        this.iframe.addEventListener('load', function () { return _this.load(_this.config); }, false);
	    }

Here is where I am at a loss with how to display my own reports? I have a small novel full of id's access tokens and security keys but now I need to put it into a report URL, is this through azure? what am I missing?

If anyone can offer some advice or guidance it would be sincerely appreciated for myself and the others I have seen are struggling with this.