Loading a js file not in the public folder in a Twig Layout template

1

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.

2

Your browser can’t access a file that is not accessible by the network.

If you are going to need it imo is a good idea to move it into the public directory.
Anyway, my 2 cents:
Use composer for a pretty awesome autoloader, and use an automation tool like gulp/grunt/webpack… for buil your main.js / main.css files :smiley:

3 
$loader = new \ Twig_Loader_Filesystem('ivr/scripts/');
       $env->getLoader();

Yes but shouldn’t this method be able to point to another folder ?? and then in my layout.twig header : <script type="application/javascript" src="/ivr_builder/ui-bootstrap-tpls-0.13.4.js"></script>

Should be able to load it?

4

I mean I can use https://tn123.org/mod_xsendfile/ to send the file to the header as well. Just curious on why slim wont work ???

5

Server side you can access the /ivr_builder directory (so twig loads it).
But is this accessible by the network? Usually only the /public is accessible to the network.

6

Yes my htacess , documentroot is thus:
DocumentRoot “/var/www/html/ivr/public”

There are certain js files that has to be hidden from the client side.What it looks like in my network

error.png1366×768 90.5 KB

When I navigate to the url:Request URL:http://178.62.50.111/ivr_builder/ui-bootstrap-tpls-0.13.4.js it returns not found, seems twig is not loading it. I can’t think of any other way using twig to load it.

7

Why twig??

Twig is a template engine it does not load stuff to show to the webview.
It just render stuff, and as you said the document root is public.

so all this can not be accessible by network:

—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

8

I totally agree, I will just stick to using this option:

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.