Theme Editor preview error

[Paul Vincent]

Hi,

I've launched canvas via an AWS Ubuntu 12.04 instance, and all is working well except that the theme editor preview isn't working - when I click 'Preview, I get the progress bar overlay but either nothing happens, or on occasion a browser dialogue appears stating that an error occurred (no specifics) or on other occasions, the page refreshes but the stylesheet is completely broken.

I'm thinking this may be a permissions issue, but I'm having a hard time finding which log might be recording the error - nothing appears in the error log or the canvas log. Is there perhaps some additional plugin that's needed for the theme editor?

Any help would be greatly appreciated on this.

Many thanks,

Paul 

[Roberto Notario]

Hi Paul, 

I had the same problem. It's because of the permissions on the tmp folder

[Paul Vincent]

Great! Many thanks Roberto, I'll get that fixed.

Cheers

[Matthew Mclean]

Thanks. I'm having the same issue. Could you say exactly how I would fix the permission of the tmp folder?

Thank you!

Matt

[Frank Giuliani]

I'm also curious what permission changes were done to the tmp folder as I'm having the same problem with modifications performed through the theme editor breaking css (not custom).

ive made sure to disable custom css/js overrides and i'm still having the issue.

the permissions on the tmp include the canvasuser that Rails uses and the installer account.  should any of the folders here have www-data user?

~/var/canvas/tmp$ ls -la

total 16

drwxrwxr-x  4 canvasuser helpdesk   4096 Aug 28 02:03 .

drwxrwxr-x 24 helpdesk   helpdesk   4096 Jan 15 00:10 ..

drwxr-xr-x  3 canvasuser canvasuser 4096 Aug 28 02:03 files

drwxrwxr-x  2 canvasuser helpdesk   4096 Aug 28 01:40 pids

[Henry Singleton]

I'm having a similar problem on Ubuntu 14.04 (bitnami-configured AMI on AWS). 

When I make any change to the theme via the theme editor and hit preview, the whole page reloads and fails to load any stylesheets. 

I have checked the permissions of the tmp folder, also also tried temporarily setting them to 777. I had to modify the permissions on app/stylesheets/brandable_css_brands/ would allow writing of files, which is now done, and it does create a directory with the md5 hash of the theme, however it doesnt seem to be generating all the required css files inside. 

Even some guidance on where to look next for problems would be helpful. What should be happening when the "Preview" button is clicked in the theme editor? Should the whole page reload, not just the preview frame? 

Thanks,

Henry

[Henry Singleton]

I resolved my issue by re-generating all the frontend assets (i.e. using bundle exec rake canvas:compile_assets)

I ran into a number of issues where node modules would not install using this script, but running `npm install` manually seemed to work fine. After doing npm install I ran the rake task again and managed to get it to complete successfully. My theme preview and saving works fine now! 

[Frank Giuliani]

Thank you Henry!!

This resolved my issue as well.

I first made sure my permissions were set to allow changes:

