rails_6_assets_notes.txt

Rails 6  Sprockets / webpack
================================================================================================

- rails 6 comes with webpack by default 6 / for 7 you need to choose (esbuild, importmaps or webpacker)
- Webpacker gem is installed by default and webpacker:install is run by the Rails application generator.
- Action Cable channel generators will create ES6 stubs rather than use CoffeeScript
- Active Storage, Action Cable, Turbolinks, and Rails-UJS is loaded by a 
  new application.js pack in app/javascript by default 
  (unless any of the frameworks have been opted out).
- Active Storage, Action Cable, Turbolinks, and Rails-UJS npm modules are automatically 
  listed as dependencies in the default package.json.

*- All the JavaScript-related auxiliaries for Sprockets, like compression and uglifying, 
   is no longer configured or included by default.

*- No JavaScript stubs will be created by default when using the scaffold generators any more.

- Don't install a JS runtime by default any more

- Stop including coffee-rails by default
- Drop extra test for coffeescript inclusion by default
*- Stick with skip_javascript to signify skipping webpack
- app/javascript will be the new default directory for JS

- Start using the Webpack tag in the default layout


Webpacker = rails + webpack :
--------------------------------
https://github.com/rails/webpacker

# To install webpack if not installed

	> rails  webpacker:install

# config/webpacker.yml

	5:  source_entry_path: packs	--> this goes to app/javascript/pack

If we want webpack to look for additional directories for the JavaScript code, 
we can configure the setting resolved_paths in the config/webpacker.yml. 
The file is pretty self-explanatory in terms of the configuration options.

Live reloading using webpack-dev-server
---------------------------------------
Webpacker generates a file bin/webpack-dev-server which can be used for live reloading 
in the development phase. We have to run the webpack-dev-server separately for this 
purpose and then we can see live reloading and hot module replacement in action.


Production mode
---------------
In production, webpacker appends webpacker:compile task to the assets:precompile task. 
So if your build pipeline runs assets:precompile task it will take care of compiling 
files to be compiled by webpack as well. As wepack package is part of package.json, 
yarn will take care of installing it so that it can compile the JavaScript code.


check: https://github.com/rails/webpacker/blob/master/docs/webpack.md


To use sprockets instead (obsolete)
------------------------------------
- --skip-webpack-install

- Add the following gems, and remove webapcker

# gem 'webpacker', '~> 4.0'
gem 'sass-rails', '>= 5'
gem 'sprockets', '~> 4'
gem 'sprockets-rails', :require => 'sprockets/railtie'

- Then, for updating 

> bundle update sass-rails sprockets

For sprockets 4
app/assets/config/manifest.js:

//= link_directory ../javascripts .js

With sprockets3, add:

# Rails.application.config.assets.precompile += %w( application.js )

Restore app/assets/javascripts/application.js:

//= require rails-ujs
//= require turbolinks
//= require_tree .

Change javascript_pack_tag to javascript_include_tag in app/views/layout/application.html.erb

Note: rails-sass can pick file from node modules

Check: https://github.com/rails/sprockets#sprockets-directives

Using webpack to integrate bootstrap4
-------------------------------------

- When moving from sprockets to webpack, make sure to use yarn to install all needed
 libraries and include them back into application.js / styles.scss
 
- See notes

	> rails new rails6-bootstrap4
	> bundle --binstubs
	> yarn add bootstrap jquery popper.js

# Edit
# config/webpack/environment.js
...
	const webpack = require('webpack');
	environment.plugins.append(
	  'Provide',
	  new webpack.ProvidePlugin({
		$: 'jquery',
		jQuery: 'jquery',
		Popper: ['popper.js', 'default'],
	  }),
	);

# Edit
# app/javascript/packs/application.js

	import 'bootstrap/dist/js/bootstrap';
Or
	import 'bootstrap'

	document.addEventListener("turbolinks:load", () => {
		$('[data-toggle="tooltip"]').tooltip()
	})
	
	$(function () {
		$('[data-toggle="popover"]').popover()
	})


