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
36898 projects - #4 most used programming language
HTML
75241 projects
javascript
184084 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
Crx Hotreload
Chrome Extension Hot Reloader
Stars: ✭ 545 (+4854.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
systemjs-tools
(dev)tools for working with SystemJS
Stars: ✭ 41 (+272.73%)
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
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
universal-hot-reload
Hot reload client and server webpack bundles for the ultimate development experience
Stars: ✭ 79 (+618.18%)
Mutual labels:  hot-reload, reload
Cssfx
Allow runtime modification of JavaFX CSS
Stars: ✭ 95 (+763.64%)
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
hot-reload
Hot reload development for Go
Stars: ✭ 72 (+554.55%)
Mutual labels:  hot-reloading, hot-reload
fish
fish 是一个方便开发go程序的工具。 监视文件修改,然后编译go程序并自动运行。
Stars: ✭ 22 (+100%)
Mutual labels:  hot-reload
vue-ssr-example
Ready for use Example for Vue + Vuex + TS + SSR + Jest
Stars: ✭ 23 (+109.09%)
Mutual labels:  hot-reload
easywebpack-vue
Vue Webpack Building Solution, Support Vue Server Side Render (SSR), Client Side Render (CSR) Building
Stars: ✭ 29 (+163.64%)
Mutual labels:  hot-reload
flutterOnExistApp
现有iOS工程中引入flutter, 支持插件扩展(见multiflutter分支) 解决官方内存泄漏问题,master分支最新的engine修复版
Stars: ✭ 62 (+463.64%)
Mutual labels:  hot-reload
easywebpack-react
React Webpack Building Solution, Support React Server Side Render (SSR), Client Side Render (CSR) Building
Stars: ✭ 14 (+27.27%)
Mutual labels:  hot-reload
sanic-admin
sanic-admin is a command line tool for automatically restarting sanic.
Stars: ✭ 15 (+36.36%)
Mutual labels:  reload
vue-hot-reload-loader
Enable hot module replacement (HMR) on your Vue components
Stars: ✭ 20 (+81.82%)
Mutual labels:  hot-reload
ultimate-hot-boilerplate
🚀 node-react universal app boilerplate with everything on hot reload, SSR, GraphQL, Flow included
Stars: ✭ 35 (+218.18%)
Mutual labels:  hot-reload
lets-hotfix
Dynamic class reloading for java。Java代码热更新,支持本地、远程
Stars: ✭ 124 (+1027.27%)
Mutual labels:  reload
module-invalidate
Invalidate node.js modules loaded through require()
Stars: ✭ 19 (+72.73%)
Mutual labels:  reload

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].