In my app I use letsrate gem, on development all work fine, but on production stars doesn't show why?
letsrate.js.erb file
$.fn.raty.defaults.path = "/assets";
$.fn.raty.defaults.half_show = true;
$(function(){
$(".star").raty({
score: function(){
return $(this).attr('data-rating')
},
number: function() {
return $(this).attr('data-star-count')
},
click: function(score, evt) {
$.post('<%= Rails.application.class.routes.url_helpers.rate_path %>',
{
score: score,
dimension: $(this).attr('data-dimension'),
id: $(this).attr('data-id'),
klass: $(this).attr('data-classname')
},
function(data) {
if(data) {
// success code goes here ...
}
});
}
});
});
$.fn.raty.defaults.path = "/assets";
It works on development but doesn't work on production, I think it doesn't work because in production after assets precompile all images move to the public/assets path
What do I need to do to show images?
mysite.com/assets/star-on-287807403acda8ff0b61388109ea5b6e.png
my images "stars" on this url
1 step: Please paste the following lines to application.js file:
//= require jquery.raty
//= require letsrate
2 step: Execute the following cmd line in your terminal:
rake assets:precompile RAILS_ENV=production
3 step: Copy .png files from /images folder into /public/assets directory
star-half.png
star-off.png
start-on.png
4 step: execute the following cmd line in your terminal:
rails s -e production
I am using NetBeans IDE environment, Rails 4.2 and letsrate gem 1.0.9
Related
I'm using graphs created with Highcharts. They work fine on my local development environment, but on Heroku the graphs are not showing. The div is just empty:
<div id="dashboard_chart_75"></div>
I'm using the lazy_high_charts gem and this is my application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require general.js.erb
//= require_tree .
//= require turbolinks
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require social-share-button
//= require ckeditor-jquery
This is the code the generate the chart:
spider_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(polar: true, type: 'line', height: #height)
f.pane(size: #size)
f.colors(['#C41D21','#1c77bb'])
f.xAxis(
categories: categories.map{ |c| [#survey.id,c.id, c.name] },
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
style: {
fontSize: '12px',
weight: 'bold',
width: '100%'
},
formatter: %|function() {return '' + this.value[2] + '';}|.js_code }
)
f.yAxis(gridLineInterpolation: 'polygon', lineWidth: 0, min: 0, max: 10,tickInterval: 1, tickWidth: 20)
f.tooltip(enabled: false)
f.series(name: "Gemiddelde van gewenste score", data: norm_scores, pointPlacement: 'on')
f.series(name: "Gemiddelde van huidige score", data: current_scores, pointPlacement: 'on')
f.legend(enabled: #legend, align: 'center', verticalAlign: 'top', y: 10, layout: 'vertical')
end
On production I see this error in the console:
Uncaught ReferenceError: Highcharts is not defined at window.onload
Which refers to this line:
window.chart_spider_chart = new Highcharts.Chart(options);
What could be the cause of this?
You really seem to be having a simple asset versioning problem, no reason to highcharts to behave differently in production.
Try clearing your assets and forcing precompiling using:
$ bundle exec rake assets:clobber
$ RAILS_ENV=production bundle exec rake assets:precompile
Then, add and commit your public/assets folder to push into Heroku. I have ran into a lot of trouble trusting that deployment precompile would work as expected. Some times compiling assets gets bugged and you need to change the file before precompiling to perceive a change.
If that doesn't work
You may have a problem with the gem in production, maybe it is inside a development block in gemfile, or maybe even =// require_tree . or any other require that would possibly insert that code before highcharts lib initializing, messing around with the order of the scripts would help (even though your pasted code doesn't reflect that)
Try looking for a .sprockets-manifest file in the public directory and delete it if found (it's a hidden file). If you compiled the assets locally and accidentally committed that file it can prevent asset compilation on Heroku.
You can also try to force a Heroku asset recompile by bumping the asset version in config/production.rb. I.E changing config.assets.version = 1.0 to 1.1 and then push.
I'm working on a Rails app that uses Semantic UI as its frontend framework.
I'm using Rails 5.
I followed the instructions on this site (https://github.com/Semantic-Org/Semantic-UI-Rails-LESS) to include the gems needed for Semantic to work on Rails.
In my html.erb file (the left portion of the photo), I've used some Semantic UI buttons, just to test out if Semantic loads.
I believe it loaded, but I'm getting a bunch of errors in my console (+ it is saying on the top right that the Style sheet could not be loaded).
What seems to be the problem?
EDIT
I was able remove the 'Style sheet could not be loaded' error by lowering my 'sprockets' gem version to 3.6.3, instead of 3.7.1. (I'm not sure if this is a safe way of doing it, though. There were warning of deprecated methods in the sprockets, so people were suggesting to use version 3.6.3 instead.) However, the other errors in the console log still remained.
EDIT 2
The 'Style sheet could not be loaded' error still remained.
EDIT 3
I switched to the sass version of Semantic UI, and the "Style sheet could not be loaded" error is now gone! But, the console still had the "error in parsing values" error. I still don't know what is causing this. Any thoughts/fixes to this?
Since Rails 5.1 you can use yarn to integrate Semantic UI with your app. Here's how I've done it. Process is not perfect (you still have to run rails tmp:clear after changing your theme files), but it gives you advantage of using the latest semantic-ui package and not being dependent on gem updates.
Using
Ruby: 2.5.1
Rails: 5.2.0
Create a new rails app
$ rails new semantic_integration
$ cd semantic_integration
$ bundle install
create semantic.json in your app directory
{
"base": "app/assets/semantic/semantic-ui",
"paths": {
"source": {
"config" : "src/theme.config",
"definitions" : "src/definitions/",
"site" : "src/site/",
"themes" : "src/themes/"
},
"output": {
"packaged" : "dist/",
"uncompressed" : "dist/components/",
"compressed" : "dist/components/",
"themes" : "dist/themes/"
},
"clean" : "dist/"
},
"permission": false,
"autoInstall": true,
"rtl": false,
"version": "2.3.1"
}
run $ yarn add semantic-ui.
This will install semantic-ui in app/assets/semantic
Add followin lines to config/initializers/assets.rb
# semantic-ui assets
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic')
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic', 'semantic-ui', 'src', 'themes', 'default')
Add Semantic UI css
// app/assets/stylesheets/application.css
*= require 'semantic-ui/src/semantic'
Add Semantic UI js
// app/assets/javascripts/application.js
// after turbolinks
//= require jquery
//= require semantic-ui/dist/semantic
Add init.js and require it in app/assets/javascripts/application.js
window.App || (window.App = {});
App.init = function() {
// here goes Semantic UI component initialisation
// i.e.
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item')
.on('click', function() {
$(this)
.addClass('active')
.siblings()
.removeClass('active');
});
};
$(document).on('turbolinks:load', function () {
App.init();
});
In you Gemfile add:
gem 'therubyracer'
gem 'less-rails'
and run bundle install
Now you app should be able to compile Semantic UI less files.
If you're getting error:
expected ')' got 'o'
go to app/assets/semantic/semantic-ui/src/theme.less
and remove (optional) keywords on #import statements
Icon font
go to: app/assets/semantic/semantic-ui/src/site/globals/site.variables
and add:
/* Fonts */
#fontPath : "assets/fonts";
then go to: app/assets/semantic/semantic-ui/src/site/elements/icon.variables
and add:
/*******************************
Icon
*******************************/
/*--------------
Font Files
---------------*/
#fontName: 'icons';
#src:
font-url("#{fontPath}/#{fontName}.eot?#iefix") format('embedded-opentype'),
font-url("#{fontPath}/#{fontName}.woff2") format('woff2'),
font-url("#{fontPath}/#{fontName}.woff") format('woff'),
font-url("#{fontPath}/#{fontName}.ttf") format('truetype'),
font-url("#{fontPath}/#{fontName}.svg#icons") format('svg')
;
#fallbackSRC: font-url("#{fontPath}/#{fontName}.eot");
/*--------------
Optional Files
---------------*/
/* Outline Icons */
#importOutlineIcons: true;
#outlineFontName: 'outline-icons';
#outlineSrc:
font-url("#{fontPath}/#{outlineFontName}.eot?#iefix") format('embedded-opentype'),
font-url("#{fontPath}/#{outlineFontName}.woff2") format('woff2'),
font-url("#{fontPath}/#{outlineFontName}.woff") format('woff'),
font-url("#{fontPath}/#{outlineFontName}.ttf") format('truetype'),
font-url("#{fontPath}/#{outlineFontName}.svg#icons") format('svg')
;
#outlineFallbackSRC: font-url("#{fontPath}/#{outlineFontName}.eot");
/* Brand Icons */
#importBrandIcons: true;
#brandFontName: 'brand-icons';
#brandSrc:
font-url("#{fontPath}/#{brandFontName}.eot?#iefix") format('embedded-opentype'),
font-url("#{fontPath}/#{brandFontName}.woff2") format('woff2'),
font-url("#{fontPath}/#{brandFontName}.woff") format('woff'),
font-url("#{fontPath}/#{brandFontName}.ttf") format('truetype'),
font-url("#{fontPath}/#{brandFontName}.svg#icons") format('svg')
;
#brandFallbackSRC: font-url("#{fontPath}/#{brandFontName}.eot");
Important!
For some reason less-rails gem monitors changes to
app/assets/semantic/semantic-ui/src/semantic.less but not any other
files in app/assets/semantic/semantic-ui/src folder. After changin
*.variables, *.overrides, or *.config files run rails tmp:clear or manually delete tmp/cache/assets folder.
Demo App
https://github.com/ziinfo/semantic_integration.git
In the past I always bundled my Angular 1 and Rails apps together and typically used heroku, which has worked great for me. Now that I'm over to Angular 2 I want to separate out my Angular and Rails code. I've created a very basic Angular 2 app via the Angular-Cli, but I haven't been able to figure out how to deploy it to Heroku. I'm not using expressjs or anything like that. Anyone figure it out yet?
Ok I came up with a solution. I had to add a very basic PHP backend, but it's pretty harmless. Below is my process.
First setup a heroku app and Angular 2 app.
Create your heroku app
Set the heroku buildpack to heroku/php
heroku buildpacks:set heroku/php --app heroku-app-name
Create a project via Angular-Cli
Add a index.php file to /scr with the below snippet
<?php include_once("index.html"); ?>
Add a Procfile to /scr with the below snippet
web: vendor/bin/heroku-php-apache2
Added /deploy to the .gitignore
Now I used a npm package to push a tarballs to heroku
Here's a simple package to upload the tarball, https://www.npmjs.com/package/heroku-deploy-tarball
npm i heroku-deploy-tarball --save
I'm also using tar.gz to create the tarball
npm i tar.gz --save
Then I created the deploy.js file at the root of my projecdt with the following code. I first run the buildCommand specified and then move the index.php and Profile to the dist folder. I then tarball the entire dist folder and it gets uploaded to heroku.
var deploy = require('heroku-deploy-tarball');
var targz = require('tar.gz');
var exec = require('child_process').exec;
var requestedTarget = process.argv[2];
if (!requestedTarget) {
console.log('You must specify a deploy target');
return;
}
var targets = {
production: {
app: 'heroku-app-name',
tarball: 'deploy/build.tar.gz',
buildCommand: 'ng build --prod'
}
}
var moveCompressFiles = function (callback) {
exec('cp ./src/index.php ./dist/index.php',
function(err) {
if(err)
console.log(err);
console.log('index.php was copied.');
});
exec('cp ./src/Procfile ./dist/Procfile',
function(err) {
if(err)
console.log(err);
console.log('Procfile was copied.');
});
new targz().compress('./dist', './deploy/build.tar.gz',
function(err){
if(err)
console.log(err);
else
callback();
console.log('The compression has ended!');
});
};
console.log('Starting ' + targets[requestedTarget].buildCommand);
exec(targets[requestedTarget].buildCommand, {maxBuffer: 1024 * 500}, function(error) {
if (!error) {
console.log(targets[requestedTarget].buildCommand + ' successful!');
moveCompressFiles(function () {
deploy(targets[requestedTarget]);
});
} else {
console.log(targets[requestedTarget].buildCommand + ' failed.', error);
}
});
Now just run node deploy production and it should deploy to heroku.
Edit
Just got word from heroku that they are working on an experimental buildpack that would allow for static sites like this. Here is the link to the build pack.
For the javascripts translations in Rails 4 I used the following library.
I did:
Gemfile:
gem "i18n-js", ">= 3.0.0.rc11"
In assets/javascripts/application.rb:
//= require i18n/translations
and finally I worked on the config/locales/en.yml data
Example:
en:
save:
text1: value1
independency:
text2: value2
In the view I used this for the translations, as in Rails.
series: [{
name: '',
data: [
["<%=t 'independency.text1' %>", independency],
["<%=t 'save.text2' %>", 100-independency],
]
}]
The thing is that I have to run this command rake i18n:js:export after doing any change in the translation file that involved the javascript part.
Moreover, the next day after starting the PC and opening again my application (localhost:3000) the javascript translations did not work at all. I had to run again the command rake i18n:js:export.
Is there any option to avoid executing this command every time? For me is difficult to understand the documentation.
I am trying to compile my Rails app assets using RAILS_ENV=production bundle exec rake assets:precompile, but this doesn't compile my AngularJS assets, so my console report this:
ActionController::RoutingError (No route matches [GET] "/assets/app/views/products/index.html"):
My AngularJS assets are under "/assets/app/", so I tried to compile the angular folders by adding following into my production.rb but still not working.
config.assets.precompile += %w(app/* bootstrap/* datatable/* ....
I can find the compiled index file under this path:
public/assets/app/views/products/index-2429bd0f8fc0762dcc075e51f0306c5b.html
Any idea?
UPDATE
Also tried config.serve_static_assets = false in production, but it cause more missing assets errors
Thanks
I've worked through this in my app by using constants to get the path structure right.
my angular app is journey (yours would obviously be different)
so I declare the angular app as a module
this.journey = angular.module('journey', [
'ngResource',
'ngRoute'
]);
Then I have a file called constants.js.erb where I declare my templates
journey.constant('INDEX_TEMPLATE', '<%= asset_path('journeys/journey_index.html')%>');
journey.constant('EDIT_JOURNEY_TEMPLATE', '<%= asset_path('journeys/journey_edit.html') %>');
Finally in my services I use the constants declared as the template url
journey.config([
'$routeProvider',
'$locationProvider',
'INDEX_TEMPLATE',
'EDIT_JOURNEY_TEMPLATE',
function ($routeProvider, $locationProvider, INDEX_TEMPLATE, EDIT_JOURNEY_TEMPLATE) {
$locationProvider.html5Mode(false);
return $routeProvider.when('/', {
templateUrl: INDEX_TEMPLATE,
controller: 'JourneyIndexController'
})
}
])
This way I don't have to worry about where the files are or how rails is organising the routing.
Hope this helps