Installation

There are several ways to install Hyperloop into your development environment.

  • Running exclusively in your browser with Hyperloop.js
  • Integrating with the Rails Asset Pipeline
  • Integrating with Sinatra

Hypercomponents
Hyperloop.js

For small static sites that don't need a server backend you can use the hyperloop.js javascript library. Simply include the hyperloop.js file with your other javascript code, or access it directly via the CDN, and you are good to go.

This is another great way to experiment with Hyperloop. You don't need any setup or download to get started.

Setup

First add React, JQuery, hyperloop.js and opal-compiler.js to your HTML page:

<head>
  <!-- React and JQuery -->
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- Opal and Hyperloop -->
  <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/opal-compiler.min.js"></script>
  <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/hyperloop.min.js"></script>
</head>

Simple HelloWorld

Next, specify your ruby code inside script tags or link to your ruby code using the src attribute <script type="text/ruby" src=.../>

  <script type="text/ruby">

    class Helloworld < Hyperloop::Component

      def render
        DIV do
          "hello world !"
        end
      end

    end

  </script>

Finally, mount your Component(s) as a DOM element and specify the Component and parameters using data-tags:

<body>
  <div data-hyperloop-mount="Helloworld"
       data-name="">
  </div>
</body>

Tutorials

You are ready now to implement more interesting and complex Components.
You can start by the first tutorial of the Hyperloop series here :

Hyperloop
With Ruby On Rails

Hyperloop works great with new or existing rails apps, so it's pain free to introduce it to your application.

Hyperloop has been tested with the most recent Ruby On Rails verions:
Rails (~> 4.2), Rails (~> 5.0) and the last Rails (5.1.0). For the final Rails (~> 5.1.0), there are still few points to be aware of Hyperloop and Rails (~> 5.1.0)

Ruby On Rails installation

If you don't already have Ruby On Rails installed on your local machine you can install it by following one of several existing tutorials (for exemple: { Setup Ruby On Rails on Ubuntu 16.04 }) or you can use a cloud development environment like Cloud9 (follow our toturial Hyperloop and Cloud9 setup)

Hyperloop setup

In your Gemfile

gem 'hyperloop'

then

bundle install

Once the Hyperloop Gem and all its dependencies have been installed, it's time to run the hyperloop install generator.

rails g hyperloop:install

The generator creates the hyperloop structure inside the /app directory :

/app/hyperloop/
/app/hyperloop/components
/app/hyperloop/models
/app/hyperloop/operations
/app/hyperloop/stores

And updates your app/assets/javascripts/application.js file adding this line:

//= require hyperloop-loader

To be sure everything is setting up correctly, check your app/assets/javascripts/application.js:

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require hyperloop-loader

If you don't have already Ruby On Rails installed on your local machine and you want to try Hyperloop, you can setup a workspace in Cloud9 and also enjoy the co-development ability.

For that just follow our { Hyperloop and cloud9 setup } tutorial.

Simple HelloWorld

You can now test it by creating a very simple Component by running the hyperloop generator :

rails g hyper:component Helloworld

You can view the new Component created in /app/hyperloop/components/

Modify your routes.rb:

root 'hyperloop#helloworld'

Start your Rails server and browse http://localhost:3000.

You should see Hello world displayed by the Component.

A component can be rendered in different ways, from a controller or view file for example. Please consult the documentation: { Elements and rendering }

Tutorials

You are ready now to implement more interesting and complex Components.
You can start by the first tutorial of the Hyperloop series here:

Advanced configuration

You can find detailed information about Hyperloop configuration files and the advanced options on this page:

{ Advanced configuration }

With Sinatra

Hyperloop works fine with Sinatra. Use this Sinatra Example App to get started.

TODO

Deployment

For learning how to deploy a hyperloop application to a production server (particularly when using Rails), you can follow our tutorials:

{ Hyperloop deployment }

Next Steps

Check out our tutorials to learn more.

Good luck, and welcome!