{"id":26403065,"url":"https://github.com/fzingg/hyperloop-showcase-heroku","last_synced_at":"2025-09-07T07:07:57.679Z","repository":{"id":47695457,"uuid":"82292959","full_name":"fzingg/hyperloop-showcase-heroku","owner":"fzingg","description":"Deployment of the Hyperloop-showcase on a HEROKU Server.","archived":false,"fork":false,"pushed_at":"2017-02-23T15:00:34.000Z","size":563,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-11T16:08:47.373Z","etag":null,"topics":["heroku","hyper-rails","hyperloop","isomorphic","rails","react-component","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fzingg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-17T11:57:15.000Z","updated_at":"2017-02-18T17:59:01.000Z","dependencies_parsed_at":"2022-08-22T18:41:09.805Z","dependency_job_id":null,"html_url":"https://github.com/fzingg/hyperloop-showcase-heroku","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fzingg%2Fhyperloop-showcase-heroku","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fzingg%2Fhyperloop-showcase-heroku/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fzingg%2Fhyperloop-showcase-heroku/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fzingg%2Fhyperloop-showcase-heroku/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fzingg","download_url":"https://codeload.github.com/fzingg/hyperloop-showcase-heroku/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244057928,"owners_count":20390995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["heroku","hyper-rails","hyperloop","isomorphic","rails","react-component","tutorial"],"created_at":"2025-03-17T15:29:41.512Z","updated_at":"2025-03-17T15:29:42.163Z","avatar_url":"https://github.com/fzingg.png","language":"JavaScript","readme":"# Deploying the Hyperloop Showcase App on Heroku (Debug way)\n\n## Preamble\n\nThis tutorial is the third in a series of four:\n\n+ Chapter 1: [Hyperloop Showcase](https://github.com/fzingg/hyperloop-showcase) \n+ Chapter 2: [Hyperloop Showcase Template](https://github.com/fzingg/hyperloop-showcase-template) \n+ Chapter 3: [Hyperloop Showcase with Heroku (Debug way)](https://github.com/fzingg/hyperloop-showcase-heroku) \n+ Chapter 4: [Hyperloop Showcase with Heroku (Fast way)](https://github.com/fzingg/hyperloop-showcase-template-heroku) \n\nFor more information: [HyperLoop Web site](http://ruby-hyperloop.io/)\n\n## INTRODUCTION\n\nThis tutorial is a very detailed list of commands and file modifications to achieve a working deployment of the **Hyperloop showcase** on a **Heroku** Server.\n\nOf course the **Heroku** deployment could be faster, but this tutorial allows programmers to check step by step where an error could happen.\n\nThe live **Heroku** demo deployment is here : [https://damp-harbor-10403.herokuapp.com](https://damp-harbor-10403.herokuapp.com)\n\nThe **Hyperloop showcase** has already been deployed successfully on a classic independent VPS (Rails 5.01, Capistrano and Passenger) :\n[http://http://hyperloop-showcase.pixagency.com](http://hyperloop-showcase.pixagency.com)\n\n\n## DEPLOYING TUTORIAL\n\n\n#### Set up a new Heroku app\n\n```\nheroku login\ngit clone https://github.com/heroku/ruby-getting-started.git\ncd ruby-getting-started\nheroku create\ngit push heroku master\nheroku open\n```\nThe initial Heroku app is coming with a Rails 4.x version. We are going to upgrade it to a Rails 5.0.1 version.\n\n#### Upgrade to Rails 5.0.1\n\n```\n#Gemfile\n\n\t\tsource 'https://rubygems.org'\n\t\truby '2.3.1'\n\n\t\tgem 'rails', '~\u003e 5.0.1'\n\t\tgem 'puma', '3.7.0'\n\t\tgem \"puma_worker_killer\"\n\t\tgem 'sass-rails', '~\u003e 5.0'\n\t\tgem 'uglifier', '\u003e= 1.3.0'\n\t\tgem 'coffee-rails', '~\u003e 4.2'\n\t\tgem 'pg', '0.18.4'\n\t\tgem 'jquery-rails'\n\t\tgem 'turbolinks', '~\u003e 5'\n\t\tgem 'jbuilder', '~\u003e 2.5'\n\t\tgem 'react-rails', '1.4.2'\n\t\tgem 'hyper-rails', '0.4.1'\n\t\tgem 'opal-rails', '0.9.1'\n\t\tgem 'opal-browser', '0.2.0'\n\t\tgem 'hyper-react', '0.11.0'\n\t\tgem 'hyper-router', '2.4.0'\n\t\tgem 'therubyracer', platforms: :ruby\n\t\tgem 'opal_hot_reloader', git: 'https://github.com/fkchang/opal-hot-reloader.git'\n\t\tgem 'foreman'\n\n\t\tgroup :development, :test do\n\t\t  gem 'byebug', platform: :mri\n\t\tend\n\n\t\tgroup :development do\n\t\t  gem 'web-console', '\u003e= 3.3.0'\n\t\t  gem 'listen', '~\u003e 3.0.5'\n\t\t  gem 'spring'\n\t\t  gem 'spring-watcher-listen', '~\u003e 2.0.0'\n\t\tend\n\n\t\tgem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]\n```\n```ruby\n#config/environments/development.rb\n\n\t\tRails.application.configure do\n\t\t\t    \n\t\t\t  config.cache_classes = false\n\t\t\t  config.eager_load = false \n\t\t\t  config.consider_all_requests_local = true\n\n\t\t\t  if Rails.root.join('tmp/caching-dev.txt').exist?\n\t\t\t    config.action_controller.perform_caching = true\n\n\t\t\t    config.cache_store = :memory_store\n\t\t\t    config.public_file_server.headers = {\n\t\t\t      'Cache-Control' =\u003e 'public, max-age=172800'\n\t\t\t    }\n\t\t\t  else\n\t\t\t    config.action_controller.perform_caching = false\n\n\t\t\t    config.cache_store = :null_store\n\t\t\t  end\n \n\t\t\t  config.action_mailer.raise_delivery_errors = false\n\t\t\t  config.action_mailer.perform_caching = false\n\t\t\t  config.active_support.deprecation = :log\n\t\t\t  config.active_record.migration_error = :page_load\t\t  \n\t\t\t  config.assets.debug = true\n\t\t\t  config.assets.quiet = true\n\t\t\t  config.file_watcher = ActiveSupport::EventedFileUpdateChecker\n\t\tend\n```\n```ruby\n#config/environments/production.rb\n\n\t\tRails.application.configure do\n\t\t\t  \n\t\t\t  config.cache_classes = true  \n\t\t\t  config.eager_load = true\n\t\t\t  config.consider_all_requests_local       = false\n\t\t\t  config.action_controller.perform_caching = true \n\t\t\t  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?\t \n\t\t\t  config.assets.js_compressor = :uglifier\t\t\t  \n\t\t\t  config.assets.compile = true\t\t\t \n\t\t\t  config.log_level = :debug\t\t\t  \n\t\t\t  config.log_tags = [ :request_id ]\t\t\t  \n\t\t\t  config.action_mailer.perform_caching = false\t\t  \n\t\t\t  config.i18n.fallbacks = true\t\t \n\t\t\t  config.active_support.deprecation = :notify\t\t \n\t\t\t  config.log_formatter = ::Logger::Formatter.new\t\t  \n\n\t\t\t  if ENV[\"RAILS_LOG_TO_STDOUT\"].present?\n\t\t\t    logger           = ActiveSupport::Logger.new(STDOUT)\n\t\t\t    logger.formatter = config.log_formatter\n\t\t\t    config.logger = ActiveSupport::TaggedLogging.new(logger)\n\t\t\t  end\n \n\t\t\t  config.active_record.dump_schema_after_migration = false\n\t\tend\n```\n\n```\nrm Gemfile.lock\nbundle install\nheroku local web\n```\nBrowse to http://localhost:5000\n\n#### Update database config file\n\n```yml\n#config/database.yml\n\n\tdevelopment:\n\t  \u003c\u003c: *default\n\t  database: ruby-getting-started_development\n\t  username: your-username\n\t  password: your-password\n```\n```\nbundle exec rake db:create db:migrate\nheroku local web\n```\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### Implement a React Component\n\n```javascript\n//app/assets/javascripts/application.js\n\n\t\t//= require 'components'\n\t\t//= require 'react_ujs'\n\t\t//= require 'jquery'\n\t\t//= require 'jquery_ujs'\n\n\t\t//= require 'turbolinks'\n\t\t//= require_tree .\n\n\t\tOpal.load('components');\n```\n```ruby\n#app/views/components.rb\n\n\t\trequire 'opal'\n\t\trequire 'hyper-react'\n\t\trequire 'react/react-source'\n\t\trequire 'reactrb/auto-import'\n\t\tif React::IsomorphicHelpers.on_opal_client?\n\t\t  require 'opal-jquery'\n\t\t  require 'browser'\n\t\t  require 'browser/interval'\n\t\t  require 'browser/delay'\n\t\t  # add any additional requires that can ONLY run on client here\n\t\tend\n\n\t\trequire_tree './components'\n```\n```\nrails g hyperloop:component Home::Show\n```\n```ruby\n#config/routes.rb\n\n\t\troot 'home#show'\n```\n```ruby\n#app/controllers/home_controller.rb\n\n\t\tclass HomeController \u003c ApplicationController\n\t\t    def show\n\t\t    end\n\t\tend\n```\n```ruby\n#app/views/home/show.html.erb\n\n\u003c%= react_component 'Home::Show', {}, { prerender: false } %\u003e\n```\n```\nheroku local web\n```\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### HyperMesh Setup\n\n```\n#Gemfile\n\n\tgem 'hyper-mesh', '0.5.3'\n```\n\n```\nbundle update\n```\n\n```\n#app/views/components.rb\n\n\trequire 'opal'\n\n\trequire 'reactrb/auto-import'\n\trequire 'react/react-source'\n\trequire 'hyper-react'\n\tif React::IsomorphicHelpers.on_opal_client?\n\t  require 'opal-jquery'\n\t  require 'browser'\n\t  require 'browser/interval'\n\t  require 'browser/delay'\n\t  # add any additional requires that can ONLY run on client here\n\tend\n\n\trequire 'hyper-mesh'\n\trequire 'models'\n\n\trequire_tree './components'\n```\n\n```\n#config/application.rb\n\t...\n\t  class Application \u003c Rails::Application\n\t    # Settings in config/environments/* take precedence over those specified here.\n\t    # Application configuration should go into files in config/initializers\n\t    # -- all .rb files in that directory are automatically loaded.\n\t    config.eager_load_paths += %W(#{config.root}/app/models/public)\n\t    config.autoload_paths += %W(#{config.root}/app/models/public)\n\t    config.assets.paths \u003c\u003c ::Rails.root.join('app', 'models').to_s\n\t  end\n\t...\n```\n\n```\n#routes.rb\n\nmount HyperMesh::Engine =\u003e '/rr'\nroot 'home#show'\n```\n\n```\n#app/models/models.rb\n\nrequire_tree './public' if RUBY_ENGINE == 'opal'\n```\n\n```\n#app/models/public/application_record.rb\n\nclass ApplicationRecord \u003c ActiveRecord::Base\n  self.abstract_class = true\nend\n```\n\n```\n#app/policies/application_policy.rb\n\n    # Policies regulate access to your public models\n    # The following policy will open up full access (but only in development)\n    # The policy system is very flexible and powerful.  See the documentation\n    # for complete details.\n    class ApplicationPolicy\n      # Allow any session to connect:\n      always_allow_connection\n      # Send all attributes from all public models\n      regulate_all_broadcasts { |policy| policy.send_all }\n      # Allow all changes to public models\n      allow_change(to: :all, on: [:create, :update, :destroy]) { true }\n    end \n```\n\n```\nheroku local web\n```\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n\n```\n\n#### Webpack Setup\n\n```\nnpm init\nnpm install webpack --save-dev\nnpm install webpack -g\n```\n\n```\n#/.gitignore\n\n/node_modules\n```\n\n```\n// webpack.config.js\n\nvar path = require(\"path\");\n\nmodule.exports = {\n    context: __dirname,\n    entry: {\n      client_only:  \"./webpack/client_only.js\",\n      client_and_server: \"./webpack/client_and_server.js\"\n    },\n    output: {\n      path: path.join(__dirname, 'app', 'assets',   'javascripts', 'webpack'),\n      filename: \"[name].js\",\n      publicPath: \"/webpack/\"\n    },\n    module: {\n      loaders: [\n        // add any loaders here\n      ]\n    },\n    resolve: {\n    modules: [\n    path.join(__dirname, \"src\"),\n    \"node_modules\"\n    ]\n    },\n};\n```\n\n```javascript\n// webpack/client_only.js\n\n// any packages that depend specifically on the DOM go here\n// for example the Webpack CSS loader generates code that will break prerendering\nconsole.log('client_only.js loaded');\n```\n\n```javascript\n// webpack/client_and_server.js\n\n// all other packages that you can run on both server (prerendering) and client go here\n// most well behaved packages can be required here\nconsole.log('client_and_server.js loaded');\n```\n\n```\nwebpack\n```\n\n```javascript\n// app/assets/javascripts/application.js\n\n//= require 'components'\n//= require 'react_ujs'\n//= require 'jquery'\n//= require 'jquery_ujs'\n//= require 'webpack/client_only'\n//= require 'turbolinks'\n//= require_tree .\n\nOpal.load('components');\n```\n\n```ruby\n#app/views/components.rb\n\nrequire 'opal'\n\nrequire 'hyper-react'\nrequire 'webpack/client_and_server.js'\nrequire 'reactrb/auto-import'\nif React::IsomorphicHelpers.on_opal_client?\n  require 'opal-jquery'\n  require 'browser'\n  require 'browser/interval'\n  require 'browser/delay'\n  # add any additional requires that can ONLY run on client here\nend\n\nrequire 'hyper-mesh'\nrequire 'models'\n\nrequire_tree './components'\n```\n\n```\nnpm install react --save \nnpm install react-dom --save\n\n```\n\n```javascript\n// webpack/client_and_server.js\n\nReactDOM = require('react-dom')\nReact = require('react')\nconsole.log('client_and_server.js loaded');\n```\n\n```\nwebpack\n```\n\n```\nheroku local web\n```\n\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### ReactPlayer Component Config\n\n```\nnpm install react-player --save\n```\n\n```javascript\n//webpack/client_and_server.js\n\nReactDOM = require('react-dom')\nReact = require('react')\nconsole.log('client_and_server.js loaded');\nReactPlayer = require('react-player')\n```\n\n```\nwebpack\n```\n\n```ruby\n#app/views/components/home/show.rb\n\ndef render\n  div do\n    ReactPlayer(url:  'https://www.youtube.com/embed/FzCsDVfPQqk',\n      playing: true\n    )\n  end\nend\n```\n\n```\nheroku local web\n```\n\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### React Bootstrap config\n\n```\nnpm install bootstrap react-bootstrap --save\n```\n\n```javascript\n//webpack/client_and_server.js\n\nReactDOM = require('react-dom')\nReact = require('react')\nconsole.log('client_and_server.js loaded');\nReactPlayer = require('react-player')\nReactBootstrap = require('react-bootstrap')\n```\n\n```\nwebpack\n```\n\n```ruby\n#app/views/components/home/show.rb\n\n  def render\n    ReactBootstrap::Button(bsStyle: 'success', bsSize: \"small\") do\n      'Success'\n    end.on(:click) do\n      alert('you clicked me!')\n    end\n  end\n\n```\n\n```\nheroku local web\n```\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### React BootstrapCSS setup\n\n```\nnpm install css-loader file-loader style-loader url-loader --save-dev\n```\n\n```javascript\n// webpack.config.js\n\nvar path = require(\"path\");\n\nmodule.exports = {\n    context: __dirname,\n    entry: {\n      client_only:  \"./webpack/client_only.js\",\n      client_and_server: \"./webpack/client_and_server.js\"\n    },\n    output: {\n      path: path.join(__dirname, 'app', 'assets',   'javascripts', 'webpack'),\n      filename: \"[name].js\",\n      publicPath: \"/webpack/\"\n    },\n    module: {\n      rules: [\n      { test: /\\.css$/,\n        use: [\n          {\n            loader: \"style-loader\"\n          },\n          {\n            loader: \"css-loader\"\n          }\n        ]\n      },\n      { test: /\\.(woff|woff2)(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n        loader: 'url-loader?limit=10000\u0026mimetype=application/font-woff'\n      },\n      { test: /\\.ttf(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n        loader: 'url-loader?limit=10000\u0026mimetype=application/octet-stream'\n      },\n      { test: /\\.eot(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n        loader: 'file-loader'\n      },\n      { test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n        loader: 'url-loader?limit=10000\u0026mimetype=image/svg+xml'\n      }\n    ]\n    },\n    resolve: {\n\tmodules: [\n\tpath.join(__dirname, \"src\"),\n\t\"node_modules\"\n\t]\n\t},\n};\n```\n\n```javascript\n//webpack/client_only.js\n\nrequire('bootstrap/dist/css/bootstrap.css');\n```\n\n```\nnpm install bootstrap --save\nwebpack\n```\n\n```ruby\n#app/views/components/home/show.rb\n\nmodule Components\n  module Home\n    class Show \u003c React::Component::Base\n\n      def say_hello(i)\n        alert \"Hello from number #{i}\"\n      end\n\n      def render\n        div do\n          ReactBootstrap::Navbar(bsStyle: :inverse) do\n            ReactBootstrap::Nav() do\n              ReactBootstrap::NavbarBrand() do\n                a(href: '#') { 'Hyperloop Showcase' }\n              end\n              ReactBootstrap::NavDropdown(\n                eventKey: 1,\n                title: 'Things',\n                id: :drop_down\n              ) do\n                (1..5).each do |n|\n                  ReactBootstrap::MenuItem(href: '#',\n                    key: n,\n                    eventKey: \"1.#{n}\"\n                  ) do\n                    \"Number #{n}\"\n                  end.on(:click) { say_hello(n) }\n                end\n              end\n            end\n          end\n          \n        end\n      end\n    end\n  end\nend\n```\n\n```\nheroku local web\n```\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### Bootswatch setup\n\n```\nnpm install bootswatch\n```\n\n```javascript\n// webpack/client_only.js\n\n// any packages that depend specifically on the DOM go here\n// for example the Webpack CSS loader generates code that will break prerendering\nconsole.log('client_only.js loaded');\nrequire('bootstrap/dist/css/bootstrap.css');\nrequire('bootswatch/superhero/bootstrap.min.css');\n```\n\n```\nwebpack\n```\n\n```\nheroku local web\n```\nBrowse http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n\n#### HyperMesh ActiveRecord model\n\n```\nrails g model Planevent\n```\n\n```ruby\n# db/migrate/..create_planevents.rb\n\nclass CreatePlanevents \u003c ActiveRecord::Migration[5.0]\n  def change\n    create_table :planevents do |t|\n      t.string :planeventtitle\n      t.text :description\n      t.timestamps\n    end\n  end\nend\n````\n\n```\nrails db:migrate\nmv app/models/planevent.rb app/models/public\nmv app/models/application_record.rb app/models/public\nheroku run rake --trace db:migrate\n```\n\n```ruby\n# views/components/home/show.rb\n\nmodule Components\n  module Home\n    class Show \u003c React::Component::Base\n\n      def say_hello(i)\n        alert \"Hello from number #{i}\"\n      end\n\n      def render\n        div do\n          ReactBootstrap::Navbar(bsStyle: :inverse) do\n            ReactBootstrap::Nav() do\n              ReactBootstrap::NavbarBrand() do\n                a(href: '') { 'HyperLoop Showcase' }\n              end\n              ReactBootstrap::NavDropdown(\n                eventKey: 1,\n                title: 'Things',\n                id: :drop_down\n              ) do\n                (1..5).each do |n|\n                  ReactBootstrap::MenuItem(href: '#',\n                    key: n,\n                    eventKey: \"1.#{n}\"\n                  ) do\n                    \"Number #{n}\"\n                  end.on(:click) { say_hello(n) }\n                end\n              end\n            end\n          end\n          div.container do\n            \n            PlaneventsList()\n          end\n        end\n      end\n    end\n  end\nend\n```\n\n```ruby\n#app/views/components/home/planeventslist.rb\n\nmodule Components\n  module Home\n    class PlaneventsList \u003c React::Component::Base\n\n      define_state new_planevent: Hash.new { |h, k| h[k] = '' }\n\n      before_mount do\n        # note that this will lazy load posts\n        # and only the fields that are needed will be requested\n        @planevents = Planevent.all\n        @planevent_attributes = Hash[ 'planeventtitle' =\u003e 'Event Name', 'description' =\u003e 'Description']\n      end\n\n      def render\n        div.container do\n            div.row do\n                new_planevent\n            end\n\n            hr\n\n            div.row do\n                table_render\n            end\n\n        end\n      end\n\n      def table_render\n\n          div.col_md_12 do\n            br\n            table(class: \"table table-hover\") do\n              thead do\n                tr do\n                  td.text_muted.small(width: '33%') { \"NAME\" }\n                  td.text_muted.small(width: '33%') { \"DESCRIPTION\" }\n                  td.text_muted.small(width: '33%') { \"DATE\" }\n                end\n              end\n              tbody do\n                @planevents.reverse.each do |planevent|\n                  PlaneventsListItem(planevent: planevent)\n                end\n              end\n            end\n          end\n\n      end\n\n      def new_planevent\n\n        @planevent_attributes.each do |attribute, value|\n\n            ReactBootstrap::FormGroup() do\n\n                ReactBootstrap::ControlLabel() do\n                    value\n                end\n                ReactBootstrap::FormControl(\n                    value: state.new_planevent[attribute],\n                    type: :text,\n                    ).on(:change) { |e|\n                        state.new_planevent![attribute] = e.target.value\n                    }\n            end\n         end\n\n        ReactBootstrap::Button(bsStyle: :primary) do\n          \"Create an new event\"\n        end.on(:click) { save_new_planevent }\n\n      end\n\n      def save_new_planevent\n\n        Planevent.create(state.new_planevent) do |result|\n          # note that save is a promise so this code will only run after the save\n          # yet react will move onto the code after this (before the save happens)\n          alert \"unable to save\" unless result == true\n        end\n        state.new_planevent.clear\n\n      end\n    end\n\n    class PlaneventsListItem \u003c React::Component::Base\n      param :planevent\n\n      def render\n\n        tr do\n          td(width: '33%') { params.planevent.planeventtitle }\n          td(width: '33%') { params.planevent.description }\n          td(width: '33%') { params.planevent.created_at.to_s }\n        end\n\n      end\n\n    end\n  end\nend\n```\n\n```\nheroku local web\n```\n\nBrowse to http://localhost:5000\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n#### HyperMesh push notifications config\n\n```ruby\n#config/initializers/hyper_mesh.rb\n\nHyperMesh.configuration do |config|\n  config.transport = :simple_poller\nend\n```\n\n```\nheroku local web\n```\n\nBrowse to http://localhost:5000 with 2 different browsers and add a new Event.  Both browsers should update the view with this new Event.\n\n#### Push and test Heroku server\n\n```\ngit add .\ngit commit -m \"Demo\"\ngit push heroku master\nheroku open\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffzingg%2Fhyperloop-showcase-heroku","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffzingg%2Fhyperloop-showcase-heroku","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffzingg%2Fhyperloop-showcase-heroku/lists"}