How to setup webpacker on rails for production environment?

Question

I was about to setup/deploy my project on the server, so I tried running it first on my local machine using the production environment to make sure it's running properly. However, I'm having a problem about the assets used.

Im using rails version 5.2, with webpacker version 5.4 and nginx.

Currently testing it on my windows pc using docker with docker-compose.

I cleared the public/assets and public/packs then executed RAILS_ENV=production bundle exec rake assets:precompile

It was able to generate and compile the assets.

But if viewed on the browser, the layout is broken and lots of errors on the browser console:

GET http://w.local/ 500 (Internal Server Error)
11Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
w.local/:27 GET http://w.local/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:31 GET http://w.local/assets/application.self-12be097b9a2442b0b6cdcb5146d1d63c00abcde3675ff34d1de6126cb13e6714.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:30 GET http://w.local/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:28 GET http://w.local/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:26 GET http://w.local/assets/rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:29 GET http://w.local/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:35 GET http://w.local/packs/js/common-7e4e8325142b9e8c61a0.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:31 GET http://w.local/packs/js/utils/ajax/index-f3f37fd87a7659da86ce.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:31 GET http://w.local/packs/js/utils/modal/index-374c685fe01f171d6f5a.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:35 GET http://w.local/packs/js/modal-5ec40e25a92d9c39b790.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:35 GET http://w.local/packs/js/application-1ae2fd1d242e93138623.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:28 GET http://w.local/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:29 GET http://w.local/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:26 GET http://w.local/assets/rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:31 GET http://w.local/assets/application.self-12be097b9a2442b0b6cdcb5146d1d63c00abcde3675ff34d1de6126cb13e6714.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:27 GET http://w.local/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:30 GET http://w.local/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1 net::ERR_ABORTED 500 (Internal Server Error)
w.local/:35 GET http://w.local/packs/js/modal-5ec40e25a92d9c39b790.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:35 GET http://w.local/packs/js/common-7e4e8325142b9e8c61a0.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:35 GET http://w.local/packs/js/application-1ae2fd1d242e93138623.js 500 (Internal Server Error)
w.local/:31 GET http://w.local/packs/js/utils/modal/index-374c685fe01f171d6f5a.js net::ERR_ABORTED 500 (Internal Server Error)
w.local/:31 GET http://w.local/packs/js/utils/ajax/index-f3f37fd87a7659da86ce.js net::ERR_ABORTED 500 (Internal Server Error)
recaptcha__en.js:125 ReCAPTCHA couldn't find user-provided function: toggleSignUpSubmitBtn

In case I missed some configurations, heres my config/environments/production.rb

Rails.application.configure do
    # Verifies that versions and hashed value of the package contents in the project's package.json
    config.webpacker.check_yarn_integrity = false
    # Settings specified here will take precedence over those in config/application.rb.
  
    # Code is not reloaded between requests.
    config.cache_classes = true
  
    # Eager load code on boot. This eager loads most of Rails and
    # your application in memory, allowing both threaded web servers
    # and those relying on copy on write to perform better.
    # Rake tasks automatically ignore this option for performance.
    config.eager_load = true
  
    # Full error reports are disabled and caching is turned on.
    config.consider_all_requests_local       = false
    config.action_controller.perform_caching = true
  
    # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
    # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
    config.require_master_key = true
  
    # Disable serving static files from the `/public` folder by default since
    # Apache or NGINX already handles this.
    # config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
    config.public_file_server.enabled = true
  
    # Compress JavaScripts and CSS.
    config.assets.js_compressor = :uglifier
    # config.assets.css_compressor = :sass
  
    # Do not fallback to assets pipeline if a precompiled asset is missed.
    config.assets.compile = false
    # config.assets.compile = true
  
    # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
  
    # Enable serving of images, stylesheets, and JavaScripts from an asset server.
    # config.action_controller.asset_host = 'http://assets.example.com'
  
    # Specifies the header that your server uses for sending files.
    # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
    # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
  
    # Store uploaded files on the local file system (see config/storage.yml for options)
    config.active_storage.service = :local
  
    # Mount Action Cable outside main process or domain
    # config.action_cable.mount_path = nil
    # config.action_cable.url = 'wss://example.com/cable'
    # config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]
  
    # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
    # config.force_ssl = true
  
    # Use the lowest log level to ensure availability of diagnostic information
    # when problems arise.
    config.log_level = :debug
  
    # Prepend all log lines with the following tags.
    config.log_tags = [ :request_id ]
  
    # Use a different cache store in production.
    # config.cache_store = :mem_cache_store
    # config.cache_store = :memory_store
  
    # Use a real queuing backend for Active Job (and separate queues per environment)
    # config.active_job.queue_adapter     = :resque
    # config.active_job.queue_name_prefix = "byouten-junior_#{Rails.env}"
  
    config.action_mailer.perform_caching = false
    host = { :host => ENV['DOMAIN_NAME'].presence || '-------', }
    config.action_mailer.default_url_options = host
    Rails.application.routes.default_url_options = config.action_mailer.default_url_options
    #config.action_controller.asset_host = "https://#{host[:host]}"
    config.action_mailer.asset_host = "https://#{host[:host]}"
  
    config.action_mailer.delivery_method = :smtp
    config.action_mailer.smtp_settings = {
      address: '-------',
      port: '-------',
      authentication: '-------',
      domain: '-------',
      user_name: '-------',
      password: '-------',
      enable_starttls_auto: true,
    }
  
    # Ignore bad email addresses and do not raise email delivery errors.
    # Set this to true and configure the email server for immediate delivery to raise delivery errors.
    # config.action_mailer.raise_delivery_errors = false
  
    # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
    # the I18n.default_locale when a translation cannot be found).
    config.i18n.fallbacks = true
  
    # Send deprecation notices to registered listeners.
    config.active_support.deprecation = :notify
  
    # Use default logging formatter so that PID and timestamp are not suppressed.
    config.log_formatter = ::Logger::Formatter.new
  
    # Use a different logger for distributed setups.
    # require 'syslog/logger'
    # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')
  
    if ENV["RAILS_LOG_TO_STDOUT"].present?
      logger           = ActiveSupport::Logger.new(STDOUT)
      logger.formatter = config.log_formatter
      config.logger    = ActiveSupport::TaggedLogging.new(logger)
    end
  
    # Do not dump schema after migrations.
    config.active_record.dump_schema_after_migration = false
  end
  

here is my config/webpack/production.js :

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

I've been stucked with this for awhile now.

Thank you.

Answer 1

Is it possible if you could share how your docker-compose.yaml and Nginx config looks like? I guess it is caused by a wrong Nignx configuration.

Answer 2

I have to run yarn install first before doing the precompile and then it just worked. Sorry I think that's what I have missed.

Thanks to everyone who tried to help..