[SOLVED] Heroku fails to load resources for Cappuccino app (Nodejs)

Node.js web server:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static('public'));

app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});


app.get('/Volunteer', function(req, res) {
  res.sendFile(path.join(__dirname + '/Volunteer/index.html'));
});



// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

module.exports = app;

When I deploy to Heroku, it fires up fine. I can view the home page fine.

If I navigate to the address of the Cappuccino web app, it loads the standard 'loading', but goes no further.

The error console prints:

Failed to load resource: the server responded with a status of 404 (Not Found)
https://myApp.herokuapp.com/Volunteer/Frameworks/Objective-J/Objective-J.js

The server and app run fine locally, just not on Heroku. I'm not even sure how to begin here. I've searched Stack Overflow and Google for similar issues, but came out empty handed.

Here is the HTML of the Cappuccino app:

<!DOCTYPE html>
<html lang="en">
<!--
 index.html
 VolunteerSignUp

 Created by You on July 14, 2016.
 Copyright 2016, Your Company All rights reserved.
-->
    <head>
        <meta charset="utf-8">

        <!--[if lte IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
        <![endif]-->
        <!--[if gte IE 9]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <![endif]-->

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="apple-touch-icon" href="Resources/icon.png">
        <link rel="apple-touch-startup-image" href="Resources/default.png">

        <title>VolunteerSignUp</title>

        <!-- Custom javascript goes here -->
        <!-- End custom javascript -->

        <script type="text/javascript">
            OBJJ_MAIN_FILE = "main.j";
            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
            // code like the Cappuccino frameworks.
            // Uncomment or comment on the line below to change the flags
            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures", "InlineMsgSend"];

            var progressBar = null;

            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
            {
                percent = percent * 100;

                if (!progressBar)
                    progressBar = document.getElementById("progress-bar");

                if (progressBar)
                    progressBar.style.width = Math.min(percent, 100) + "%";
            }

            var loadingHTML =
                    '<div id="loading">' +
                    '    <div id="loading-text">Loading...</div>' +
                    '    <div id="progress-indicator">' +
                    '        <span id="progress-bar" style="width:0%"></span>' +
                    '    </div>' +
                    '</div>';
        </script>

        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>

        <style type="text/css">
            html, body, h1, p {
                margin: 0;
                padding: 0;
            }

            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
            #cappuccino-body {
                /* Position it absolutely so it will fill the height without content */
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;

                /* Put it at the bottom of the stack so it doesn't interfere with UI */
                z-index: 0;
            }

            #cappuccino-body .container {
                display: table;
                margin: 0 auto;
                height: 100%;
            }

            #cappuccino-body .content {
                display: table-cell;
                height: 100%;
                vertical-align: top;
            }

            #loading {
                position: relative;
                top: 35%;
            }

            #loading-text {
                height: 1.5em;
                color: #555;
                font: normal bold 36px/36px Arial, sans-serif;
            }

            #progress-indicator {
                padding: 0px;
                height: 16px;
                border: 5px solid #555;
                border-radius: 18px;
                background-color: white;
            }

            #progress-bar {
                position: relative;
                top: -1px;
                left: -1px;
                display: block;
                height: 18px;

                /* Compensate for moving the bar left 1px to overlap the indicator border */
                border-right: 1px solid #555;
                background-color: #555;
            }

            #noscript {
                position: relative;
                top: 35%;
                padding: 1em 1.5em;
                border: 5px solid #555;
                border-radius: 16px;
                background-color: white;
                color: #555;
                text-align: center;
                font: bold 24px Arial, sans-serif;
            }

            #noscript a {
                color: #98c0ff;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="cappuccino-body">
            <div class="container">
                <div class="content">
                    <script type="text/javascript">
                        document.write(loadingHTML);
                    </script>
                </div>
            </div>
            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
                <div class="container">
                    <div class="content">
                        <div id="noscript">
                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                        </div>
                    </div>
                </div>
            </noscript>
        </div>
    </body>
</html>

EDIT*** I uploaded the same project to another web hosting service and experienced the same problem. What other info can I provide to help diagnose the problem?