/var/canvas$ sudo chmod 660 ./config/*.yml
/var/canvas$ sudo chown canvasuser:helpdesk ./config/*.yml

Then I ran npm install like you had recommend

~/var/canvas$ npm install

Finally I re-ran the rake

~/var/canvas$ RAILS_ENV=production bundle exec rake canvas:compile_assets

restarted services just in case

~/var/canvas$ sudo service postgresql restart
~/var/canvas$ sudo service apache2 restart

Logged in and tested the theme editor by switching from the default to one of the two other provided themes, CSS loaded perfectly!

Then I switched back the permissions for my *.yml files so they were secured

/var/canavs$ sudo chown canvasuser:helpdesk ./config/*.yml
/var/canvas$ sudo chown canvasuser:root ./config/cache_store.yml
/var/canvas$ sudo chown canvasuser:root ./config/redis.yml
/var/canvas$ sudo chmod 400 ./config/*.yml
/var/canvas$ sudo chown canvasuser ./config.ru

Tested the theme editor again and it still works great!!

Thank you again!

[Frank Giuliani]

Well i spoke too soon..  while the built in additional themes work now, if i try to change any of them and click "Preview changes"  I just get stuck at "Generating preview" and it doesn't go anywhere.

[Frank Giuliani]

So sometimes the "Generating preview" works, but i go back to a lack of CSS files.

Inspecting the page while making a change and looking at the console log, I see this:

GET https://university.mysite.com/dist/brandable_css/49df1e13df0d528b2b0ccedab8c62651/new_styles_normal_contrast/bundles/theme_preview-a3e3cea19b.css 

university.mysite.com/:13
GET https://university.mysite.com/dist/brandable_css/49df1e13df0d528b2b0ccedab8c62651/new_styles_normal_contrast/bundles/common-f1779e696d.css 

avatar-50.png:1
GET https://i1.wp.com/university.mysite.com/images/messages/avatar-50.png?ssl=1 504 (OK)

canvas:13
GET https://university.mysite.com/dist/brandable_css/49df1e13df0d528b2b0ccedab8c62651/new_styles_normal_contrast/bundles/common-f1779e696d.css 

canvas?previewing_from_themeeditor=true:17
GET https://university.mysite.com/dist/brandable_css/49df1e13df0d528b2b0ccedab8c62651/new_styles_normal_contrast/bundles/login-

if i then go to the doc root of the site and look at where the site is pulling from, the directory, 49df1e13df0d528b2b0ccedab8c62651, doesn't exist.

university:/var/canvas/public/dist/brandable_css$ ls -la

total 500

drwxrwxr-x 10 canvasuser helpdesk   4096 Jan 21 14:40 .

drwxrwxr-x  7 canvasuser helpdesk   4096 Aug 28 00:58 ..

drwxrwxr-x  3 canvasuser helpdesk   4096 Jan 21 14:40 3f38c01c65835e7de842d709a89ec3e8

drwxrwxr-x  3 canvasuser helpdesk   4096 Jan 21 14:40 7845907c6e76db998e5f24d63aca97b5

drwxrwxr-x  3 canvasuser helpdesk   4096 Aug 28 00:48 a1f113321fa024e7a14cb0948597a2a4

-rw-rw-r--  1 canvasuser helpdesk 433127 Jan 21 14:40 brandable_css_bundles_with_deps.jsoncompressed

-rw-rw-r--  1 canvasuser helpdesk  35825 Jan 21 14:40 brandable_css_file_checksums.jsoncompressed

drwxrwxr-x  4 canvasuser helpdesk   4096 Aug 28 00:48 legacy_high_contrast

drwxrwxr-x  4 canvasuser helpdesk   4096 Aug 28 00:48 legacy_normal_contrast

drwxrwxr-x  4 canvasuser helpdesk   4096 Aug 28 00:48 new_styles_high_contrast

drwxrwxr-x  4 canvasuser helpdesk   4096 Aug 28 00:48 new_styles_normal_contrast

drwxrwxr-x  3 canvasuser helpdesk   4096 Jan 15 00:09 no_variables

As you can tell by the permissions, both the canvasuser and the apache user (helpdesk) have access to everything in here, read, write, and exec.  I made sure by doing this:

university:/var/canvas/public$ sudo chown -R canvasuser:helpdesk ./dist/

I'm reading through this right now to see if there is anything i'm missing: https://github.com/instructure/canvas-lms/issues/700

[Frank Giuliani]

So for some reason after I changed the file permissions like i showed above

~/var/canvas/public$ sudo chown -R canvasuser:helpdesk ./dist/

I was unable to complete the rake for compile assets anymore and would get errors like:

Error: EPERM, chmod '/var/canvas/public/dist/fonts/Symbola-4621fcfd9d.otf'

    at Error (native)

rake aborted!

so I switched the permissions back using

~/var/canvas/public$ sudo chown -R helpdesk:helpdesk ./dist/

and then the rake completed successfully.

I have no idea why as the helpdesk user is part of the helpdesk group and had 7 as a permission on the folder and all its children/contents.

~/var/canvas$ getent group helpdesk

helpdesk:x:1000: