Loading a js file not in the public folder in a Twig template - twig

Question

My file structure looks like this:
---public(Documentroot folder, where all my css,js, images loads from)
---models
---modules {all my modules customer, db_management e.t.c)
---scripts
|---ivr_builder
|------ui-bootstrap-tpls-0.2.js
--twig_templates {All my ta}
|---layout.twig
In my index.php file, I have this:
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
require '../vendor/autoload.php';
spl_autoload_register(function ($classname) {
require "../models/" . $classname . ".php";
});
$config['displayErrorDetails'] = false;
$app = new \Slim\App(["settings" => $config]);
$container = $app->getContainer();
// Register component on container
$container['view'] = function ($container) {
$view = new \Slim\Views\Twig(
'/var/www/html/ivr/twig_templates', ['cache' => false]);
$env = $view->getEnvironment();
$lexer = new Twig_Lexer($env, array(
'tag_comment' => array('{#', '#}'),
'tag_block' => array('{%', '%}'),
'tag_variable' => array('[[', ']]'),
'interpolation' => array('#{', '}'),
));
$env->setLexer($lexer);
$loader = new \ Twig_Loader_Filesystem('ivr/scripts/ivr_builder/ui-bootstrap-tpls-0.13.4.js');
$env->getLoader();
return $view;
};
Then in my browser, I get this error:
Name | Status
---------------------------- | ------
angular-aside.js | 200
jquery.js | 200
ui-bootstrap-tpls-0.1.3.4.js | 500
My layout.swig header looks like this:
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if page_title is defined and page_title is not null ? page_title: 'Log in' %}
{% endif %}
<link rel='stylesheet' href='/css/bootstrap.css'/>
<link rel='stylesheet' href='/js/libraries/angular-aside/angular-aside.css'/>
<link rel="stylesheet" href="/js/libraries/angular-notify-master/styles/css/angular-notify-texture.css" id="notifyTheme">
<link rel='stylesheet' href='/css/ivr_builder.css'/>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<script type="application/javascript" src="/js/libraries/angular.js"></script>
<script type="application/javascript" src="/js/libraries/angular-animate.min.js"></script>
<script type="application/javascript" src="/scripts/ivr_builder/ui-bootstrap-tpls-0.13.4.js"></script>
<script type="application/javascript" src="/js/libraries/angular-aside/angular-aside.js"></script>
<script type="application/javascript" src="/js/libraries/angular-notify-master/scripts/dist/angular-notify.js"></script>
<script type="application/javascript" src="/js/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
[[top_bar]]
Please any suggestion on how why its not loading please on the browser.

Answer 1

I can easily use xsendfile to load it:
Sending files
Sending a file with xsendfile is very straightforward:
<?php
//We want to force a download box with the filename hello.txt
header('Content-Disposition: attachment;filename=hello.txt');
//File is located at /home/username/hello.txt
header('X-Sendfile: /home/username/hello.txt');
You could omit the first header, in which case the browser would not necessarily show a download file dialog. Also, the X-Sendfile header will not show up in the user’s browser, and they will never see the real location of the file they received.
You will not need to send a Content-Length header, as Apache will take care of that for you. Also found this on Slim:
XSendFile On
XSendFilePath "/path/to/directory/containing/js/files"
And in your Slim application route callback, set the X-SendFile header with the absolute path to a file within the file path specified above:
$app->get('/get-file', function () use ($app) {
$res = $app->response();
$res['X-SendFile'] = '/path/to/directory/containing/js/files/foo.js';
});