PHP-View
PHP-View copied to clipboard
slimphp
Error trying to load javascript scripts by it src attribute
Hi!, I am new in PHP and I try to create an API with Slim, but when I try to load a javascript file inside a template by <script src="dist/file.js"></script>, it launch an error: Uncaught SyntaxError: Unexpected token <.
My project structure is:
slim-tutorial
├── public
| ├── dist
| | └── learning.js
| └── index.php
├── templates
| └── index.html
├── vendor
├── composer.json
└── composer.lock
My public/index.php code is:
<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
require __DIR__.'/../vendor/autoload.php';
$app = new \Slim\App(['settings' => $config]);
$container = $app->getContainer();
$container['view'] = new \Slim\Views\PhpRenderer(__DIR__.'/../templates/');
$app->get('/', function(Request $request, Response $response) {
$response = $this->view->render($response, 'index.html');
return $response;
});
$app->run();
?>
My templates/index.html code is:
<!DOCTYPE html>
<html lang="es">
<head>
<base href="./">
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<section id="root"></section>
<script type="text/javascript" src="dist/learning.js"></script>
<!-- <script type="text/javascript">
// With this code it works, but if I use src attribute in script tag, it crash
(function() {
var root = document.getElementById('root');
var chidlInput = document.createElement('input');
chidlInput.setAttribute('id', 'name');
root.appendChild(chidlInput);
})();
</script> -->
</body>
</html>
And my public/dist/learning.js code is:
(function() {
var root = document.getElementById('root');
var chidlInput = document.createElement('input');
chidlInput.setAttribute('id', 'name');
root.appendChild(chidlInput);
})();
My templates/index.html and public/dist/learning.js codes is to test, in my final project I will use Angular 5 to develop front-end.
I checked this tutorial about Angular and Slim but it not works.
I tried with PHP 5.6 and PHP 7.2 but both launch the same error.
To run this project I use php -S localhost:8080 -t public public/index.php, because I have installed PHP without Apache or Nginx.
I work on Windows 10.
Regards.
Recheck how you're referring to the js file from the template. Looks like the path is incorrect in
<script type="text/javascript" src="dist/learning.js"></script>
Thanks for your response, how can I refer Javascript files? With NodeJS and ExrepssJS (I usually work with this technologies) it works. Regards.
Please use the browser's console to inspect the exact contents of the dist/file.js that's being sent. I suspect it's HTML rather than the file contents.
If you are using PHP builtin server, I believe you need to return false inside public/index.php when the request belongs to a static file, as in this example:
if (PHP_SAPI == 'cli-server') {
$url = parse_url($_SERVER['REQUEST_URI']);
$file = __DIR__ . $url['path'];
// check the file types, only serve standard files
if (preg_match('/\.(?:png|js|jpg|jpeg|gif|css)$/', $file)) {
// does the file exist? If so, return it
if (is_file($file))
return false;
// file does not exist. return a 404
header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found');
printf('"%s" does not exist', $_SERVER['REQUEST_URI']);
return false;
}
}
This is typically not an issue with any other server because you configure it to only call index.php when the request doesn't ask for an existing file.