# For Style
Finally you need to navigate to assets/stylesheets and rename:

	application.css to application.scss 
	(for Bootstrap to correctly use sass) and add the following line:
	
	@import 'bootstrap/scss/bootstrap';

OR

# Create
# app/javascript/packs/styles.scss	<-- this will be added in your template

	@import 'bootstrap/scss/bootstrap';


# config/webpacker.yml
...
	extract_css: true

# template: app/views/layouts/application.html.erb

	<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
	<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
	...
	<body>
	  <div class='container'>
		<%= yield %>
	  </div>
	</body>

You still can refer to the new style file as following from application.js

	import './styles'

And use the following in your template:

	<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

	> bin/webpack-dev-server
	> bin/rails s

# Remember, if you want to use 

	<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Just make sure you have Back to app/assets/stylesheets/application.css / .scss

	*= require bootstrap
Or
	@import "bootstrap/scss/bootstrap";



# You might need to include bootstrap4 as a gem
# Gemfile
gem 'bootstrap',  '~>4.3.1'

- Rename app/assets/stylesheets/applications.css to app/assets/stylesheets/applications.scss

@import "bootstrap";



Font Awsome
------------
yarn add @fortawesome/fontawesome-free



Mmmmm Including Asset Pipeline Into Webpack
--------------------------------------------
To do this, we’ll need to update config/webpacker.yml to be able to resolve assets 
stored in the app/assets folder.

	resolved_paths: ['app/assets']

Back to app/assets/stylesheets/application.css / .scss

	h1 { color: green; }

	// app/javascript/styles.scss
	@import "~bootstrap/scss/bootstrap"; // never forget the semicolon
	
	// @import "./_custom";
	@import "stylesheets/application";	<---------


For Images:
-----------
Create a folder app/webpacker/images and move all your images in that folder.

application.js:

require.context('./images', true);

- asset_path('icon.png')
+ image_pack_path('icon.png')
 
.google-icon {
-   background-image: image-url('btn_google_dark.svg');
+   background-image: url('../images/btn_google_dark.svg');
} 


To use turbolinks (if not installed):
---------------------------------------
> yarn add @rails/ujs turbolinks

# app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()

> yarn add @rails/actioncable @rails/activestorage
require("@rails/activestorage").start()
require("channels")


More about javascript_pack_tag, stylesheet_pack_tag
----------------------------------------------------
https://github.com/rails/sprockets#sprockets-directives

# config/routes.rb
Rails.application.routes.draw do
  get '/home', to: 'home#index'
  root to: 'home#index'
end

# app/javascript/packs/home.js
alert('home loaded')

# app/controllers/home_controller.rb
class HomeController < ApplicationController
end

# app/views/home/index.html.erb
<h1>Home</h1>
<%= javascript_pack_tag 'home' %>

- Check 
https://medium.com/@adrian_teh/ruby-on-rails-6-with-webpacker-and-bootstrap-step-by-step-guide-41b52ef4081f

- Run rails assets:clobber to delete all your compiled webpacks under the public/packs folder.
- In regards to deployment: Webpacker hooks up a new webpacker:compile task to 
  assets:precompile, which gets run whenever you run assets:precompile. 

  If you are not using Sprockets, webpacker:compile is automatically aliased to 
  assets:precompile. 
  
  Similar to sprockets both rake tasks will compile packs in 
  production mode but will use 	 to load configuration from config/webpacker.yml 
  (if available).


- To include jquery in your application to use it .. 

application.js:

	import 'jquery/dist/jquery.min';

# But What did we do in enviroment.js

- The ProvidePlugin helps us avoid the multiple import or require statements we would 
  normally use when working with JQuery or Popper modules. 

- With this plugin in place, webpack will automatically load the correct modules 
  and point the named variables to each module’s loaded exports. 

const webpack = require('webpack');
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'],
    }),
);

* Now, you need to know that application.js allows you to use both require and import
* you really need to stick to one of them .. 

So, we have added jQuery as a plugin to be used by all javascript files within webpack
management. $ is not yet exposed to global, in order to use it .. 


application.js:

	var jQuery = require("jquery") // import jQuery from "jquery";
	global.$ = global.jQuery = jQuery;window.$ = window.jQuery = jQuery;

