I am trying to set an app's config.assets.prefix, to /api/assets. Stylesheet & javascript links work fine, as well as rails image helpers.
However the font-url and image-url sass helpers are still using /assets instead of /api/assets.
The fonts & images are available at both paths, but I need the path to be /api/assets because the app is one of several living behind a Cloudfront distribution, and the behaviour uses the api path prefix to direct requests to the correct origin.
Why are font-url and image-url not respecting config.assets.prefix?
(app is still on Rails 4.2.x)
Related
I'm building a website with Django and react, and since Django itself has a routing system, and I don't want to discard that, so I decide not to use javascript routing libraries.
I'm using webpack to bundle my files, but since I'm not using react router, there's a lot of webpack entry files, and a lot of bundled files (almost one per page), and I'm not sure if this is a 'correct' way.
And since there's one javascript file per page, the states or other things between different pages are not shared, every page is independent of each other. Can I have some 'shared' things without using react-router?
I know Facebook itself and Airbnb don't use react-router either, so how do they use react? How do they handle a lot of bundled files?
Can anyone work for a company that does not use react-router share your company's solutions?
The proper way to accomplish this is in the same way as you do it using vanilla javascript or some library like jQuery.
You don't manage a state in the front end, you grab the state server side and you put it in the HTML and then you use it with javascript.
React.js isn't different and if you're using redux you could put that data directly in the initial state of every page/section of your whole webpage.
<>
Yes. But in order to share in the way you imagine, you do have to make your app single paged. That is, you don't link around to different URL's. Any view change would change at most the #anchor part of the URL, but needn't do anything to the URL - just use Javascript logic to change what component(s) get rendered. As long as the base part of your URL stays on the same page, your shared objects will stick around.
I'm managing static files (JS, CSS, images, etc) in my Django application using staticfiles. This works fine, but I'd like to start dynamically serving pre-compressed sources when the user's browser is capable.
I went through the linked tutorial and, in production (on Apache) this works fine. I can include files using
<script src="/static/js/my-site"></script>
and it will load my-site.js in older browsers and my-site.js.gz when GZip encoding is supported. Great! But: this breaks local development using runserver. Of course, the staticfiles default view has no idea how to turn /js/my-site into /js/my-site.js (or .gz). To get runserver working, I need to specify the extension, which breaks content negotiation.
Is there a better way to configure Apache, so that I can always request .js (or .css, etc) and get served the compressed version transparently? Or can I tell Django how to find the requested resource without specifying an extension? I wouldn't think I'm the only one trying to do this...
there is no simple resolution. mostly because you are using something that was designed for the apache web server only (afaik).
i my opinion there are 3 solutions:
keep source .{js,css} files in separate directory, in development you can serve them from source dir or compressed one - simple, transparent and you can hide your uncompressed and non-obfuscated sources far from the reach
compress files with the .min.{js,css} ending - no need for separate directory, you can hide sources in apache (mod_rewrite)
write your own small middleware that will be simulating what apache does (it is few lines to select and rewrite path, you can even have different behavior depending on DEBUG config var)
use some dynamic solution e.g Django Compressor which will compile those files on-demand
(I'm using option 4 :) )
I'm building off of the lein new compojure-app template. I've got a route to / which works fine, as well as a route to /foo/ that works. Between the two pages, only the body changes, so I would like to stick as much as I can into a common view function (I'm using the default common in views/layout.clj). However, when serving resources by relative path, like css/main.css, my route to / works fine, but the route to /foo/ is looking for /foo/css/main.css instead of looking in the root directory. How do I serve static resources with relative paths to arbitrary routes?
You need to use wrap-base-url middleware along with include-css. The wrap-base-url will set *base-url* dynamic var which will be used to construct URLs for resources included with include-css, include-js or by using to-url directly.
If you deploy your app as a war in a servlet container, wrap-base-url will autodetect your app root context (e.g. /my-app/). Otherwise you need to provide it the root path manually as the second argument.
It appears that now in Rails 4 using asset pipeline and the sprocket-rails gem, when images are processed, their filename is appended with an md5 fingerprint like css and javascript. While this makes sense because md5 fingerprints are awesome, it makes it increasingly difficult to access that image from javascript. In rails 3.2, I could access the image with /assets/image_name.jpg and it would serve properly, but in rails 4 that asset doesn't exist, it only exists with the md5 fingerprint in the name.
I know that rails provides helpers to access the image via erb <%= asset-url("image_name.jpg") %> but that is less ideal in javascript, because I am not using erb in my js. There are plenty of ways I could hack this with data-attributes serving in the views or using a script tag in my view and setting some globals, but I am looking for a nice solution to this problem, if it exists.
Any help is appreciated, thanks.
Another option to consider (although I wouldn't recommend it) is to use a custom route in your application controller to grab the asset path for you in the controller and either return the url to the asset with the md5 hash or possibly just render the raw binary data of the asset (although this will add processing overhead to your application).
For example, you make a AJAX get request to
http://yourapp.com/images?file=my_image.jpg
Then in your controller your action method would look like this:
def images
ActionController::Base.helpers.asset_url(params[:file])
end
This would then return the url path to the asset. The downside to this method is that it requires that you make two requests on the JS side. The first to get the path to the asset and the second to actually load that asset with the returned path.
To reduce this down to one request you could have the application read the image from the file system and return the proper headers so the browser thinks it is an image being returned and therefor will render the url provided. However, this would be a lot more work for the application and a lot more unneeded disk IO on your server.
It may take two requests for each image on the client to achieve what you want but you have to sacrifice somewhere...
Why do you need to use the asset pipeline for images? I get the hashing behavior. But normally the assets would be preprocessed. If you put the images in the public hierarchy as in olden times, you would get normal path routing.
Here's a quote from the Asset Pipleline guide that I think might be germane.
"Assets can still be placed in the public hierarchy. Any assets under public will be served as static files by the application or web server. You should use app/assets for files that must undergo some pre-processing before they are served."
Unfortunately, I think that you are stuck either adding an ERB extension to your JS and using the asset helpers, or else not using the asset pipeline for the assets.
When you say "I am not using erb in my js", do you mean you don't want to, or simply that you aren't? Because you can!
If you rename the relevant JS files with the extension .js.erb then you can use the asset_url helper in these files like so:
var src = "<%= asset_url('photo.jpg') %>";
Let's say you've setup your site using Pylons, Django and most of the site runs fine and according to the framework used. However, what if you had a custom section that was entirely say, composed of flat html files and its own set of images, which you didn't have time to actually incorporate using the framework and were forced to basically support, under the same domain? Should there be some sort of default controller/view that's super bare minimalistic or do frameworks such as these somehow offer support in some smart way?
I realize also that potentially one could setup a new subdomain and reroute it to an entirely different directory, but I'm just curious as to how one would solve this when forced to deal with a framework.
When serving static pages I'd rather avoid having Django or Pylons handle the request, and handle it with the web server only. Using Nginx, you'd use a directive like:
location / {
root /whatever/the/path/is/;
# if the file exists, return it immediately
if (-f $request_filename) {
break;
}
# pass requests to MVC framework
# i.e. proxy to another server on localhost:
proxy_pass http://127.0.0.1:80;
}
For pylons you should be able to drop your static html files in the public directory. If there isn't a controller for a url then I think pylons looks in the public folder next.
For Django, I would serve these in exactly the same way as you serve your static assets - in your site_media directory, along with subdirs for js, css and img, you could have an html directory. Then the URL would just be /site_media/html/whatever.html.
In Django take a look at flatpages. It's part of the django.contrib package and uses flatpages middleware to serve up flat HTML controlled through the admin interface. For basic purposes, serving up additional about pages or the like this should do the trick.
You could also just create an HTML folder and - using mod_python, at least - set no handler for that path in the Apache configuration file (e.g. vhost.conf).