DEV Community

Cover image for New Rails 6 App Without WebPacker
ngodi albert
ngodi albert

Posted on

New Rails 6 App Without WebPacker

Your new rails 6 app comes with webpacker by default. This means all your javascript is installed via yarn and managed by webpacker.
In some cases you will prefer using the old-style asset pipeline which has support for older libraries unlike the webpack.
As a result, you will need to bypass or ignore the default new rails installation and enforce the use of the asset pipeline manually.
This article is meant to give you a direct guide to all what you need.
1 - Start your new rails application ignore/skipping javascript installation.

 rails new [APP_NAME] --skip-javascript
Enter fullscreen mode Exit fullscreen mode

2 - Setup javascript includes in the application layout

 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

3 - Create assets/javascripts/application.js
add the following files to require the necessary js libraries.
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .

4 - Import the required css files

/*

  • This is a manifest file that'll be compiled into application.css, which will include all the files
  • listed below. *
  • Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
  • vendor/assets/stylesheets directory can be referenced here using a relative path. *
  • You're free to add application-wide styles to this file and they'll appear at the bottom of the
  • compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
  • files in this directory. Styles in this file should be added after the last require_* statement.
  • It is generally better to create a new file per style scope. * *= require_tree . *= require_self */

5 - Setup app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js

6 - And done ...

Top comments (0)