No CSS / Styling, Text Only

[fern90]

I am running Firefly III version 4.7.9

Description Firefly starts correctly, I can login and do everything, but page appears to be missing CSS. All I see is the text.

Steps to reproduce

1. Clean install on debian 8 as per the official installation guide.

Extra info /debug output Debug information generated at 2019-01-19 15:17:28 America/Sao_Paulo for Firefly III version 4.7.9.

Variable	Content
FF version	4.7.9
FF API version	0.9.0
App environment	local
App debug mode	false
App cache driver	file
App logging	, daily
PHP version	7.2.14-1+0\~20190113100657.14+jessie\~1.gbpd83c69
Display errors	Off
Session start	2019-01-01 00:00:00
Session end	2019-01-31 23:59:59
Session first	2019-01-01 00:00:00
Error reporting	ALL errors
Host	Linux
Interface	apache2handler
UserID	1
Attempt at "en"	false
Attempt at "English"	false
Attempt at "en_US.utf8"	'en_US.utf8'
Attempt at "en_US.UTF-8"	'en_US.UTF-8'
DB drivers	mysql
Current driver	mysql
Login provider
Storage disks	local-upload
Using Sandstorm?	no
Is Sandstorm (.env)	false
Is Docker (.env)	false
bunq uses sandbox	false
Trusted proxies (.env)
User agent	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Loaded extensions	Core, date, libxml, openssl, pcre, zlib, filter, hash, Reflection, SPL, sodium, session, standard, apache2handler, mysqlnd, PDO, xml, bcmath, calendar, ctype, curl, dom, mbstring, fileinfo, ftp, gd, gettext, iconv, intl, json, ldap, exif, mysqli, pdo_mysql, Phar, posix, readline, shmop, SimpleXML, sockets, sysvmsg, sysvsem, sysvshm, tokenizer, wddx, xmlreader, xmlwriter, xsl, zip, Zend OPcache

Bonus points

Apache logs show no errors.

[JC5]

Just check the source. Is the CSS giving you a 404?

[fern90]

Thanks for the help JC5.

I just checked, and i can access all the css files, without any 404s.

[fern90]

I think i might have found the issue, altough i'm not sure how to solve it.

The javascript files are returning 404 (app.js does exist, though i couldn't find guest.js)

[fern90]

Some further info. It seems to be calling the .js from the wrong location. i.e. http://server-ip/firefly/index.php/v1/js/app.js?v=4.7.9

Also, guest .js is also present

[JC5]

Check if mod rewrite is enabled. And check your plugins. There are several files loaded that are not from Firefly III.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[labichn]

I am seeing the same behavior on a fresh installation of 4.7.9 in Firefox and Chrome. My debug information is below.

Unlike @fern90, I'm seeing 200 across the board for all requests.

There is no information in the ff3 logs or from nginx. Since I'm running nginx I'm not sure the mod rewrite suggestion applies (please correct me if I'm wrong). Here is the configuration (ignoring lines inserted by certbot):

server {
    server_name ...;
    root /var/www/firefly-iii/public;
    index index.php index.htm index.html;
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        autoindex on;
        sendfile off;
    }
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

Debug information generated at 2019-02-04 22:26:53 US/Eastern for Firefly III version 4.7.9.

Variable	Content
FF version	4.7.9
FF API version	0.9.0
App environment	local
App debug mode	false
App cache driver	file
App logging	, daily
PHP version	7.3.1
Display errors	Off
Session start	2019-02-01 00:00:00
Session end	2019-02-28 23:59:59
Session first	2019-01-01 00:00:00
Error reporting	ALL errors
Host	Linux
Interface	fpm-fcgi
UserID	1
Attempt at "en"	false
Attempt at "English"	false
Attempt at "en_US.utf8"	'en_US.utf8'
Attempt at "en_US.UTF-8"	'en_US.UTF-8'
DB drivers	mysql
Current driver	mysql
Login provider
Storage disks	local-upload
Using Sandstorm?	no
Is Sandstorm (.env)	false
Is Docker (.env)	false
bunq uses sandbox	false
Trusted proxies (.env)
User agent	Mozilla/5.0 (X11; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0
Loaded extensions	Core, date, libxml, openssl, pcre, zlib, ctype, dom, fileinfo, filter, hash, json, mbstring, pcntl, SPL, PDO, session, posix, readline, Reflection, standard, SimpleXML, Phar, tokenizer, xml, xmlreader, xmlwriter, mysqlnd, cgi-fcgi, bcmath, curl, gd, iconv, intl, ldap, mysqli, pdo_mysql, zip

Let me know if there is any other information I can provide!

[JC5]

Could you share the <head> section? There might be URL's secretly a bit off. Although with everything returning OK, something strange is going on.

[labichn]

Here's the head section from /new-user:

<head>
    <base href="https://subdomain.domain.tld/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="ZCBobMyOXLfyBUxJGX0PfxRLXSmMLL8kAQbS4xyw">
    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
    <title>
                            Welcome to Firefly III! »

        Firefly III

    </title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
            <link href="v1/lib/bs/css/bootstrap.min.css?v=4.7.9" rel="stylesheet" type="text/css">
    <link href="v1/lib/fa/css/font-awesome.min.css?v=4.7.9" rel="stylesheet" type="text/css">
    <link href="v1/css/daterangepicker.css?v=4.7.9" rel="stylesheet" type="text/css">

        <link href="v1/lib/adminlte/css/AdminLTE.min.css?v=4.7.9" rel="stylesheet" type="text/css">
    <link href="v1/lib/adminlte/css/skins/skin-blue-light.min.css?v=4.7.9" rel="stylesheet" type="text/css">

        <link href="v1/css/firefly.css?v=4.7.9" rel="stylesheet" type="text/css">

            <!--[if lt IE 9]>
    <script src="v1/js/lib/html5shiv.min.js?v=4.7.9"></script>
    <script src="v1/js/lib/respond.min.js?v=4.7.9"></script>
    <![endif]-->

            <script type="text/javascript">var forceDemoOff = false;</script>

        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=3e8AboOwbd">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=3e8AboOwbd">
<link rel="manifest" href="/site.webmanifest?v=3e8AboOwbd">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3c8dbc">
<link rel="shortcut icon" href="/favicon.ico?v=3e8AboOwbd">
<meta name="apple-mobile-web-app-title" content="Firefly III">
<meta name="application-name" content="Firefly III">
<meta name="msapplication-TileColor" content="#3c8dbc">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?v=3e8AboOwbd">
<meta name="theme-color" content="#3c8dbc">

</head>

[JC5]

Mmmm. The base href is good and the links return 200's. I do see that the return types is "plain" for all CSS and JS data. Can you check if the content of the returned data is actual valid CSS or JS?

[labichn]

Everything seems to be in order, but the styles (like login-page) are not being applied (see screenshot below). I've confirmed this from a number of machines and browsers.

Start of app.js:

!function(t){var e={};function n(r){if(e[r])return e[r].exports // ...

Excerpt from AdminLTE.min.css:

.login-page,.register-page{background:#d2d6de}

I'll try a fresh installation tonight, see if anything changes.

[labichn]

Thanks @JC5, the problem was the missing MIME types. I added the following line to the nginx / location block and the styles appear as expected: include /etc/nginx/mime.types.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.