All Projects → ilatif → active_reloader_rb

ilatif / active_reloader_rb

Licence: MIT, MIT licenses found Licenses found MIT LICENSE MIT LICENSE.txt
Rails gem that reloads browser as soon as any file is changed

Programming Languages

ruby
27200 projects - #4 most used programming language
HTML
46126 projects
javascript
137323 projects - #8 most used programming language

Projects that are alternatives of or similar to active reloader rb

Systemjs Hmr
Hot Module Replacement for SystemJS
Stars: ✭ 24 (+118.18%)
Mutual labels:  hot-reloading, hot-reload
Playgrounds
Better playgrounds that work both for Objective-C and Swift
Stars: ✭ 2,586 (+23409.09%)
Mutual labels:  hot-reloading, hot-reload
Cssfx
Allow runtime modification of JavaFX CSS
Stars: ✭ 95 (+763.64%)
Mutual labels:  hot-reloading, hot-reload
systemjs-tools
(dev)tools for working with SystemJS
Stars: ✭ 41 (+272.73%)
Mutual labels:  hot-reloading, hot-reload
Hr4r
Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
Stars: ✭ 28 (+154.55%)
Mutual labels:  hot-reloading, hot-reload
Systemjs Hot Reloader
reloads your modules as needed so that you can have satisfyingly fast feedback loop when developing your app
Stars: ✭ 215 (+1854.55%)
Mutual labels:  hot-reloading, hot-reload
Jet Live
c++ hot code reload for linux and macos
Stars: ✭ 283 (+2472.73%)
Mutual labels:  hot-reloading, hot-reload
hot-reload
Hot reload development for Go
Stars: ✭ 72 (+554.55%)
Mutual labels:  hot-reloading, hot-reload
Crx Hotreload
Chrome Extension Hot Reloader
Stars: ✭ 545 (+4854.55%)
Mutual labels:  hot-reloading, hot-reload
Webpack Chrome Extension Reloader
🔥 Hot reloading while developing Chrome extensions with webpack 🔥
Stars: ✭ 365 (+3218.18%)
Mutual labels:  hot-reloading
Webpack Extension Reloader
A upgrade from 🔥webpack-chrome-extension-reloader🔥, now on all browsers
Stars: ✭ 355 (+3127.27%)
Mutual labels:  hot-reloading
Webpack Hot Server Middleware
🔥 Hot reload webpack bundles on the server
Stars: ✭ 319 (+2800%)
Mutual labels:  hot-reloading
Vue Chrome Extension Template
vue chrome extension template
Stars: ✭ 532 (+4736.36%)
Mutual labels:  hot-reloading
React Hot Ts
Demo of React Hot Reloading + TypeScript + Webpack2
Stars: ✭ 96 (+772.73%)
Mutual labels:  hot-reloading
flutterOnExistApp
现有iOS工程中引入flutter, 支持插件扩展(见multiflutter分支) 解决官方内存泄漏问题,master分支最新的engine修复版
Stars: ✭ 62 (+463.64%)
Mutual labels:  hot-reload
The Ultimate Boilerplate
webpack 2, react hotloader 3, react router v4, code splitting and more
Stars: ✭ 85 (+672.73%)
Mutual labels:  hot-reloading
Scalable React Boilerplate
⭐️ Scalable feature-first React micro-framework made for Udacity Alumni collaborative projects
Stars: ✭ 260 (+2263.64%)
Mutual labels:  hot-reloading
Wcer
Webpack plugin to enable reloading while developing Chrome extensions.
Stars: ✭ 71 (+545.45%)
Mutual labels:  hot-reloading
lets-hotfix
Dynamic class reloading for java。Java代码热更新,支持本地、远程
Stars: ✭ 124 (+1027.27%)
Mutual labels:  reload
Mun
Source code for the Mun language and runtime.
Stars: ✭ 1,016 (+9136.36%)
Mutual labels:  hot-reloading

ActiveReloader

This is a Rails gem that reloads browser as soon as you do some changes in your Rails app. We as web developers are sometimes bounded in Change -> Switch to Browser -> Refresh -> Change cycle. This really hurts productivity. This gem will help you in breaking this cumbersome routine and your browser will be refreshed automatically whenever it detects any change in Rails code thus freeing you from manually updating browser and hence resulting in increased productivity.

Installation

Add this line to your application's Gemfile:

gem 'active_reloader'

And then execute:

$ bundle

Or install it yourself as:

$ gem install active_reloader

Usage

After gem installation just enter following line into your project's application.js

//= require active_reloader

By-default ActiveReloader looks for changes in app directory. You can easily add / modify directories according to your choice. To update directories list, first create an initializer in your Rails app and use following code:

ActiveReloader::Configuration.update do |config|
	config.paths << ["config", "db"]
end

You can also use following way to provide single directory:

config.paths << "config"

If you want to completely replace default directories and provide new ones you can use:

config.paths = "config"
# or
config.paths = ["config", "db"]

Always provide directories relative to your Rails app. For example if you want to look for changes in config/initializers directory you can use following code:

config.paths << "config/initializers"

How It Works

Dedicated Server

ActiveReloader runs on separate server than that of your Rails app. As soon as you starts your Rails app a separate server will automatically be created for serving ActiveReloader requests. ActiveReloader's server run on Rails' port + 1. This means if you have run your Rails app on port 3000 then ActiveReloader will automatically run on port 3001. Similarly if you choose port 5555 for your Rails app, ActiveReloader will use port 5556.

The reason of running ActiveReloader on a separate server is quite obvious. It don't want to interfere with your application code thus your Rails server don't need to serve requests related to ActiveReloader. The second reason is Rack::Lock middleware. This middleware is inserted by-default by Rails and because of this no other request can get processed until current running request is finished. Since ActiveReloader uses Ajax Long Polling to look for changes in your code, which means if ActiveReloader's Ajax request is getting processed your Rails app's requests will not be entertained. So the obvious solution is to use a separate server for doing stuff related to ActiveReloader.

Ajax Long Polling

You might be wondering why Ajax Long Polling when there are options available like WebSockets and Server-Sent Events. The answer to this question is, Simplicity. Doing Ajax requests seems quite natural way of doing things when it comes to getting updates from server. Other solutions require some configuration, but there is no need to do any for Ajax and it works on every Ruby based web-server. Since ActiveReloader's server is running locally it can serve requests at a blazing fast speed.

To increase performance of ActiveReloader's server, instead of doing Ajax requests after each 01 second I opted Ajax Long Polling, which upon requests arrival will keep looking for changes in a loop for 25 seconds and will break as soon as any change is detected.

Parent - Child Window Communication

active_reloader.js upon it's execution creates an iframe which points to ActiveReloader's server. Upon any change found ActiveReloader's JavaScript communicate with parent window by using postMessage which is considered to be the best option for communicating between parent and child windows.

Beware

ActiveReloader is intended to be used only in development environment. It is not developed to be the next hot code reloader / swapper. Necessary checks have been placed to make sure ActiveReloader only works in development environment when Rails server is running.

Special Thanks

Special thanks to following awesome developers for testing ActiveReloader gem.

Contributing

  1. Fork it ( https://github.com/ilatif/active_reloader/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]