Impossible de faire fonctionner CSS sur Heroku en utilisant Rails 4 avec la gemme bootstrap-saas

Question

J'ai déployé une application sur Heroku avec un problème que je ne parviens pas à résoudre. Le CSS de l'application via Bootstrap-sass ne se charge pas, ce qui fait que l'application n'est pas stylisée. Pour l'instant, il s'agit simplement d'une collection de pages statiques.

J'ai suivi toutes les étapes du README sauf une. https://github.com/thomas-mcdonald/bootstrap-sass L'étape que je n'arrive pas à comprendre et qui est très probablement à l'origine de mon problème est la suivante. En raison d'un changement dans Rails qui empêche les images d'être compilées dans vendor et lib, vous devrez ajouter la ligne suivante à votre application.rb :

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

Comme je suis encore très novice en matière de programmation, le premier problème est que je n'ai aucune idée de l'endroit et de la manière d'ajouter ce code dans le fichier application.rb. J'apprécierais beaucoup si quelqu'un pouvait me montrer comment et où ajouter correctement la ligne de code ci-dessus.

Le deuxième problème pourrait être lié aux gemmes que j'utilise, mais lorsque j'ai créé l'application, la gemme sass-rails était installée avec la version ~> 4.0.0.beta1. Selon le README, la version à utiliser est la 3.2. Comme cela pourrait également être un problème, j'ai inclus le fichier gem au cas où quelqu'un déterminerait que c'est la raison sous-jacente de mon problème.

Merci d'avance pour toute aide que vous pourrez apporter.

Modifier pour ajouter les étapes que j'ai prises lors du premier essai qui a abouti à un style fonctionnant correctement sur mon hôte local, mais pas une fois que le code a été déployé à heroku.

1. Création d'une nouvelle application rails 4 (fichier gem ci-dessous)
2. Ajout de la gemme bootstrap-sass listée dans le fichier gem ci-dessous
3. J'ai ajouté la gemme PG à mon fichier de gemmes dans le groupe de production et j'ai déplacé sqlite3 dans les groupes de développement et de test (j'ai exécuté bundle install --without production en suivant les étapes 2 et 3).
4. création d'un contrôleur de pages pour une page d'accueil statique
5. Ajout d'un h1 à l'intérieur d'une unité héroïque sur la page d'accueil, juste pour voir si le style fonctionne.
6. ajout d'un fichier styles.css.scss et inclusion de @import 'bootstrap' ; dans la feuille de style
7. Création du dépôt git, exécution de mon commit initial et poussée du code vers git.
8. Création de l'application heroku et poussée du master vers heroku

Lors de la deuxième tentative, j'ai ajouté une barre de navigation à la page d'accueil (si cela fait une différence pour quelqu'un) et j'ai suivi les étapes 7 et 8 à nouveau, mais juste avant de faire ces étapes, j'ai exécuté la ligne de code suivante.

RAILS_ENV=production bundle exec rake assets:precompile

Je me suis quand même retrouvé avec un site qui avait le bon style sur mon hôte local mais aucun style ne fonctionnait sur heroku. Comme je l'ai noté ci-dessus dans mon message original, il y a une ligne de code qui doit être ajoutée au fichier application.rb que je n'ai pas suivi en raison de mon manque de compréhension de la façon d'ajouter correctement la ligne de code dans le fichier.

Fichier Gem

source 'https://rubygems.org'

ruby "2.0.0"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0.beta1'

group :production do
gem 'pg'
end

group :development, :test do
gem 'sqlite3'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails',   '~> 4.0.0.beta1'
gem 'coffee-rails', '~> 4.0.0.beta1'

gem 'bootstrap-sass', '~> 2.3.1.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more:  https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.0.1'

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano', group: :development

# To use debugger
# gem 'debugger'

Answer 1

Je viens juste (13 juin 2013)d'obtenir cette réponse des devs de Heroku dont le support m'a guidé à travers les barrières. C'est ainsi que j'ai réussi à faire fonctionner mon affichage css depuis localhost dans mon application Heroku.

"Tout ce que vous avez à faire est d'activer le service d'actifs en production et de définir le logger sur stdout pour que Rails4 fonctionne sur Heroku. Nous travaillons actuellement à l'amélioration du processus de déploiement pour les applications Rails 4, mais en attendant, vous pouvez simplement modifier ces lignes dans votre code et vous n'aurez plus besoin de ces gemmes." (Merci Bret et Neil, bonne nouvelle)

Dans le répertoire /config/environnements/production. défini :

config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

Je ne connais pas le stdout du logger et ne peux donc pas le vérifier.

Faites un git add . et git commit.

Assurez-vous que /config/database.yml a :

production:
  adapter: postgresql
  encoding: unicode
  database: Your_appname_production

Vous aurez besoin de cette information pour la commande env ci-dessous.

Assurez-vous que vous avez la gemme 'pg' en production dans votre Gemfile. Faites un autre commit git.

Exécutez cette commande dans un terminal de votre application sur une seule ligne :

env RAILS_ENV=production DATABASE_URL=postgresql://user:pass@127.0.0.1/Your_app_name_production bundle exec rake assets:precompile 2>&1

Où DATABASE_URL=postgresql est identique à votre adaptateur de production dans le fichier yml et Your_app_name_production est spécifié car Heroku ne semble exécuter que la production.

On me l'a déconseillé et je n'en ai pas eu besoin :

group :production do
  gem 'rails_log_stdout',           github: 'heroku/rails_log_stdout'
  gem 'rails3_serve_static_assets', github: 'heroku/rails3_serve_static_assets'
end

Il y a des erreurs dans le bundle install et Heroku.

Je ne sais pas si cela peut aider mais j'ai également ajouté la production à

Bundler.require(*Rails.groups(assets: %w(development test production)))

Je ne me souviens plus où j'ai vu ce conseil.

HTH Arel

Answer 2

Il suffit de lancer le paquet exec rake assets:precompile avant de le pousser vers heroku

Answer 3

J'ai pu résoudre ce problème en ajoutant les deux gemmes suivantes à mon application

group :production do
  gem 'rails_log_stdout',           github: 'heroku/rails_log_stdout'
  gem 'rails3_serve_static_assets', github: 'heroku/rails3_serve_static_assets'
end

Ajoute ça, exécute bundle install et ensuite pousser vers heroku.

Vos styles devraient commencer à se charger.

Answer 4

Tout d'abord, passez de Rails beta à la dernière version .

Vérifiez où vous pouvez vous placer config.assets.initialize_on_precompile = false car cela pourrait le faire retomber sur la résolution des actifs non-sprockets (je suppose que vous l'avez mis à false lorsque vous avez lu sur Rails 3.x dans les docs heroku).

Revenir à la valeur par défaut true

ruby config.assets.initialize_on_precompile = true

Puis activer user-env-compile pour l'application sur heroku :

# Enable precompile support for the app
heroku labs:enable user-env-compile
# Remove precompiled assets
rm -rf public/assets/
git add -u 
git commit -m 'Remove precompiled assets'
# Now push and everything should just work from now on
git push heroku master

Adapté de ce commentaire sur le problème bootstrap-sass .

Answer 5

Définir config.assets.compile=true dans le fichier /config/environments/production.rb :

config.assets.compile=true

Cliquez ici pour savoir plus d'informations sur le pipeline d'actifs.