I am deploying an expression engine install and am trying to optimize the delivery of static assets as much as possible. What would likely be the better solution?
-Using Minimee to minify and concatinate css/js/html and deliver from the main server
OR
-Using a CDN like amazon cloudfront and doing the minification/gzip on that end and only serving static assets in this way?
OR
-some combination of both?
Thanks!
I'd definitely consider using Amazon Cloudfront as a CND first and then do additional minification as needed. I think that serving assets via a CND will give you bigger boost in performance than just minification.
Additionally, Assets plugin for Expression Engine has a built-in Amazon S3 support so it could make syncing your assets with seamless. Alternatively, you could rsync periodically, that works well too; I have used s3cmd tool in the last it works well (don't get turned off by the look of their website, s3cmd is very easy to use.
Related
We have a static website, we outsource the website maintenance, we don't have source code repository, so contractor edits the code on production server directly.
It has no problem, as our website built decades ago with old school html4 only. What it store on the web server, is what the source code is.
At today, the web site can be composed by UI framework, eg. Vue, React....etc. Sometimes the HTML file contains web components and other JS module. I have done a little google to learn that, building a website today need NPM, NodeJs, Webpack, Gulp....etc, they manage js module and bundle / built the production code...
My problem is, we like to revamp our website with modern UI (HTML5, CSS3, mobile friendly...). The tools I just mentioned will "process" the source code and output production code. We don't have the source code server (eg. git server), for our contractor to store the source code. ( our company management doesn't allow us to purchase private repository services on the internet. eg..github, gitlab...etc).
Can I keep using the old school way? the source code on the production web server is always the only source code...
I have tried myself to using the require.js, it loads js module on the browser, so I can handle module loading without node.js and Webpack, and writing the web component in vanilla js. Is it the only solution I can do?
You certainly could continue to manage this site the "old school" way, but in doing so, you'll be ignoring the benefits that all the modern tools give you.
For example
no git (or other version control) means no rolling back changes (or errors)
using version control software also means you have a backup and you don't need to set up a backup scheme on the production server to save your files
editing on the production server means if someone makes a typo, the site is messed up; etc.
I would strongly recommend modern tools; if cost is a concern, consider free tools:
Bitbucket has long offered free private repositories; Github has recently also started offering them.
Tools such as Hugo, Jekyll, and others permit creation of static sites quickly and easily.
Edit in answer to some of the comments...
Switching to a more modern development workflow (including version control) is not just about saving money, it's also about:
Does the employer/client want their developer(s) spending a lot of time managing the site - possibly including fixing problems - or do they want them working on something else?
Is the employer/client willing to have periods of time when the site does not work correctly? As #birdspider mentions in the comments above, if you have multiple people working on the website on the production server, they're going to be messing up each others' work. Note that the use of a VCS helps avoid avoid some of the problems with people stepping on each others' toes and it also make fixing those conflicts so much easier.
If you approach the employer/client with these points and their answer is "we just don't like it", then there's probably not much else you can do. If I were in your shoes, I'd be strongly tempted to either a) implement something on my own (just to preserve my own sanity, although really this is probably not a good idea) or b) find a new job.
So, I'm basically still pretty new to the whole npm/react.js (let alone react.rb) ecosystem, and I'm wondering if it would be possible to use reactrb with the gatsby static site generator.
I've been attempting to get opal/reactrb support through opal-webpack, but have been running into some issues (see this issue for some backstory https://github.com/cj/opal-webpack/issues/36). Specifically where I got stuck was trying to get it to play nice with bundler.
Is combining reactrb components with gatsby something that's even feasible? I'm hoping the answer is yes.
Sorry for the very late response. Reactrb has been renamed ruby-hyperloop and yes, you can certainly use it with Gatsby and any static site generator. The Hyperloop website is built with Middleman for example.
The best way to integrate Hyperloop into a static site generator is by using Hyperloop.JS https://github.com/ruby-hyperloop/hyperloop-js which has not server footprint at all.
Please see the Hyperloop website for examples and tutorials: http://ruby-hyperloop.io/
You can fetch data into Gatsby form any kind of source. You need to create a source plugin. The answer from #BarrieH is accurate, but could be slightly misleading.
You cannot query directly from an external GraphQL API into a component. Gatsby works by loading all your data into its own nodes system, then you pull data from those nodes into your components. This is what allows Gatsby to compile your data to static JSON files on disk, pre-fetch data for other pages, and so on.
Here's the relevant docs:
https://www.gatsbyjs.org/docs/create-source-plugin/
I am trying to find an example of a CDN server written in nodejs that does the following:
Minification of CSS & JS
Pre-Compiling LESS
Pre-Compiling CoffeeScript
Static Redirection if content already available in another bucket
A management interface
I realize that something like this already exists (S3 etc) but my interest is academic. I am interested if something like this has been done in node, and how.
You should have a look at express-cdn, a module to deliver compressed, minified and assets combined assets to CDN servers (Currently Amazon S3). It lacks some management interface but implements a couple of features you require.
Look into grunt, it has plugins for every kind of asset pipeline.
I cant find a module to perform all your tasks at the same time. You should mix modules in your application. I recommend you look at npmjs.org
Minification of CSS & JS ---> Here
Pre-Compiling LESS ---> Here
Pre-compiling CoffeScript (The command-line version of coffee is available as a Node.js utility.) Here
Static Redirection if content already available in another bucket: Nothing clear, you should have some kind of db for the files, for the redirections go to nginx.org <3
A management interface: Any Easy to extend Web-based File Manager for node.js?
RequireJS allows one to load libraries from a CDN. In case the CDN is down, one can also have a backup option where the file can be located some where else (in this case, we assume it is located locally). This is all done in the paths object. For example, in order to load JQuery from a CDN and then locally if the CDN is down, do this:
paths : {
jquery : [
'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
'lib/jquery',
]}
The above example would first try find query from the CDN, then from lib/jquery.
Question
I am under the impression that when using the requirejs optimiser, things get minified and obfuscated into one large file. How would the a backup option work in the optimiser? Would it be included in the minified file? If so, then there is absolutely no advantage to using a CDN. But if the backup option is not included in the optimised version, then how will optimised code cope if the CDN goes down?
Thanks in advance for the answers.
You can have different configuration settings for your regular site vs. what you use to feed the optimizer, so in this case you would use an "empty" config in your optimizer version so that it doesn't include jQuery in the combined/minified version:
paths: {
jquery: "empty:"
}
See the documentation for further details:
http://requirejs.org/docs/optimization.html#empty
Some middle languages, such as Stylus, provides two ways to be compiled: through connect middleware or through CLI tool. The later can generate static compiled assets(i.e. .css files).
So I want to use middleware on development mode but static assets on production. I know that I can use app.configure('developmen'...) to ask express (not) to use some middlewares on development mode.
On an IaaS enviroment, like Amazon EC2, I can run a simple shell script to automatically re-compile all my assets. But how about PaaS, specifically Heroku? How can I tell it where my .styl are and where the .css should be generated?
You may want to take a look at https://github.com/adunkman/connect-assets . It caches any built javascript or css files (it has stylus built-in support for stylus) if you pass it build:true .
You can ignore snockets (sprockets-like javascript include system) if you're not interested, although I enjoy using it. #= require_tree app and you include all the js files in that directory. And in development, you get separate script includes for easy debugging.
The biggest downside of serving directly with connect-assets on Heroku is that you need to git push to Heroku for every update to client code, which automatically triggers a restart. I ended up manually building my assets (with stylus and snockets), then uploading to S3. If you don't need to update the client code often, it's not that big of a problem though.
You can take a look at express-cdn, which will upload your assets to S3 on server start.
What I ended up doing was signing up at CloudFlare, and found that it wasn't as fast as using CloudFront, but it was very easy to setup and it works better than serving asset files from my dyno.