Javascript and CSS loading twice due to Asset Pipeline - javascript

I may just be doing something wrong but all of my javascript files as well as my css files are each individually available. This would be perfect except asset pipeline also adds my applicaion.js which is making my javascript crash. Is there a way that I can tell rails not to load all the individual files, I want JUST the application.js/css files.
As you can see here, the search and sort bars are shown twice because the javascript is trying to run twice. Anyone else deal with this? I have seen a couple other people ask this question and have yet to see a good answer.

IIRC this is caused by you having pre-compiled assets in public/assets, but having config.assets.compile set to true in the config for your current environment.
Normally if you're compiling assets on each request application.css and .js will only contain code that you have specifically entered into those files in app/assets, whereas if the assets have been pre-compiled (and are in public/assets) you'll see all your css and javascript in those files.
To fix this issue rm -rf public/assets and you should be good to go.

Related

Typescript in `file://` environment

Recently I just picked up Typescript for a personal project. Since the project is designed to be ran locally (explicitly file://), I won't be able to use import/export features due to CORS restrictions. Aware of another similarly written question but lacking the specific context on my use case, I pose these questions:
How does one tell Typescript that all (or at least certain) scripts are imported to HTML via <script type="text/javascript" src="./source.js">?
Does Typescript's tsc build projects with this in mind? Also, does it edit existing HTML files to take this into consideration too? If not, are there tools to automate this process as well?
I don't want to bundle them like webpack or tsc-bundle does, since a secondary objective to this project is to keep all .js files human-readable just as much as the .ts files do.
Building Typescript using tsc -p tsconfig.json, configured to "target" : "ES2015" and "module" : "None", only outputs their respective .js files and doesn't update any of the HTML's <script> includes. Am currently maintaining the html file by manually inserting and juggling any new modules that emerges over the course of development.
My current load order in index.html is as follows:
index.js handles UI controls and loads first.
The remaining pseudo-modules .js files loads in-between, since these only define classes and doesn't perform any operations, so I figured it's safe to load them here.
main.js handles all the code from javascript "modules" and loads last.
My main concern is that my in-between modules might load out of order due to human error.
Edit: Running a local webserver is out of the question too, since the project is meant to target audience with limited technical knowledge, with the index.html file the only file they need to run in their browser.

How to move the modifed .js file after MVC application moved to production

I have a MVC web application and I have deployed it.
After that I have modified a .js file which alone needs to be moved to production. I did moved the .js file and it doesn't take the latest changes js file in production, instead it use only the previous one during the deployment.
My question is
1. Is the .js files are also get complied along with the .dll files?
2. Is there a way to move the modified .js file alone to the production without moving the complied code?
That may be because of client browser caching. please check to remove caching.
So, just CTR + Shift + Delete and clear cached data.
Is the .js files are also get complied along with the .dll files
No, always calls file will complied.
Is there a way to move the modified .js
Simple way is to replace your latest js file with old js file
production without moving the complied code?
No, need to deploy whole code all the times.
Moreover, you can go though a document: Determining What Files Need to Be Deployed
And this: https://stackoverflow.com/a/9322505

i18n-js Gem not locating necessary files

So I have an application which is using Rails 3.1.3, and gets deployed under Jruby. We allow the users to import their own themes (so their own CSS content) and for that reason we do not pre-compile our assets in production (I am aware of performance reasons of pre-compiling, however we don't find the performance hit that bad, and this was the best decision for us).
Since we want to support multiple languages, we also have translation files. Rails translations being in config/locales/*.yml and then we have translations required for our Javascript files. Previously we were putting these translations in a assets/javascripts/config.js file - but this is highly unscalable for the future. We wanted a solution that would allow the Javascript files to pull from the config/locales/*.yml files. We came across the i18n-js Gem ( i18n-js ).
This gem works exactly as expected locally. However, in production, we are getting errors. The first problem was application.js could not locate the i18n.js file. To me, this made sense, since we were not pre-compiling the assets, and the i18n-js Gem would obviously not be installed on the production server, the application would not have access to the i18n.js file. So I added the file manually in the assets/javascripts/ path. That fixed that error.
Now we are getting this error:
2012-10-05[INFO] - Internal Server Error: Sprockets::FileNotFound couldn't find file 'file:/tmp/Jetty_0_0_0_0_application.war____.r5dru7/webapp/WEB-INF/lib/tmp-gems.jar!/gems/activesupport-3.1.3/lib/active_support/locale/en.yml'
(in /tmp/Jetty_0_0_0_0_application.war____.r5dru7/webapp/WEB-INF/app/assets/javascripts/i18n/translations.js)
I have checked the tmp-gems.jar and the gems.jar and the file is actually there... So that confuses me. My thoughts are that the i18n-js Gem simple assumes that you are pre-compiling your assets and was not designed to function without that in production where the gems are not actually installed on the server. However, I was wondering if anyone could provide some guidance on that thought? Am I right, or is there a way around this?
Note: If I do pre-compile the assets - there are no issues in production. And also note, this production issue has only shown up when we started using this Gem - so I know it is related to that gem's usage, and nothing else. Everything was working before this change.
Also, if anyone has better suggestions for getting around the language problem (we don't want translations maintained in a JS file, AND in a locales YAML file). I would appreciate suggestions to that end as well!
Thanks!

CodeKit stopped "watching" folders for file changes, why?

I love CodeKit, but for some reason, it stopped "watching" for changes to the files in the folder I placed in there. I double checked the project configuration to make sure the output paths are correct, but when I make a change to any of the files being watched, CodeKit does nothing -- no minifying, syntax checking, compiling down .scss files to .css.
As the developer suggested to "refresh" CodeKit, I launched the app while holding down shift and sure enough CodeKit opened with no projects. So I re-added the project, and still, it is not watching the files. Has anybody ever encountered this with CodeKit?
I have experienced a similar issue before and it was because in the codekit project I had included the images folder and I generated a huge amount of .png images. Every time codekit ran it got hung up processing the pngs trying to compress them.
Try putting your images folder outside of your codekit project directory and see if that helps.
I've been having the same problem lately (Version 2.1.9). I haven't managed to figure out the root cause as yet, but I have figured out a way to solve this issue every time it occurs.
Rename your parent folder that contains all of your CodeKit projects. E.g. my HTDocs equivalent folder is called "Sites". In Terminal do this:
mv sites sites_temp
mv sites_temp sites
The first line will rename your sites folder to sites_temp, and then the second line will do the opposite.
For some reason this works every time for me.
I've written a short blog post on this matter here, but to be honest the above is my go-to solution whenever this problem occurs: http://www.joetannorella.com/codekit-mac-auto-compiling-compass-upon-file-change/

Bundler for javascript, or how to source control external javascript files

I am in the process of converting an existing Rails 3.1 app I made for a client into a Backbone.js app with the Rails app only as a backend server extension. This is only a personal project of mine, to learn more about Backbone.js.
While setting up Backbone.js (using Backbone-on-Rails), I noticed I have some dependencies (like backbone-forms) that come from external sources and are frequently updated.
I've grown accustomed to using Bundler to manage my Ruby gems, but I haven't found anything similar for JavaScript files. I'm wondering if there is any way to do the same for Javascript (and possibly css) files.
Basically I can see three possibilities to solve this issue:
Simply write down all the sources for each JS file and check these sources from time to time to see what has changed.
Use some kind of existing "Bundler for Javascript" type of tool, I've been looking for something like this but have yet to find anything (good).
Since most of these JS files will be coming from Git anyway, use Git to get the files directly and use checkout to get the latest version from time to time.
I prefer the last option, but was hoping on some more input from other people who have gone this route or preferred some other way to tackle this issue (or is this even an issue?).
I figure the Git way seems easy, but I am not quite sure yet how I could make this work nicely with Rails 3.1 and Sprockets. I guess I'd try to checkout a single file using Git and have it be cloned in a directory that is accessible to Sprockets, but I haven't tried this yet.
Any thoughts?
You don't mention it in your alternatives, but ideally you should use something like Maven to manage your dependencies. Unfortunately, there are no public repositories for javascript files. This discussion lists some other options which might be of help to you: JQuery Availability on Maven Repositories
For now I've settled on using the Git solution combined with some guard-shell magic.
The steps I follow:
Create a dependencies directory somewhere on your local drive
Clone the repositories with javascript (or css) files you want to use in the app
Set up a custom guard-shell command to do the following:
group 'dependencies' do
guard 'shell' do
dependencies = '~/path/to/dependencies/'
watch(%r{backbone-forms/src/(backbone\-forms\.js)}) {|m| `cp #{dependencies + m[0]} vendor/assets/javascripts/#{m[1]}` }
end
end
Place the Guardfile at the root of the app directory
It takes some time to set things up, but after that, when you have the Guard running, and you pull changes into your dependencies, the required files are automatically copied to your application directory, which are then part of your repository.
It seems to work great, you need to do some work for each new file you want to include in the asset pipeline, but all that is required is cloning the repository in your dependencies directory and adding a single line to your Guardfile, for example for the backbone-form css:
watch(%r{backbone-forms/src/(backbone\-forms\.css)}) {|m| `cp #{dependencies + m[0]} vendor/assets/stylesheets/#{m[1]}` }
Also, the reason I added this Guard to a group is because I keep my dependencies outside the main application directory, which means guard normally doesn't check my dependencies directory. To make this work, I start up my main Guard processes using bundle exec guard -g main and use bundle exec guard -w ~/path/to/dependencies -g dependencies in a new terminal window/tab to specify the -w(atchdir).

Categories

Resources