Or use expose-loader

	> yarn add expose-loader
	
environment.js

	environment.loaders.append('expose', {
		test: require.resolve('jquery'),
		use: [
			{ loader: 'expose-loader', options: '$' },
			{ loader: 'expose-loader', options: 'jQuery' }
		]
	});
	

Or # better

> yarn add jquery-ui-dist

config/webpack/environment.js:

	const { environment } = require('@rails/webpacker')

	const webpack = require('webpack');
	environment.plugins.append(
		'Provide',
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			Popper: ['popper.js', 'default'],
		}),
	);

	const aliasConfig = {
		'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
		'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
	};

	environment.config.set('resolve.alias', aliasConfig);

	module.exports = environment


application.js


	require("@rails/ujs").start()
	require("turbolinks").start()
	require("@rails/activestorage").start()
	require("channels")

	require("jquery") // Don't really need to require this...
	require("jquery-ui")

	import 'bootstrap'
	import "@fortawesome/fontawesome-free/js/all";

	import "./sb-admin-2/vendor/jquery-easing/jquery.easing.min.js"
	import "./sb-admin-2/js/sb-admin-2.min.js"


	$(function(){
	  //alert("kioo")
	})

	# this is required to use jquery outside .. 
	
	var jQuery = require("jquery") // import jQuery from "jquery";
	global.$ = global.jQuery = jQuery;window.$ = window.jQuery = jQuery;


	// Uncomment to copy all static images under ../images to the output folder and reference
	// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
	// or the `imagePath` JavaScript helper below.
	//
	// const images = require.context('../images', true)
	// const imagePath = (name) => images(name, true)

	//document.addEventListener("turbolinks:load", () => {
	//    $('[data-toggle="tooltip"]').tooltip()
	//})
	//
	//$(function () {
	//    $('[data-toggle="popover"]').popover()
	//})

	document.addEventListener("turbolinks:load", () => {
		$('[data-toggle="tooltip"]').tooltip()
		$('[data-toggle="popover"]').popover()
	})

	
- To include node_modules folder in search path + compilation	
	Add to file config/initializers/assets.rb:
	
	Rails.application.config.assets.paths << Rails.root.join('node_modules')
	
	

# Install Awesomefonts
-----------------------
- Fontawesome 4
	
	> yarn add font-awesome #4

	// application.scss:
	@import "font-awesome";


- Fontawesome 5

	> yarn add @fortawesome/fontawesome-free

	// app/javascript/stylesheets/application.scss
	// This one didn't work !!
	@import '@fortawesome/fontawesome-free';
	// Error: File to import not found or unreadable: @fortawesome/fontawesome-free.

	$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
	@import '@fortawesome/fontawesome-free/scss/fontawesome';
	@import '@fortawesome/fontawesome-free/scss/solid';
	@import '@fortawesome/fontawesome-free/scss/regular';
	@import '@fortawesome/fontawesome-free/scss/brands';
	@import '@fortawesome/fontawesome-free/scss/v4-shims';


	// app/javascript/packs/application.js
	import "@fortawesome/fontawesome-free/js/all";

	<i class="fab fa-twitter fa-2x"></i>




***** Notes:


Using existing assets sprockets from webpack
--------------------------------------------
Now, if you want to use existing assets in gems from webpack, you have to refer to these
assets via direct path

import "full_path_gem_asset"

Other wise, you can use erb along with webpack application.js.erb and fetch the paths as

	<% css_glob = Rails.application.root.join('app', 'javascript', 'application', 'stylesheets', '**', '*.{css}') %>
	<% Dir.glob(css_glob).each do |file| %>
	  import '<%= file %>';
	<% end %>

	import "<%= File.join(Gem.loaded_specs['mygem'].full_gem_path, 'app', 'assets', 'stylesheets', 'myfile.css') %>";

Now, from console, write the following to fetch all assets in search path

	- Rails.application.assets.paths.each { |path| puts path }; nil

Bootstra4 + jQuery !
--------------------
!!!!!

Yet, you can still drop webpack and get back to the old style (sprockets) to get benefits of existing assets piplines
* However, it's recommended to use yarn add to install you assets from there .. 

- based on latest sprockets

	You need to change manifest file to include a link to javascripts folder
	
	//= link application.js
	
- Create a new folder/file : app/assets/javascripts/application.js
- Change in the layout the javascript link to:

      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <%#= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

- in application.js

	//= require jquery
	//= require jquery_ujs
	//= require accounting.min

	// require spree/frontend

	// require spree/frontend/spree_auth
	// require spree/frontend/spree_multi_currency
	// require spree/frontend/spree_i18n

	//= require "popper"
	//= require "bootstrap"

* Of course, jquery and bootstrap are already installed as gems

	gem 'popper_js', '~> 1.14.5'

Or just download it inside assets/javascripts

If you installed it through yarn / node_modules make sure node_modules are within search path

	initializers/assets.rb

	Rails.application.config.assets.paths << Rails.root.join('node_modules')

application.js:

	//= require "popper.js"
	//= require "bootstrap"

Still want to let webpack point to your javascripts/application.js file 

* https://hackerthemes.com/bootstrap-cheatsheet/#custom-file
* https://github.com/seyhunak/twitter-bootstrap-rails



=================================================================================
=================================================================================
UI:
=================================================================================

The main access point to styling of frontend is:
vendor/assets/stylesheets/spree

└── frontend
	├── all.css
	└── slick_custom.scss

all.css is based on assets pipline of rails, this will include:

 *= require spree/frontend
 *= require_self
 *= require_tree .

and the spree/frontend (in solidus master repo):
(sass files)

└── spree
   ├── frontend
   │   ├── _skeleton.scss     <-- containres definitions in deifferent medias
   │   ├── _variables.scss    <-- variables !!
   │   └── screen.css.scss    <-------------\
   └── frontend.css:   ----- require this --/

screen.css.scss: (main styling of entire front end theme store / based on skeleton UI)

//= depend_on_asset "fontawesome-webfont.eot"
//= depend_on_asset "fontawesome-webfont.woff"
//= depend_on_asset "fontawesome-webfont.ttf"
//= depend_on_asset "fontawesome-webfont.svg"
//= depend_on_asset "spree/frontend/cart.png"

@import 'spree/frontend/skeleton';
@import 'spree/frontend/variables';
@import 'font-awesome';

.
.
.


_skeleton.scss: http://getskeleton.com/ (theme similar to bootstrap 4)
_variables.scss: solidus based styling / fonts 

	/*--------------------------------------*/
	/* Colors
	/*--------------------------------------*/
	$c_green:       #8dba53 !default;  /* Spree green    */
	$c_red:         #e45353 !default;  /* Error red      */

	$layout_background_color:   #FFFFFF !default;
	$title_text_color:          #404042 !default;
	$body_text_color:           #404042 !default;
	$link_text_color:           #00ADEE !default;

	$product_background_color:  #FFFFFF !default;
	$product_title_text_color:  #404042 !default;
	$product_body_text_color:   #404042 !default;
	$product_price_text_color:  #252525 !default;
	$product_link_text_color:   #BBBBBB !default;

	$cart_total_background_color: $link_text_color !default;
	$cart_total_text_color: #FFFFFF !default;

	/*--------------------------------------*/
	/* Fonts import from remote
	/*--------------------------------------*/
	@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic|&subset=latin,cyrillic,greek,greek-ext,latin-ext,cyrillic-ext);

	/*--------------------------------------*/
	/* Font families
	/*--------------------------------------*/
	$ff_base:       'Ubuntu', sans-serif !default;

	/*--------------------------------------
	  | Font sizes
	  |--------------------------------------
	  |- Navigation                         
	  |                                    */
		  $header_navigation_font_size:           14px !default;
		  $horizontal_navigation_font_size:       16px !default;
		  $main_navigation_header_font_size:      14px !default;
		  $main_navigation_font_size:             12px !default;
	/*|------------------------------------
	  |- Product Listing                         
	  |                                  */
		  $product_list_name_font_size:           12px !default;
		  $product_list_price_font_size:          16px !default;
		  $product_list_header_font_size:         20px !default;
		  $product_list_search_font_size:         14px !default;
	/*|------------------------------------
	  |- Product Details
	  |                                  */
		  $product_detail_name_font_size:         24px !default;
		  $product_detail_description_font_size:  12px !default;
		  $product_detail_price_font_size:        20px !default;
		  $product_detail_title_font_size:        14px !default;
	/*|------------------------------------
	  |- Basic
	  |                                  */
		  $heading_font_size:                     24px !default;
		  $sub_heading_font_size:                 14px !default;
		  $button_font_size:                      12px !default;
		  $input_box_font_size:                   13px !default;
		  $base_font_size:                        12px !default;
		  $border_color:                          lighten($body_text_color, 60) !default;
		  $default_border:                        1px solid $border_color !default;
		  $button_border_color:                   rgba(0, 138, 189, .75) !default;
		  $table_head_color:                      lighten($body_text_color, 60) !default;

