I'm trying to configure font-awesome for a Rails3 app hosted in Heroku and using CDN Sumo addon (which uses cloudfront CDN).
The problem is that Firefox is not loading the font assets. I think that the problem is the "Access-Control-Allow-Origin" problem in Firefox. But I can't fix it by using font_assets gem or setting CORS policy in Cloudfront (I don't have access to it because I'm using CDN Sumo addon).
Any idea?
Thanks!
Make sure that the Access-Control-Allow-Origin Header is set by the server that is hosting your fonts.
You can configure your origin server, if you need to change it, through the CDN Sumo dashboard.
CDN Sumo does not support custom CORS policies at this time.
For reference, these links might be useful:
Setting CORS for rails apps
Firefox and CORS
Heroku / CDN / fonts
I just discovered the excellent (and free) CDNJS (powered by Cloudflare) that supports CORS out of the box.
For Rails apps, add the font-awesome CSS link tag in your layout files like this:
<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css", :media => "all" %>
(Of course, if you are using the asset pipeline, ensure that you remove font-awesome from there.)
You can keep using CDN Sumo for the rest of your assets.
I had the same issue with a Rails 3 app on Heroku; Font-Awesome icons were not showing because I was running my assets through Sumo CDN.
There are several replies related to this, one of which is to put an after_filter in your application_controller to set the header value (by freemanoid), but that didn't work for me, and I had to use the custom middleware suggested by Peter Marklund.
Both solutions are posted here under the Rails 3.1 versions:
How to set access-control-allow-origin in webrick under rails?
Related
Hii Can anyone help me to upload the Shopware PWA on the server(Server Side Rendering). I have tried almost all the methods mentioned on the nuxt js official website but I can't upload the PWA on the server. By using yarn generate, it converts the PWA on the static website so when I changed it on the backend it doesn't reflect on the PWA(like category, pages, etc) and also doesn't change the title of the website dynamically. and I have also tried this method https://www.niagahoster.co.id/blog/upload-nuxtjs-di-hosting/ but it also doesn't work for me.
I decided to use Scribe to make documentation of my api. So i generated the docs folder offline then i pushed it onto app platform.
Now when i load the page the page loads but the css files do not use the https protocol for the whole website.
I have tried checking on the Github repo to see if their anyother people with the same challenges but i do not seem to see that people are facing this issue.
I will be thankful for the help.
I tried to make changes of the scribe.php file in the config folder in my laravel project but it still refused.
I placed the base_url to be https:localhost before pushing but still getting the same error
I had previously created a website for my band on thescratch.ie using create-react-app and hosted this using S3 and Cloudfront. I recently replaced the react site using Shopify instead and thescratch.ie domain now points to Shopify.
For new users to the site, everything works fine but old users continue to see a broken cached version of the react website, not a Shopify site. I had assumed that the cache would eventually expire for these users, but it's been like this for a couple of months now.
Looking at the Chrome dev tools network panel I notice a couple of things:
Almost everything is being served from cache - the index.html and main.js return a 200 and have a size of (service worker)
Images return a 404
The manifest.json returns a 404
I'm wondering if there's a way to expire the service worker cache? Is it possible to do this by hosting a new manifest.json file on Shopify?
Thanks in advance.
I ran into the same issue in a combination of CRA & Gatsby.
Found this Gatsby plugin which helped me.
The underlying article maybe also can help you.
tl;dr in my understanding you need to place a service-worker.js in the root directory containing the code to unregister the old service worker.
There's a feature in Angular Universal that allows you to pre-render pages at build-time. Can this be used to pre-render all your pages and run Angular Universal without a server?
Once html pages have been pre-rendered using angular universal (using nodejs server or asp.net core server), you can use any CDN to serve the pre-generated html.
See https://universal.angular.io/overview/
Edit: have a look at the starer kit
https://github.com/angular/universal-starter
Basically, you can reuse the prerender.js file which will write the rendered html files (for specified static routes) to the dist/browser folder, or wherever you want to. This is that folder that you deploy to a static host after
Well, you're always going to need to have a server somewhere in the equation: the only question is how much you have to set it up yourself versus how much can the current crop of tools and technologies do it for you.
In this talk from Node Summit Steven Fluin from Google talks about Firebase at the end. Pay attention to the bit about 'cloud functions' (at about 20 mins). Your Angular app will be rendered on the server using Firebase cloud functions. When a user interacts with your app, some JS is run to figure out what to send down (from the Firebase server) to the user. "You don't need to set up a server at all; everything is running in Firebase."
I haven't used Firebase myself - I'm using Angular Universal, which has a Node.js server as you know - but this sounds very nice. I found setting up Angular Universal really tricky (but got there in the end).
We are looking into the new bundling feature of ASP.NET MVC 4 and are wondering if there are any advantages to bundling CSS files that are served from a CDN?
Is there even a way to bundle multiple files served up from a CDN in ASP.NET MVC 4?
This doesn't work:
var cdnCssPath = "http://MyCdn/css/";
bundles.Add(new StyleBundle("~/Content/css", cdnCssPath)
.Include("~/Content/site.css")
.Include("~/Content/Test1.css")
.Include("~/Content/Test2.css")
.Include("~/Content/Test3.css")
);
Any ideas?
First of all it depends on if you have access to a CDN where you can upload your own files or if you're using, for example, google's CDN to get external libraries like jQuery.
If you pull files from a CDN and bundle them, you would lose the advantage of using a CDN unless you're able to upload your new bundled file to the CDN.
For example if you get jQuery and jQuery UI from google's CDN and bundle them, you're no longer using google's CDN, you're instead serving up local resources (the created bundle).
You may have reduced the number of requests, but instead of 2 requests too google's CDN (which has a high probabillity to be cached already by the users browser) there's one request to your server (which is not as likely to be cached).
So in short I would say that there's no advantage to bundle files together that comes from a CDN, however uploading your bundled files to a CDN is different story.
Do note that it is possible to use use CDN for bundles though:
look at the "Using a CDN" part of this article
Edit: Here's an article that explains when to use a CDN or not and why, a bit more indepth than my answer http://www.kendoui.com/blogs/teamblog/posts/13-11-07/know-when-to-cdn.aspx