I'm following the Autodesk Forge Step-by-step tutorial found at learnforge.autodesk.io and using the NodeJS option.
I'm currently in the final "Deployment" part and decided to use Heroku. The Dashboard extension works very well when the app is run via local machine but doesn't display when run via Heroku.
Tried following Autodesk Forge Extensions topic but it didn't work for me.
Edit:
I did a checkup via Heroku CLI for the actual files on Heroku and the files and all other paths are exact the same as on local machine. By the way, I'm also using the free version of Heroku, so could it be the reason?
Chrome browser console shows the following errors:
My index.html is:
<!DOCTYPE html>
<html>
<head>
<title>View Models - Autodesk Forge</title>
<meta charset="utf-8" />
<link
rel="shortcut icon"
href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico"
/>
<!-- Common packages: jQuery, Bootstrap, jsTree -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css"
/>
<!--Chart JS packages-->
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"
/>
<!-- Autodesk Forge Viewer files -->
<link
rel="stylesheet"
href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
type="text/css"
/>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<!-- this project files -->
<link href="css/main.css" rel="stylesheet" />
<script src="js/ForgeTree.js"></script>
<script src="js/ForgeViewer.js"></script>
<!-- Autodesk Forge Viewer HandleSelectionExtension -->
<script src="js/HandleSelectionExtension.js"></script>
<!-- Autodesk Forge Viewer Dashboard Extension -->
<script src="js/Dashboard/Dashboard.js"></script>
<script src="js/Dashboard/DashboardPanel.js"></script>
<script src="js/Dashboard/PanelBarChart.js"></script>
<script src="js/Dashboard/PanelPieChart.js"></script>
</head>
<body>
<!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav left">
<li>
<a href="http://developer.autodesk.com" target="_blank">
<img
alt="Autodesk Forge"
src="//developer.static.autodesk.com/images/logo_forge-2-line.png"
height="20"
/>
</a>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
<div class="container-fluid fill">
<div class="row fill">
<div class="col-sm-4 fill">
<div class="panel panel-default fill">
<div class="panel-heading" data-toggle="tooltip">
Buckets & Objects
<span
id="refreshBuckets"
class="glyphicon glyphicon-refresh"
style="cursor: pointer"
></span>
<button
class="btn btn-xs btn-info"
style="float: right"
id="showFormCreateBucket"
data-toggle="modal"
data-target="#createBucketModal"
>
<span class="glyphicon glyphicon-folder-close"></span> New
bucket
</button>
</div>
<div id="appBuckets">tree here</div>
</div>
</div>
<div class="col-sm-8 fill">
<div id="forgeViewer"></div>
</div>
</div>
</div>
<form id="uploadFile" method="post" enctype="multipart/form-data">
<input
id="hiddenUploadField"
type="file"
name="theFile"
style="visibility: hidden"
/>
</form>
<!-- Modal Create Bucket -->
<div
class="modal fade"
id="createBucketModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Cancel"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
</div>
<div class="modal-body">
<input type="text" id="newBucketKey" class="form-control" /> For
demonstration purposes, objects (files) are NOT automatically
translated. After you upload, right click on the object and select
"Translate". Bucket keys must be of the form [-_.a-z0-9]{3,128}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" id="createNewBucket">
Go ahead, create the bucket
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Oh, wizards of the codesmos, please heed my call for I need aid.