* https://github.com/solidusio/solidus/blob/master/guides/source/developers/assets/override-solidus-assets.html.md

Override an image, stylesheet, or JavaScript file

To replace an entire file that is provided by a gem (like solidus_frontend or solidus_backend), 
you can create a new file in your project's app/assets directory that has a corresponding 
filename and location. You can do this with any image, stylesheet, or JavaScript file provided by a gem.
For example, to replace the solidus_frontend's _variables.scss at /app/assets/stylesheets/spree/frontend/_variables.scss 
you could save the replacement to your_app/app/assets/stylesheets/spree/frontend/_variables.scss 
with your own definitions inside.
This is more brittle than overriding single definitions, as described above, and isn't 
guaranteed to work in future Solidus versions.
Note that this method completely replaces any functionality provided by the stylesheet 
or JavaScript file.
This same method can also be used to override files provided by third-party extensions.

Bootstrap 3
-----------
- To install bootstrap3 on solidus !!	
	https://github.com/2beDigital/solidus_bootstraps_frontend	
	> rails solidus_bootstrap_frontend:install


	
* Bootstrap 4	
-------------
all.css:

	*= require bootstrap	
Or
	@import "bootstrap/scss/bootstrap";	

all.js:

	//= require popper.js/dist/umd/popper-utils.min
	//= require popper.js/dist/umd/popper.min
	//= require bootstrap/dist/js/bootstrap.min

	$(function() {
		$('[data-toggle="tooltip"]').tooltip();
	});

	$(function () {
		$('[data-toggle="popover"]').popover()
	})

	// If used turbo-links
	//= require turbolinks/dist/turbolinks
	document.addEventListener("turbolinks:load", () => {
		$('[data-toggle="tooltip"]').tooltip()
	})

Remember, we have install bootstrap files and jquery using yarn

	> yarn add bootstrap jquery popper.js --save
	> yarn add jquery-slim --save	# to use jquery without ajax

......

* Remember, mostly jquery is needed for the navbar, notifications and poppers are using
external library (popper).
* You can use jquery-slim that does;t contain effects nor ajax APIs
* Always consider using React or Vue, or even Angular.

	
Font-awesome
------------
> yarn add font-awesome #4
> yarn add @fortawesome/fontawesome-free #5

all.css:
	*= require font-awesome	# 4
	*= require @fortawesome/fontawesome-free # 5
Or
	// @import "font-awesome/scss/font-awesome.scss";
	@import "font-awesome";

all.js
	
	//= require @fortawesome/fontawesome-free/js/all

Select
------
https://github.com/snapappointments/bootstrap-select	
	> yarn add bootstrap-select

all.scss
	@import "bootstrap-select/sass/bootstrap-select";

all.js
	//= require bootstrap-select


* Customizing Bootstrap4 + Solidus
--------------------------------
# In order to use bootstrap4 in solidus, refer to all.css and all.js files in frontend
# First, we need to get rid of the old theming .... 

inside vendor/assets/stylesheets/spree/

└── frontend
	├── all.css
	├── main.scss			<-- create this file
	└── slick_custom.scss

