I want to use SoundManager2 to play sounds in my Ruby on Rails application. One of the things it wants is a directory with swfs. Where do I put it and then how do I configure my soundmanager? I want to put them in a directory /soundmanager/ and use JS such as the following:
<script>
if (soundManager) {
soundManager.setup({
url: '/soundmanager/',
onready: function() {
var myGameMusic = soundManager.createSound({
id: 'music1',
url: 'music1.wav'
});
myGameMusic.play();
},
ontimeout: function() {
console.log("Error in soundManager.setUp")
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
}
});
}
</script>
Where do I put the swfs (/soundmanager/) and how do I configure it to be public?
A related question is: suppose I have some PDFs that I want to make downlaodable. Where do I put those so that they're downloadable?
I'm confused because there is a /public directory but apparently it doesn't work in rails 3.1 anymore.
You put them in app/assets/
The key is that they are served from there in development mode.
In production mode, the assets are minified and placed in public/
This is called 'asset compilation' and was introduced in Rails 3.1 and has caused a lot of confusion as you have seen.
The web server should be serving static resources alongside Rails (not through Rails).
I had to do this to get a phpMyAdmin installation working with a Rails app on Apache/Passenger.
# Apache vhosts.conf
<Location ~ "/static_content">
PassengerEnabled off
</Location>
This serves content in /static_content directly from Apache, bypassing Rails completely. Ideally, this is the optimal solution to static content in any case.
Related
Is it possible to have one webpack dev server that's configured with multiple entry points (there are multiple pages on the site), each with a different configuration?
Specifically, I want one entry (the page's JS code) to be split into chunks, but another entry (JS localization bundle with translated messages) not to be chunked.
One possible complication, which you may ignore if you wish, is that I'm using Ruby-on-Rails webpacker, which automagically creates some of the webpack configuration for me.
You might be able to use a function for optimization.splitChunks.chunks to exclude your localization bundle by name as shown in the example in the Webpack docs: https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkschunks
In Webpacker land, it might look like the following:
environment.splitChunks((config) => Object.assign({}, config, {
optimization: {
splitChunks: {
chunks(chunk) {
// exclude `my-excluded-chunk`
return chunk.name !== 'my-excluded-chunk';
}
}
}
}))
So I'm writing a small app and currently working on the angular js front end. The backend is written in RoR but thats besides the point. I have a dependency ui.router in my angular.module so I can move around pages.
Link to github branch if interested: linky link
Paths:
App
-Assets
-Javascripts
-app.js (where the routing lies)
-Templates
-dashboard.html (this is the template I want to render)
-Views
-Layouts
-Index.html.erb <- this is the index
Heres the problem:
angular.module('SwoleMetrics', [
'ui.router',
'templates'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html', <<--- RIGHT HERE
controller: 'DashboardCtrl'
});
// default fall back route
$urlRouterProvider.otherwise('/dashboard');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
});
No matter what path I put into templateUrl, it never works. I have the same html file in basically every folder around app.js to see if it could read any of those but it always fails and just recursively inserts the parent div into the . Do any front end engineers know why?
The issue was the way the files were being served via rails. The sprockets gem was updated and no longer compatible with angular-ui-templates and broke everything. Downgraded to sprockets v. 2.x and it worked.
Its going to be relative to index.html. If index.html is under App then your path is going to be templateUrl: 'Templates/dashboard.html'.
When using the karma javascript test library (née Testacular) together with Rails, where should test files and mocked data go be placed?
It seems weird to have them in /assets/ because we don’t actually want to serve them to users. (But I guess if they are simply never precompiled, then that’s not an actual problem, right?)
Via this post: https://groups.google.com/forum/#!topic/angular/Mg8YjKWbEJ8
I'm experimenting with something that looks like this:
// list of files / patterns to load in the browser
files: [
'http://localhost:3000/assets/application.js',
'spec/javascripts/*_spec.coffee',
{
pattern: 'app/assets/javascripts/*.{js,coffee}',
watched: true,
included: false,
served: false
}
],
It watches app js files, but doesn't include them or serve them, instead including the application.js served by rails and sprockets.
I've also been fiddling with https://github.com/lucaong/sprockets-chain , but haven't found a way to use requirejs to include js files from within gems (such as jquery-rails or angularjs-rails).
We ended up putting tests and mocked data under the Rails app’s spec folder and configuring Karma to import them as well as our tested code from app/assets.
Works for us. Other thoughts are welcome.
Our config/karma.conf.js file:
basePath = '../';
files = [
JASMINE,
JASMINE_ADAPTER,
//libs
'vendor/assets/javascripts/angular/angular.js',
'vendor/assets/javascripts/angular/angular-*.js',
'vendor/assets/javascripts/jquery-1.9.1.min.js',
'vendor/assets/javascripts/underscore-min.js',
'vendor/assets/javascripts/angular-strap/angular-strap.min.js',
'vendor/assets/javascripts/angular-ui/angular-ui.js',
'vendor/assets/javascripts/angular-bootstrap/ui-bootstrap-0.2.0.min.js',
//our app!
'app/assets/javascripts/<our-mini-app>/**',
// and our tests
'spec/javascripts/<our-mini-app>/lib/angular/angular-mocks.js',
'spec/javascripts/<our-mini-app>/unit/*.coffee',
// mocked data
'spec/javascripts/<our-mini-app>/mocked-data/<data-file>.js.coffee',
];
autoWatch = true;
browsers = 'PhantomJS'.split(' ')
preprocessors = {
'**/*.coffee': 'coffee'
}
I found this project helpful as a starting point. https://github.com/monterail/rails-angular-karma-example. It is explained by the authors on their blog.
It's an example rails app with angular.js and karma test runner.
I have an app that works fine in on my development machine, but on my production server it uses a broken link to serve an image served using the Paperclip Gem.
Production environment is Linux(Debian), Apache, Passenger and I am deploying with Capistrano.
The app is stored in (a symlink that points to the public folder of the current version of the app deployed using capistrano):
/var/www/apps/root/appname
However, when I try and access it on the production server, the Apache error log displays this as the path it is looking in:
/var/www/apps/root/system
The correct path, however, is:
/var/www/apps/appname/shared/system
One option available to me is to create a symlink in root that directs system to the correct path, but I don't want to do this in case I want to deploy another app in the same root dir.
The url for this request is generated by rails, but Apache is what fetches the static resource (image files), so I have tried placing the following in my config/environments/production.rb:
ENV["RAILS_RELATIVE_URL_ROOT"] = '/appname/'
Which has resolved all other pathing issues I've been experiencing, but when rails generates the url (via the Paperclip gem), it doesn't seem to use it.
How can I set it so Paperclip uses the right path and only uses it production?
I've a workaround, add this as one of initializers:
config/initializer/paperclip.rb
Paperclip::Attachment.class_eval do
def url(style_name = default_style, options = {})
if options == true || options == false # Backwards compatibility.
res = #url_generator.for(style_name, default_options.merge(:timestamp => options))
else
res = #url_generator.for(style_name, default_options.merge(options))
end
# replace adding uri before res, minus final /
Rails.application.config.site_relative_url[0..-2]+res
end
end
At the moment Paperclip doesn’t work with ENV['RAILS_RELATIVE_URL_ROOT'] and the. You can follow the issue here:
https://github.com/thoughtbot/paperclip/issues/889
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal