Staticfiles for web application

snapcraft
1

Hello,

I’ve been trying to serve some css and javascript from a snapped web application and seem to have hit something I can’t work past on my own so I’m bringing it up here.

The primary issue I’m hitting is such that my staticfiles load, but are not applied to the html.

My snap is a basic django application consisting of gunicorn, nginx, and the django app itself.

I have setup a sandbox with the same part components of my snap running at the os level to try to debug this, playing with permissions and capabilities but still no dice.

here is an example snap I’ve created that exhibits the issue at hand

After building and installing my snap, I can access the web ui in the browser

24 PM
24 PM2880×1320 116 KB

As you can see, no css/js has been applied to the html.

My next inclination was to view the source and see if the individual files were loading (which they are).

26 PM
26 PM2862×1302 388 KB

38 PM
38 PM2880×1300 166 KB

I tested this locally by running gunicorn and nginx and verifying that things worked as expected.

(uninstalled the snap and copied the nginx.conf.snap.template over to /etc/nginx/sites-enabled/, then ran gunicorn from a local dir)

34 PM
34 PM1699×203 49.3 KB

37 PM
37 PM2880×1312 127 KB

^my sanity check seems to be working out.

I’ve tried playing with permissions by opening them up 777 and also tried putting the staticfiles in $SNAP_COMMON, which yielded the same result with the staticfiles not getting applied to the html.

Wondering what else I could tune in the snap to make the staticfiles load and apply correctly, or possibly something in nginx itself?

Any insight would be greatly appreciated.

Thanks

2

This is an nginx configuration issue. You removed the default nginx.conf, so it is serving your stylesheets as text/plain. You can fix it by adding into snap/templates/nginx.conf.snap.template in the http{} section a line that defines the default mime types:

http {
  include mime.types;

  upstream app_server {
    server unix:/tmp/gjango-gunicorn.sock fail_timeout=0;
  }
  …
2 Likes
3

@lucyllewy lifesaver you are! awesome!