Can't seem to figure out why ckeditor no longer works on heroku.
It works fine on my local machine.
UPDATE: works without the asset_sync gem when assets are hosted on heroku - but does not work with it.
Errors:Uncaught SyntaxError: Unexpected token < in config.js:1
ckeditor cannot find config.js, the < is an opening tag of the 404 not found page
Failed to load resource: the server responded with a status of 406 (Not Acceptable)
Appreciate any help I can get.
Ckeditor gem, Heroku, Rails 4, asset_sync
application.js
//= require ckeditor/init
//= require ckeditor/config
gemfile - version 4.0.7
gem "ckeditor"
appplication.rb
config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
config.assets.precompile += Ckeditor.assets
config.assets.precompile += %w(ckeditor/*)
production.rb
config.assets.compile = true
config.action_controller.asset_host = "//#{ENV['FOG_DIRECTORY']}.s3.amazonaws.com"
Works when the asset version is updated
Based on https://github.com/galetahub/ckeditor#include-customized-ckeditor_basepath-setting I have fixed loading CKEditor assets with asset_sync on Heroku by including (before ckeditor/init) a ckeditor/basepath.js.erb:
<%
base_path = File.join Rails.application.config.action_controller.asset_host || '',
Rails.application.config.assets.prefix,
'/ckeditor/'
%>
(function() {
if (typeof window['CKEDITOR_BASEPATH'] === "undefined" || window['CKEDITOR_BASEPATH'] === null) {
window['CKEDITOR_BASEPATH'] = '<%= base_path %>';
}
}).call(this);
This will work when the ASSET Version is updated in the system.
Related
I have a blog page I developed using rails 5.1. Everything works just fine, except that after I create a post in production and attach an image, the image stops showing after a while (say 30 minutes). I scouted around the internet looking for solutions and saw this which suggest the problem has to do with Heroku wiping the directory after every app restart. One solution offered is to host your images on a service like Amazon S3.
I have however set S3 up and the images are being sent to the bucket shown below:
But still, the blog post images still disappear. I need help as I cannot figure out what I am missing. Here are the relevant codes:
shrine.rb:
require "shrine"
require "shrine/storage/s3"
s3_options = {
access_key_id: ENV['S3_KEY'],
secret_access_key: ENV['S3_SECRET'],
region: ENV['S3_REGION'],
bucket: ENV['S3_BUCKET'],
}
if Rails.env.development?
require "shrine/storage/file_system"
Shrine.storages = {
cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"), # temporary
store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store") # permanent
}
elsif Rails.env.test?
require 'shrine/storage/memory'
Shrine.storages = {
cache: Shrine::Storage::Memory.new,
store: Shrine::Storage::Memory.new
}
else
require "shrine/storage/s3"
Shrine.storages = {
cache: Shrine::Storage::S3.new(prefix: "cache", **s3_options),
store: Shrine::Storage::S3.new(prefix: "store", **s3_options)
}
end
Shrine.plugin :activerecord # or :activerecord
Shrine.plugin :cached_attachment_data # for retaining the cached file across form redisplays
gemfile:
....................................
# A rich text editor for everyday writing
gem 'trix', '~> 0.11.1'
# a toolkit for file attachments in Ruby applications
gem 'shrine', '~> 2.11'
# Tag a single model on several contexts, such as skills, interests, and awards
gem 'acts-as-taggable-on', '~> 6.0'
# frameworks for multiple-provider authentication.
gem 'omniauth-facebook'
gem 'omniauth-github'
# Simple Rails app key configuration
gem "figaro"
..............................
I use Figaro gem to mask the env files. They are fine since the S3 bucket responds, plus I already have OmniAuth up and running on the blog.
Here is the error it shows on the chrome console for the image:
I really need help to get this blog up and running. Thank you for your time.
Shrine generates expiring S3 URLs by default, so it's possible that the generated URLs are somehow getting cached, and then the images become unavailable once the URL has expired.
As a workaround, you can make S3 uploads public and generate public URLs instead. You can do that by telling the S3 storage to make uploads public (note that this will only affect new uploads, existing uploads will remain private so you'd have to make them public in another way), and to generate public URLs by default, by updating the initializer:
# ...
require "shrine/storage/s3"
Shrine.storages = {
cache: Shrine::Storage::S3.new(prefix: "cache", upload_options: { acl: "public-read" }, **s3_options),
store: Shrine::Storage::S3.new(prefix: "store", upload_options: { acl: "public-read" }, **s3_options)
}
# ...
Shrine.plugin :default_url_options, cache: { public: true }, store: { public: true }
# ...
As the title says, I cannot get Heroku to use my public assets.
Locally, when running my app with shotgun it works. But with rackup (what Heroku uses), the css and assets 404.
I've tried a bunch of answers on here (one, two, three) but none have worked.
Here's my directory structure:
My config.ru:
require 'bundler'
Bundler.require
require File.expand_path('../config/environment', __FILE__)
run BikeShareApp
And my controller:
class BikeShareApp < Sinatra::Base
get '/' do
erb :'home/index'
end
get '/stations' do
#stations = Station.all
erb :'stations/index'
end
end
EDIT: This is how I'm referencing my assets by the way
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/overwrite.css" rel="stylesheet">
Found it.
Following this guide and putting this in my config.ru worked:
run lambda { |env|
[
200,
{
'Content-Type' => 'text/html',
'Cache-Control' => 'public, max-age=86400'
}
]
}
I am trying to add request headers for modHeaders in chrome through Selenium with ruby.
I have tried this code but no luck. Mod Header extension has added to browser but unable to add request headers to that extension.
Please help me to find the problem in my code.
Thank you.
require 'selenium-webdriver'
driver = Selenium::WebDriver.for :chrome,
:desired_capabilities =>Selenium::WebDriver::Remote::Capabilities.chrome({
'chromeOptions' => {
'extensions' => [Base64.strict_encode64(File.open('C:\Users\balinasr\Downloads\mod.crx', 'rb').read) ],
'prefs'=> {
'modifyheaders.headers.name'=>'aaa',
'modifyheaders.headers.value'=>'bbb'
}
}
})
I know it isn't the exact answer you're looking for, but this is the Java code I use. After some googling and researching, setting the values in the LocalStorage of the browser was too difficult for me :). What I did is create a Chrome user with the plugin configured which I load when starting the chromedriver.
//to start the ChromeDriver with a plugin (from local.properties f.e.)
if (System.getProperty(CHROME_USER_DATA_DIR) == null && chromeUserDataDir != null && !chromeUserDataDir
.equalsIgnoreCase("#null")) {
options.addArguments("user-data-dir="+chromeUserDataDir);
if (System.getProperty(CHROME_EXTENSION1) == null && chromeExtension1 != null && !chromeExtension1
.equalsIgnoreCase("#null")){
options.addArguments("load-extension="+chromeUserDataDir+chromeExtension1);
}
}
The parameters are:
chrome.user.data.dir=C:/Users/[user]/AppData/Local/Google/Chrome SxS/User Data/Default/
chrome.user.extension1=Extensions/idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.1_0/
in package.json:
"browser": {
"ckeditor": "./public/ckeditor/ckeditor.js",
"bootstrap": "./public/bootstrap/js/bootstrap.js"
}
in source browserify coffee-script file:
$ = jQuery = require 'jquery-browserify'
ckeditor = require 'ckeditor'
jqueryCkeditor = require '../ckeditor/adapters/jquery.js'
$('#Info').ckeditor()
Errors in chrome browser console:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/config.js?t=E7KD
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/skins/moono/editor.css?t=E7KD
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/lang/en.js?t=E7KD
Uncaught TypeError: Cannot set property 'dir' of undefined ckeditor.js:219
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4042/skins/moono/editor.css?t=E7KD
Seemingly ckeditor cannon find its home directory: /ckeditor. How to help it?
Update
working source code:
$ = jQuery = require 'jquery'
window.CKEDITOR_BASEPATH = '/ckeditor/'
ckeditor = require 'ckeditor'
jqueryCkeditor = require '../ckeditor/adapters/jquery.js'
$ ->
CKEDITOR.replace("Info")
Maybe you need to specify the path manually - http://docs.ckeditor.com/#!/guide/dev_basepath
window.CKEDITOR_BASEPATH = './public/ckeditor/';
I have a Middleman blog hosted on Heroku (http://tomgillard.herokuapp.com) and have been trying to optimise it based on google's PageSpeed recommendations. One recommendation is that I provide a character set on the site's HTML pages.
HTML pages contain the html5 <meta charset="utf-8"> in the <head> but this doesn't seem to be enough os I thought I could set it server side.
Here is my config.ru
require 'rack/contrib'
# Modified version of TryStatic, from rack-contrib
# https://github.com/rack/rack-contrib/blob/master/lib/rack/contrib/try_static.rb
# Serve static files under a `build` directory:
# - `/` will try to serve your `build/index.html` file
# - `/foo` will try to serve `build/foo` or `build/foo.html` in that order
# - missing files will try to serve build/404.html or a tiny default 404 page
module Rack
class TryStatic
def initialize(app, options)
#app = app
#try = ['', *options.delete(:try)]
#static = ::Rack::Static.new(lambda { [404, {}, []] }, options)
end
def call(env)
orig_path = env['PATH_INFO']
found = nil
#try.each do |path|
resp = #static.call(env.merge!({'PATH_INFO' => orig_path + path}))
break if 404 != resp[0] && found = resp
end
found or #app.call(env.merge!('PATH_INFO' => orig_path))
end
end
end
# Serve GZip files to browsers that support them
use Rack::Deflater
# Custom HTTP Headers
use Rack::ResponseHeaders do |headers|
headers['Charset'] = 'UTF-8'
end
#Custom Cache Expiry
use Rack::StaticCache, :urls => ["/img", "/css", "/js", "/fonts"], :root => "build"
# Attempt to serve static HTML file
use Rack::TryStatic, :root => "build", :urls => %w[/], :try => ['.html', 'index.html', '/index.html']
# Serve 404 messages:
run lambda{ |env|
not_found_page = File.expand_path("../build/404.html", __FILE__)
if File.exist?(not_found_page)
[ 404, { 'Content-Type' => 'text/html', 'Charset' => 'UTF-8' }, [File.read(not_found_page)] ]
else
[ 404, { 'Content-Type' => 'text/html', 'Charset' => 'UTF-8' }, ['404 - page not found'] ]
end
}
I thought I could use Rack::ResponseHeaders from rack-contrib but I don't think I'm using it correctly;
# Custom HTTP Headers
use Rack::ResponseHeaders do |headers|
headers['Charset'] = 'UTF-8'
end
Like I said, I've searched high and low; consulted docs (Rack, heroku), SO questions, blog posts, github, you name it.
Any help with this is much appreciated.
Cheers,
Tom
I had a similar problem and wanted to optimize my site. You just need to manually set your Content-Type header.
Here's my complete config.ru which achieves a 98/100 on Google PageSpeed (it complains about not embedding my css in the page):
# encoding: utf-8
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __FILE__)
require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
require 'rack/contrib'
require File.expand_path("../rack_try_static", __FILE__)
use Rack::ResponseHeaders do |headers|
headers['Content-Type'] = 'text/html; charset=utf-8' if headers['Content-Type'] == 'text/html'
end
use Rack::Deflater
use Rack::StaticCache, urls: ["/images", "/stylesheets", "/javascripts", "/fonts"], root: "build"
use ::Rack::TryStatic,
root: "build",
urls: ["/"],
try: [".html", "index.html", "/index.html"]
run lambda { [404, {"Content-Type" => "text/plain"}, ["File not found!"]] }
You'll also need to add rack-contrib to your Gemfile for Rack::StaticCache:
gem 'rack-contrib'
You'll also want my rack_try_static.
Edit: Note the current implementation of Rack::StaticCache removes Last-Modified and Etag headers and will break on assets ending with a - followed by a number. I have PRs open for both of these (83 and 84).
This no longer applies as I have moved my blog from heroku to github pages. Thanks for looking.