I'm running a site on Heroku, and having some troubles getting a google font to load.
My typography.sass file contains this:
#import url(http://fonts.googleapis.com/css?family=Bitter)
h1
font-family: 'Bitter', Helvetica, serif
My production.rb file contains the lines:
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true
My Gemfile includes:
gem 'rails_12factor', group: :production
I've gone through all the Heroku issues with the asset pipeline, and I've gotten all of my images and css files to load properly in production, but for whatever reason, the font only works in development.
I had the same problem and found this answer:
https://stackoverflow.com/a/18216759
It appears that Heroku wants https. So throwing in https solved the problem for me.
I used to have the same issue but deleting the assets folder located in the public folder solved the problem for me. This will let Heroku precompile the css files for you and not use the files generate by running rake assets:precompile locally.
This fellow seemed to have a similar problem to yourself:
http://robert-reiz.com/2012/11/16/google-fonts-on-heroku/
Try his method of fixing it and see if that works. Good luck!
Related
I have a laravel app that compiles all assets in localhost, but in heroku it says app.js not found and app.css not found (It does not compile js, css and images assets in Heroku).
I have add the following line in AppService Provider
if($this->app->environment('production')) {
URL::forceScheme('https');
}
but it still does not work, and I do not understand why.
I have also add the env variable APP_FORCE_HTTPS but still does not work.
What could be the problem and how can i solve it?
I know this is a old question but no answer is fixing my problem.
I'm new to Ruby on Rails and just created project with a PostgreSQL database just to be able to upload the project to Heroku.
When i start the rails server im getting the error "application.css is not present in the asset pipeline."
I'm using bootstrap 4 gem and this requires that you rename the applications.css to application.scss.
I dont know what is wrong.
I really tried every answer that is on stackoverflow without any success :(
Please help me, what am i doing wrong?
This is the error im getting:
Ok, first thing.
Do you have config.serve_static_files = true set in your production.rb file under config/environment folder.
Since we run behind NGINX, in our case it looks like config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
Second thing. Did you do rails assets:precompile before the uploading it to the server?
And the third thing is. Have you tried calling your file application.css.scss, and redoing the rails assets:precompile?
Last, and not least thing. How does your application.scss file look like?
Did you remove all those *= and used #import instead for Bootstrap
It is nicely described in the documentation:
Import Bootstrap styles in app/assets/stylesheets/application.scss:
// Custom bootstrap variables must be set or imported before
bootstrap. #import "bootstrap";
And then it says:
Make sure the file has .scss extension (or .sass for Sass syntax). If
you have just generated a new Rails app, it may come with a .css file
instead. If this file exists, it will be served instead of Sass, so
rename it:
$ mv app/assets/stylesheets/application.css
app/assets/stylesheets/application.scss Then, remove all the *=
require and *= require_tree statements from the Sass file. Instead,
use #import to import Sass files.
Do not use *= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins and variables.
Read more here
origin answer
in my case, I forgot to install yarn command in my server.
so, please install yarn before running rails server. otherwise assets:precompile will do nothing and give no warning.
update
also, make sure all of these things:
file exists: app/assets/stylesheets/application.css
its content looks like:
/* ...
*= require_self
*= require_tree .
*/
also check file app/assets/config/manifest.js,
//= link application.css
To give more clarity to mutantkeyboard's answer
I had this issue when deploying a Rails application as a docker image that would run in a docker container without a web server like Nginx.
Here's how I got it fixed:
This issue is primarily caused in production when you do not want to serve your static files from the /public folder using a web server like Nginx or Apache.
To serve files your static files from the /public folder without using a web server like Nginx or Apache, do the following:
Ensure you precompile your assets using:
bundle exec rails assets:precompile
OR
rails assets:precompile
This will compile your assets into the /public folder
Next, in your config/environments/production.rb file, add the following:
Instead of this:
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
Use this:
config.public_file_server.enabled = true
This allows rails to serve the static files instead of a web server
Note: For improved performance it's best to serve the static files using a Web server like Apache or Nginx.
Just reinstall yarn et precompile our assets:
yarn's parkages don't push on github... to fix this, reinstall yarn:
yarn
and precompile assets:
bundle exec rails assets:precompile
Rails 7.0.4 ruby 3.1.2 I solved issue with yarn build when missing application.js but in case missing application.css just did yarn build:css
I have been struggling with SASS and Compass on my Mac OSX for the last few days.
I have a setup like below (this is as accurate as I can make it).
Ive only done 1 site but there are around 40 with identical structure below proxysite1.com
/Library/WebServer/Documents
/WebProxy-Network
/Global_Assets
/_alerts.scss
/_badges.scss
/_breadcrumbs.scss
/_button-groups.scss
/_buttons.scss
/_carousel.scss
/_close.scss
/_code.scss
/_dropdowns.scss
/_forms.scss
/_grid.scss
/_labels.scss
/_print.scss
/_bootstrap.scss (all the files above import into this one and will use shared by all the sites)
/Asia
/USA
/EU
/UK
/www.proxysite1.com
/scss
_variables.scss
_overrides.scss
styles.scss (this imports _sass-bootstrap.scss, _variables.scss & overrides.scss)
/css
styles.css (ok so this should be the FINAL output unique for each site)
/js
/images
/index.inc.php
/index.php
/config.rb
Inside my config.rb I have these settings:
# Require any additional compass plugins here.
load "../../Global_Assets/Bootstrap3"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
Now inside my /scss folder file styles.scss
I have the following:
// Site Overrides
#import "overrides";
// Site Variables
#import "variables";
// Bootstrap3 SASS Framework
#import "bootstrap";
Right so that took a while but I want to get some good advice on where i'm going wrong ;)
Now when I visit this path via terminal
/Library/WebServer/Documents/WebProxy-Network/UK/www.proxysite1.com/
and run the command "compass watch" I get the following message:
Ants-MacBook-Pro:www.antproxy.com Ant$ compass watch
>>> Change detected at 10:17:28 to: styles.scss
error scss/styles.scss (Line 24: File to import not found or unreadable: sass-bootstrap.
Load paths:
/Library/WebServer/Documents/WebProxy-Network/UK/www.antproxy.com/scss
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter)
overwrite css/styles.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
So hopefully this is enough info to get some good insight in to where I'm going wrong, hopefully its been clear and I'm on the right path :)
BTW the idea was to have it so I can specify different variables for each site allowing me to change colors fonts etc but share layout styles and functionality styles.
(I would have posted this as a comment however I do not have the priviledges.)
I suspect that you may have gotten some of your indentations wrong in your post as running "compass watch" in the "www.proxysite1.com" directory while the config.rb file is within "assets" wouldn't work as compass wouldn't be able to find the configuration and would assume that no compass project existed.
Regardless, how are you including Bootstrap 3?
If you are not already using it already, I would recommend trying Thomas McDonald's bootstrap-sass. Available here: https://github.com/thomas-mcdonald/bootstrap-sass
UPDATE:
Why are you including Bootstrap 3 like this?
// Bootstrap3 SASS Framework
#import "sass-bootstrap";
If you have included the correct require statement in your config.rb (inc. below) then you should be able to import it like this mate:
// Bootstrap3 SASS Framework
#import "bootstrap";
Inside of config.rb, you should have this at the top:
# Require any additional compass plugins here.
require 'bootstrap-sass'
load "../../Global_Assets"
I have a rails 4 app that use CKeditor. In dev mode it works fine but in production ckeditor does not apear and there is a blank space at the location of the textarea.
According to the logs, the following file is missing :
ActionController::RoutingError (No route matches [GET] "/assets/ckeditor/styles.js")
And if i precompile the asset i can see the following file generated :
public/assets/ckeditor/styles-65fee53acf063b3d207bc00b4f7ce0d5.js
Here is the ckeditor line of my application.rb :
config.assets.precompile += Ckeditor.assets
It seems that's the file CKeditor want but it is not looking for the precompiled one. How can i fix that?
i have pre-compiled my assets and pushed my repo to production server and got similar bug. And ckeditor was not loading.
Following worked for me:
1) Under config > environment > productio.rb file there is a line
config.assets.compile = false
i changed false to true and pushed the code to production site. Stopped and started unicorn. That did the trick now ckeditor is loading.
hope that helps.
For Rails 5 you have use in Gemfile
gem 'ckeditor', github: 'galetahub/ckeditor'
look here:
https://github.com/galetahub/ckeditor/issues/719
Did you follow these steps in the Readme? https://github.com/galetahub/ckeditor#usage-with-rails-4-assets
Specifying the CKEditor BasePath in the <head> section of my application.html.erb file fixed my issue
<script type="text/javascript">
var CKEDITOR_BASEPATH = '/assets/ckeditor/';
</script>
I had the same problem, i had included config.assets.compile = true and didn´t work...
Finally i did rake
rake assets:precompile
from the console.
If you are uploading images directly to AWS S3 you need to comment out the carrierwave or paperclip initializer while precompiling.
Then pushed it to production and worked fine!
I am having a problem with CSS3 code and heroku. I am currently hosting my website temporary on heroku, and this piece of code doesn't not seem to work:
#my_footer
{
margin-top:170px;
background-color:rgba(17,142,36,0.3); /* added this because of the backgroud */
border-radius: 3px 3px 3px 3px;
}
especially this line of code: background-color:rgba(17,142,36,0.3); the strange part is that it works on my localhost, but not on heroku! and I am using the same browser!
Note: I have checked the code on GitHub and the code is EXACTLY as above! so when I push to heroku, and then check the source code from the browser, the code for "my_footer" is NOT the same as the one in GitHub!! It is like GitHub is not pushing my code to heroku!!
btw I have this in my config/environments/production.rb
...
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true #changed to true!
...
otherwise heroku returns me an error, and does not display the page if it is 'false' I am using twitter bootstrap btw!
Thanks!
try to run rake assets:precompile on your locale machine.
After add the generated files to git
git add .
git commit -m "assets precompiled"
git push heroku master
assuming your remote branch is called 'heroku'.