Flash of unstyled content

[gravyTrainee]

trafficstars

There's a mildly unsettling FOUC distracting from this otherwise excellent library.

[simov]

What I have seen improving this situation is putting Express Admin behind NginX for example. In that setup you let NginX serve all of the static assets and Node.js to serve the Express Admin routes only.

[simov]

Here is an example configuration for NginX that I'm using:

location / {
  # your Express Admin server
  proxy_pass http://localhost:3000;
}

# Static Files:

# express-admin
location ~ /express-admin\.(css|js) {
  root /path/to/node_modules/express-admin/public;
  try_files $uri $uri;
}

# custom - in case you have any custom views
location ~ /custom\.(css|js) {
  root /path/to/your/custom/views/static/files;
  try_files $uri $uri;
}

# express-admin-static
root /path/to/node_modules/express-admin-static;
location ^~ /jslib/ {
  try_files $uri $uri;
}
location ^~ /csslib/ {
  try_files $uri $uri;
}
location ^~ /font/ {
  try_files /csslib/fonts/$uri =404;
}
location ^~ /bootswatch/ {
  try_files $uri $uri;
}

[gravyTrainee]

Thanks @simov!

It appears that the script to change bootstrap themes is responsible for this. I'm using this workaround so that the default theme won't trigger the FOUC (views/js/theme.html):

<script type="text/javascript">
    var xAdmin = {root: '{{root}}'};
    (function () {
        var theme = localStorage.getItem('theme') || 'default';
        if (theme == 'default')
            return;
        var bootstrap = document.getElementById('bootstrap');
        bootstrap.href = xAdmin.root+'/bootswatch/'+theme+'/bootstrap.min.css';
    }());
</script>

This only prevents the FOUC for the default theme, but may help someone else. :)