update all.css:

 * require spree/frontend	<-- disable
 * require ./main			<-- new custom theming file

 *= require_self
 *= require_tree . (this will include the main new style file)

 *= require spree/frontend/spree_static_content
 *= require spree/frontend/solidus_blogging.css
 * require spree/frontend/solidus_reviews
 *= require spree/frontend/solidus_wishlist
 *= require spree/frontend/solidus_sale_prices

 *= require spree/frontend/solidus_contact_us


main.scss:

	@import url('//fonts.googleapis.com/css2?family=Poiret+One&display=swap');
	@import "font-awesome";

	$font-family-base: 'Poiret One', 'Manrope', 'Roboto Condensed', Geneva, Arial, sans-serif; // add this line first before importing bootstrap
	$font-size-base: 1.1rem;
	$line-height-base: 1.5;

	$enable-gradients: false;
	$primary-color: #303030;

	$enable-rounded: true;
	$enable-shadows: false;
	$enable-gradients: false;
	$enable-grid-classes: true;
	$enable-print-styles: true;
	$border-color: #e0e0e0;

	$form-feedback-invalid-color: red;

	$theme-colors: (
			"primary":    #202020,
			//"primary":    #d53939,
	  //"secondary":  #303030,
	  //"success":    #303030,
	  "info":       #444444,
	  //"warning":    #303030,
	  //"danger":     #303030,
			"light":      #f0f0f0,
			"dark":       #04aace
	);

	$grid-breakpoints: (
			xs: 0,
			sm: 576px,
			md: 768px,
			lg: 992px,
			xl: 1200px
	);

	@import "bootstrap/scss/bootstrap";
	@import "bootstrap-select/sass/bootstrap-select";
	@import "slick-carousel/slick/slick";
	@import "slick-carousel/slick/slick-theme";
	@import "../../bootstrap-image-checkbox/dist/css/bootstrap-image-checkbox";


# To customize what components to load

	/* import only the necessary Bootstrap files */
	@import "bootstrap/scss/functions"; 
	@import "bootstrap/scss/variables";
	
	/* -------begin customization-------- */
	/* change the primary theme color to red */
	$theme-colors: (
	  primary: red;
	);
	/* -------end customization-------- */
	
	/* finally, import Bootstrap to set the changes! */
	@import "bootstrap";


- Check files: _variables.scss, _functions.scss

# Extend Bootstrap classes with new custom classes (ie: row-dark)…

	/* 1. import only the necessary Bootstrap files */
	@import "bootstrap/scss/functions"; 
	@import "bootstrap/scss/variables";
	
	/* 2. begin customization ---- */
	/* --- end customization ------ */
	
	/* 3. import Bootstrap to set the changes! */
	@import "bootstrap";

	/* 4. add @mixin or @extend customizations here */
	/* create new custom classes from existing classes */
	.row-dark {
		@extend .row;
		background-color: #333333;
		color: #ffffff;
	}/* use @mixins */
	.btn-custom {
	  @include button-variant(red, white, red, red);
	}


Misc
----

	https://themehunt.com/items
	https://bootstrap4.com/
*	https://bbbootstrap.com/snippets/e-commerce-menu-header-using-html-css-21940848

	https://colorlib.com/wp/free-bootstrap-4-website-templates/
		- https://colorlib.com/preview/#onetech
		- https://colorlib.com/demo?theme=fashe
		- https://colorlib.com/preview/#amado
		- https://colorlib.com/demo?theme=coloshop

	Other than BT4:
	https://bulma.io/documentation/components/navbar/#navbar-brand
	https://github.com/jgthms/bulma
	
	https://material.io/components/
	https://getmdl.io/started/index.html (material design lite)



Production Considerations
=========================

	config.serve_static_files = false

Or in Rails 5:

	# config/environments/production.rb
	config.public_file_server.enabled = true

Or set ENV['RAILS_SERVE_STATIC_FILES'] to true.


Issues:
========

	when facing error such as ActionController::RoutingError (No route matches [GET] "/assets/application.js-920efc795bbe74efc45b09c59b03e18109155fbdf62b008ca8d094aed269d334.map")
	> rails tmp:clear