Mojolicious gives 404 when getting JS and CSS

Question

I'm new to Mojolicious, and I've got various things working, but I've come up against a problem which I've recreated in the following minimal bit of code.

The problem is a simple one: I can't get it to load external CSS and JS files. What surprises me is that it gives 404 errors as though it's trying to serve these static files as routes. No-one else seems to be having this problem, so I've obviously done something (or missed something) foolish.

The files in question are in the ./css and ./js directories relative to the perl file (errorddemo.pl). I've tried with and without the leading '/', and any other variations that I could think of.

This is the code:

#!/usr/bin/env perl
use Mojolicious::Lite;
get '/' => sub {
    my $c = shift;                                                     
    $c->render('index');
};            
app->start;

__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
    %= stylesheet '/css/bootstrap-3.3.2-dist/css/bootstrap.css'
</head>      
<body>
    <p>blah
    %= javascript '/js/jquery-2.1.3.js'
</body>     
</html>

When I run morbo errordemo.pl and browse to :3000, I get this:

[Sun Jan 25 00:24:04 2015] [debug] GET "/".
[Sun Jan 25 00:24:04 2015] [debug] Routing to a callback.
[Sun Jan 25 00:24:04 2015] [debug] Rendering template "index.html.ep" from DATA section.
[Sun Jan 25 00:24:04 2015] [debug] 200 OK (0.005127s, 195.046/s).
[Sun Jan 25 00:24:04 2015] [debug] GET "/css/bootstrap-3.3.2-dist/css/bootstrap.css".
[Sun Jan 25 00:24:04 2015] [debug] Template "not_found.development.html.ep" not found.
[Sun Jan 25 00:24:04 2015] [debug] Template "not_found.html.ep" not found.
[Sun Jan 25 00:24:04 2015] [debug] Rendering inline template "3e3201ab0667c1fc7f39089209f0435c".
[Sun Jan 25 00:24:04 2015] [debug] Rendering inline template "b2d451b47e2053ce583cbfdf7bcc6006".
[Sun Jan 25 00:24:04 2015] [debug] 404 Not Found (0.045663s, 21.900/s).
[Sun Jan 25 00:24:04 2015] [debug] GET "/js/jquery-2.1.3.js".
[Sun Jan 25 00:24:04 2015] [debug] Template "not_found.development.html.ep" not found.
[Sun Jan 25 00:24:04 2015] [debug] Template "not_found.html.ep" not found.
[Sun Jan 25 00:24:04 2015] [debug] Rendering cached inline template "3e3201ab0667c1fc7f39089209f0435c".
[Sun Jan 25 00:24:04 2015] [debug] Rendering cached inline template "b2d451b47e2053ce583cbfdf7bcc6006".
[Sun Jan 25 00:24:04 2015] [debug] 404 Not Found (0.009863s, 101.389/s).

The generated HTML is:

<!DOCTYPE html>
<html>
    <link href="/css/bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <p>blah
    <script src="/js/jquery-2.1.3.js"></script>
</body>

score 7 · Accepted Answer · edited Jan 25 '15 at 13:02

7

Static files are served from ./public, relative to the lite app (errorddemo.pl).

You can specify other folders by modifying the array refererence at app->static->paths:

push @{app->static->paths} => '.';

edited Jan 25 '15 at 13:02

brian d foy

129,424
31
207
592

answered Jan 25 '15 at 01:10

Tempire

2,290
19
14

Thank you -- I knew I must have missed something basic. I've moved my css and js folders into public, and now it works. The use of the 'public' directory is documented under [rendering](http://mojolicio.us/perldoc/Mojolicious/Guides/Rendering) and no doubt in other places too. – Chris Dennis Jan 25 '15 at 01:30
2

I've often thought that a debugging message that says '.../public/js/... does not exist' would help. Maybe I should go do that :) – brian d foy Jan 25 '15 at 13:03

score 5 · Answer 2 · answered Jan 25 '15 at 15:54

I would not recommend the suggestion from tempire, since it would expose your complete project folder (including errordemo.pl and any private config files) to the public.

In future, I would suggest that you investigated what the paths are set to:

warn join ":", @{app->static->paths};

These are the interesting bits that will give you an idea where Mojolicious looks for static files and templates.

warn join ":", @{app->static->paths};
warn join ":", @{app->static->classes};
warn join ":", @{app->renderer->paths};
warn join ":", @{app->renderer->classes};

Note that "paths" have precedence before "classes". You can read more about the attributes here:

http://mojolicio.us/perldoc/Mojolicious/Static

Good point. All I wanted to know was that js and css files should (normally) go within `public`. I hadn't really thought about the implications of adding the current directory to `app->static->paths`, but I agree that it would be a bad idea. Thanks for the tip about displaying the values of the paths being used. — Chris Dennis, Jan 26 '15 at 17:28

Mojolicious gives 404 when getting JS and CSS

2 Answers2