Skip to content

Fix Heroku precompile in assets build folder #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
bkuhlmann opened this issue Nov 1, 2021 · 5 comments
Closed

Fix Heroku precompile in assets build folder #41

bkuhlmann opened this issue Nov 1, 2021 · 5 comments

Comments

@bkuhlmann
Copy link

bkuhlmann commented Nov 1, 2021

Overview

I've been working on an application that originally was using Sprockets for it's asset pipeline and then switched over to using the new CSS Bundling gem and discovered, upon deploy, that Heroku doesn't like assets being built in the app/assets/builds folder.

I'm not entirely sure if this is a bug with this gem or with Heroku but opted to log this issue here first.

Steps to Recreate

Run the following script:

rails new demo --skip-git --skip-turbolinks --skip-action-cable --skip-action-text --skip-active-storage --skip-webpack-install --skip-listen --skip-spring --skip-test --skip-keeps --no-skip-sprockets --database postgresql
bundle add cssbundling-rails
bundle exec rails css:install:sass

If you open the auto-generated package.json, you'll find this line:

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

The problem is, upon deploy to Heroku, you'll end up with the following stack dump:

Heroku Stack Dump
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        I, [2021-11-01T20:58:02.013456 #700]  INFO -- : [SKYLIGHT] [5.1.1] Unable to start, see the Skylight logs for more details
remote:        yarn install v1.22.4
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.3.2: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        [4/4] Building fresh packages...
remote:        Done in 0.76s.
remote:        yarn run v1.22.4
remote:        $ sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
remote:        Done in 0.61s.
remote:        rake aborted!
remote:        Sprockets::FileNotFound: couldn't find file 'application.css'
remote:        Checked in these paths:
remote:          /tmp/build_220c7480/app/assets/config
remote:          /tmp/build_220c7480/app/assets/data
remote:          /tmp/build_220c7480/app/assets/javascripts
remote:          /tmp/build_220c7480/app/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/administrate-0.16.0/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/administrate-0.16.0/app/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/selectize-rails-0.12.6/vendor/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/selectize-rails-0.12.6/vendor/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/momentjs-rails-2.20.1/vendor/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/jquery-rails-4.4.0/vendor/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/datetime_picker_rails-0.0.7/app/assets/fonts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/datetime_picker_rails-0.0.7/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/datetime_picker_rails-0.0.7/app/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/actioncable-6.1.4.1/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/activestorage-6.1.4.1/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/actionview-6.1.4.1/lib/assets/compiled
remote:        /tmp/build_220c7480/app/assets/config/manifest.js:1
re

Unfortunately, Heroku only cares about these folders:

/app/assets/config
/app/assets/data
/app/assets/javascripts
/app/assets/stylesheets

Desired Behavior

It would be nice if Heroku supported the /app/assets/builds folder. As a temporary workaround, I updated the following files to correct the issue:

  • package.json → Switched to building in the app/assets/stylesheets folder.
  • app/assets/config/manifest.js → Removed //= link_tree ../builds entry.

These changed allowed the deploy to Heroku to succeed. Maybe there is a better way to handle this entirely?

Environment

  • Ruby: ruby 3.0.2p107
  • Rails: 6.1.4.1
  • CSS Bundling Rails: 0.2.4
  • Heroku
@dhh
Copy link
Member

dhh commented Nov 11, 2021

cc @schneems, do we need to do anything on the Rails side to ensure that app/assets/builds work out of the box?

@bbonamin
Copy link

Perhaps there's something special about css:install:sass?

Tailwind worked out of the box for me in Heroku without any problems:

rails new demo --skip-turbolinks --skip-action-cable --skip-action-text --skip-active-storage --skip-webpack-install --skip-listen --skip-spring --skip-test  --no-skip-sprockets --database postgresql\n
cd demo
# removed webpack gem from Gemfile
bundle add cssbundling-rails
bundle exec rails css:install:tailwind
git commit -m 'initial commit'
heroku create
git push heroku

Heroku logs

remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Determining which buildpack to use for this app
remote:  !     Warning: Multiple default buildpacks reported the ability to handle this app. The first buildpack in the list below will be used.
remote: 			Detected buildpacks: Ruby,Node.js
remote: 			See https://devcenter.heroku.com/articles/buildpacks#buildpack-detect-order
remote: -----> Ruby app detected
remote: -----> Installing bundler 2.2.21
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-3.0.0
remote: -----> Installing dependencies using bundler 2.2.21
remote:        Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
remote:        Fetching gem metadata from https://rubygems.org/
remote:        Fetching gem metadata from https://rubygems.org/............
remote:        Fetching rake 13.0.6
remote:        Installing rake 13.0.6
remote:        Fetching concurrent-ruby 1.1.9
remote:        Fetching minitest 5.14.4
remote:        Fetching zeitwerk 2.5.1
remote:        Fetching builder 3.2.4
remote:        Installing builder 3.2.4
remote:        Installing minitest 5.14.4
remote:        Installing zeitwerk 2.5.1
remote:        Fetching erubi 1.10.0
remote:        Fetching mini_portile2 2.6.1
remote:        Installing concurrent-ruby 1.1.9
remote:        Fetching racc 1.6.0
remote:        Installing mini_portile2 2.6.1
remote:        Installing erubi 1.10.0
remote:        Fetching crass 1.0.6
remote:        Installing racc 1.6.0 with native extensions
remote:        Installing crass 1.0.6
remote:        Fetching rack 2.2.3
remote:        Fetching nio4r 2.5.8
remote:        Installing rack 2.2.3
remote:        Installing nio4r 2.5.8 with native extensions
remote:        Fetching websocket-extensions 0.1.5
remote:        Installing websocket-extensions 0.1.5
remote:        Fetching mini_mime 1.1.2
remote:        Fetching marcel 1.0.2
remote:        Installing mini_mime 1.1.2
remote:        Installing marcel 1.0.2
remote:        Fetching msgpack 1.4.2
remote:        Installing msgpack 1.4.2 with native extensions
remote:        Using bundler 2.2.21
remote:        Fetching method_source 1.0.0
remote:        Installing method_source 1.0.0
remote:        Fetching thor 1.1.0
remote:        Installing thor 1.1.0
remote:        Fetching ffi 1.15.4
remote:        Installing ffi 1.15.4 with native extensions
remote:        Fetching pg 1.2.3
remote:        Installing pg 1.2.3 with native extensions
remote:        Fetching tilt 2.0.10
remote:        Installing tilt 2.0.10
remote:        Fetching i18n 1.8.11
remote:        Installing i18n 1.8.11
remote:        Fetching tzinfo 2.0.4
remote:        Installing tzinfo 2.0.4
remote:        Fetching websocket-driver 0.7.5
remote:        Installing websocket-driver 0.7.5 with native extensions
remote:        Fetching rack-test 1.1.0
remote:        Installing rack-test 1.1.0
remote:        Fetching sprockets 4.0.2
remote:        Installing sprockets 4.0.2
remote:        Fetching mail 2.7.1
remote:        Installing mail 2.7.1
remote:        Fetching nokogiri 1.12.5 (x86_64-linux)
remote:        Installing nokogiri 1.12.5 (x86_64-linux)
remote:        Fetching puma 5.5.2
remote:        Installing puma 5.5.2 with native extensions
remote:        Fetching activesupport 6.1.4.1
remote:        Installing activesupport 6.1.4.1
remote:        Fetching bootsnap 1.9.1
remote:        Installing bootsnap 1.9.1 with native extensions
remote:        Fetching loofah 2.12.0
remote:        Installing loofah 2.12.0
remote:        Fetching rails-dom-testing 2.0.3
remote:        Installing rails-dom-testing 2.0.3
remote:        Fetching globalid 0.5.2
remote:        Installing globalid 0.5.2
remote:        Fetching activemodel 6.1.4.1
remote:        Installing activemodel 6.1.4.1
remote:        Fetching jbuilder 2.11.2
remote:        Installing jbuilder 2.11.2
remote:        Fetching rails-html-sanitizer 1.4.2
remote:        Installing rails-html-sanitizer 1.4.2
remote:        Fetching activejob 6.1.4.1
remote:        Installing activejob 6.1.4.1
remote:        Fetching activerecord 6.1.4.1
remote:        Installing activerecord 6.1.4.1
remote:        Fetching actionview 6.1.4.1
remote:        Installing actionview 6.1.4.1
remote:        Fetching actionpack 6.1.4.1
remote:        Installing actionpack 6.1.4.1
remote:        Fetching actioncable 6.1.4.1
remote:        Installing actioncable 6.1.4.1
remote:        Fetching activestorage 6.1.4.1
remote:        Installing activestorage 6.1.4.1
remote:        Fetching actionmailer 6.1.4.1
remote:        Installing actionmailer 6.1.4.1
remote:        Fetching railties 6.1.4.1
remote:        Installing railties 6.1.4.1
remote:        Fetching sprockets-rails 3.3.0
remote:        Installing sprockets-rails 3.3.0
remote:        Fetching actionmailbox 6.1.4.1
remote:        Installing actionmailbox 6.1.4.1
remote:        Fetching actiontext 6.1.4.1
remote:        Installing actiontext 6.1.4.1
remote:        Fetching cssbundling-rails 0.2.4
remote:        Installing cssbundling-rails 0.2.4
remote:        Fetching rails 6.1.4.1
remote:        Installing rails 6.1.4.1
remote:        Fetching sassc 2.4.0
remote:        Installing sassc 2.4.0 with native extensions
remote:        Fetching sassc-rails 2.1.2
remote:        Installing sassc-rails 2.1.2
remote:        Fetching sass-rails 6.0.0
remote:        Installing sass-rails 6.0.0
remote:        Bundle complete! 11 Gemfile dependencies, 53 gems now installed.
remote:        Gems in the groups 'development' and 'test' were not installed.
remote:        Bundled gems are installed into `./vendor/bundle`
remote:        Bundle completed (86.73s)
remote:        Cleaning up the bundler cache.
remote: -----> Installing node-v12.16.2-linux-x64
remote: -----> Installing yarn-v1.22.4
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        yarn install v1.22.4
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.3.2: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        [4/4] Building fresh packages...
remote:        Done in 3.47s.
remote:        yarn run v1.22.4
remote:        $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css
remote:
remote:        warn - You have enabled the JIT engine which is currently in preview.
remote:        warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
remote:
remote:        Done in 116ms.
remote:        Done in 0.75s.
remote:        yarn install v1.22.4
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.3.2: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        [4/4] Building fresh packages...
remote:        Done in 0.56s.
remote:        I, [2021-11-11T19:40:55.564000 #1316]  INFO -- : Writing /tmp/build_ae3d1d34/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
remote:        I, [2021-11-11T19:40:55.564714 #1316]  INFO -- : Writing /tmp/build_ae3d1d34/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
remote:        I, [2021-11-11T19:40:55.565723 #1316]  INFO -- : Writing /tmp/build_ae3d1d34/public/assets/application-2b311624485abaddd25751e8864f9ecf2b170d017a923010f37272b604fd604e.css
remote:        I, [2021-11-11T19:40:55.565864 #1316]  INFO -- : Writing /tmp/build_ae3d1d34/public/assets/application-2b311624485abaddd25751e8864f9ecf2b170d017a923010f37272b604fd604e.css.gz
remote:        Asset precompilation completed (6.58s)
remote:        Cleaning assets
remote:        Running: rake assets:clean
remote: -----> Detecting rails configuration
remote:
remote: ###### WARNING:
remote:
remote:        There is a more recent Ruby version available for you to use:
remote:
remote:        3.0.2
remote:
remote:        The latest version will include security and bug fixes. We always recommend
remote:        running the latest version of your minor release.
remote:
remote:        Please upgrade your Ruby version.
remote:
remote:        For all available Ruby versions see:
remote:          https://devcenter.heroku.com/articles/ruby-support#supported-runtimes
remote:
remote: ###### WARNING:
remote:
remote:        No Procfile detected, using the default web server.
remote:        We recommend explicitly declaring how to boot your server process via a Procfile.
remote:        https://devcenter.heroku.com/articles/ruby-default-web-server
remote:
remote:
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> console, rake, web
remote:
remote: -----> Compressing...
remote:        Done: 69.6M
remote: -----> Launching...
remote:        Released v6
remote:        https://secret-thicket-17360.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/secret-thicket-17360.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'heroku'.

@bkuhlmann
Copy link
Author

bkuhlmann commented Nov 16, 2021

🙇 Bruno. Yeah, a difference I see is this line being different (only because Tailwind compiles differently):

tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css

...but I don't think that's the issue. I also noticed that you are still requiring SASS Rails gem which you shouldn't need anymore once you've switched over to this new CSS Bundling gem? This means you are still installing the Ruby SASSC library and possibly Heroku needs all of this still? ...but that also defeats the point of what this gem is trying to do.

@saurabhbhatia
Copy link

saurabhbhatia commented Nov 16, 2021

I personally use postcss to build the css and it works perfectly fine on heroku. Postcss is also recommended by tailwind docs.

    "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"

There's actually no real need to use sass-rails or sassc gem. I've generated the app using

$ rails new myapp -j esbuild --css tailwind

@bkuhlmann
Copy link
Author

🙇 Saurabh. Good tip. Yeah, I'm going to experiment with that more and see if that helps.

ℹ️ I'm going to close this issue in favor of pursuing other vectors to enhance what this gem is doing further since it sounds like what I'm running into is beyond the scope of what this gem probably wants to tackle.

Thanks all!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants