Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
1.5
1.5
  • Welcome
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Quick Start
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • UI Components
    • Component Overview
    • Rails Integration
    • Component Registry
    • General Component API
    • Haml Components
    • Reusing Views or Partials
    • Testing [WIP]
  • Reactivity
    • Reactivity Overview
    • Rails Integration
    • Actions
    • Forms
    • Async
    • Cable
    • Isolated
    • Collection
    • Custom Vue.js Components
    • Vue.js Event Hub
    • Vuex [WIP]
  • SPA-like Apps
    • SPA Overview
    • Rails Integration
    • App API
    • Page API
    • Transitions
    • Authorization
    • Tutorial
      • Creating a SPA-like App with Matestack
      • Essential Guide 1: Setup
      • Essential Guide 2: ActiveRecord & Database
      • Essential Guide 3: Person Index, Show, Transition
      • Essential Guide 4: Forms & Actions (Create, Update, Delete)
      • Essential Guide 5: Toggle Component
      • Essential Guide 6: Async Component
      • Essential Guide 7: Partials and custom components
      • Essential Guide 8: Collection and async component
      • Essential Guide 9: Custom Vue.js components
      • Essential Guide 10: Styling and Notifications
      • Essential Guide 11: Authentication
      • Essential Guide 12: Heroku Deployment with Postgres
      • Essential Guide 13: Wrap Up & Outlook
  • Components API
    • Core Components
      • Abbr
      • Address
      • Area
      • Article
      • Aside
      • B
      • Bdi
      • Bdo
      • Blockquote
      • Button
      • Br
      • Caption
      • Cite
      • Code
      • Data
      • Datalist
      • Dd
      • Del
      • Details
      • Dfn
      • Dialog
      • Div
      • Dl
      • Dt
      • Em
      • Fieldset
      • Figure
      • Footer
      • Hr
      • Icon
      • Iframe
      • Img
      • Ins
      • Input
      • Header
      • Heading
      • Kbd
      • Label
      • Legend
      • Link
      • Lists
      • Main
      • Mark
      • Map
      • Meter
      • Nav
      • Noscript
      • Object
      • Option
      • Optgroup
      • Output
      • Paragraph
      • Param
      • Picture
      • Pg
      • Plain
      • Pre
      • Progress
      • S
      • Samp
      • Section
      • Select
      • Small
      • Span
      • Sup
      • Sub
      • Strong
      • Table
      • Template
      • Textarea
      • U
      • Unescaped
      • Q
      • Rails View
      • Rp
      • Rt
      • Ruby
      • Var
      • Video
      • Wbr
      • Youtube
    • Reactive Core Components
      • Action
      • Async
      • Cable
      • Collection
      • Form
      • Form Input
      • Form Checkbox
      • Form Radio
      • Form Select
      • Form Submit
      • Form Textarea
      • Onclick
      • Transition
      • Toggle
  • Integrations
    • Action Cable
    • Devise
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Community
    • Discord
    • Contribute
  • About
    • Core Team [WIP]
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • JavaScript Setup
  • Webpacker
  • Asset Pipeline
  • Turbolinks
  • Rails layouts still required
  • Rails controllers referencing Matestack apps and pages
  • Rails routing as you're used to

Was this helpful?

Edit on GitHub
  1. SPA-like Apps

Rails Integration

Matestack apps and pages are connected to Rails through controllers and controller actions. HTTP requests are handled through classic Rails routing and responded through Rails controller actions. Just let the controller action render Matestack page instead of a Rails view at the end. Optionally you can use apps on controller or action level in order to wrap the page with a layout written in pure Ruby.

JavaScript Setup

Matestack's JavaScript needs to be integrated into your Rails application in order to use the reactive, JavaScript driven features. You can use Webpacker (recommended) or Rails assets pipeline to do this.

Webpacker

Add 'matestack-ui-core' to your package.json by running:

$ yarn add https://github.com/matestack/matestack-ui-core#v1.3.2
$ yarn install

This adds the npm package that provides the JavaScript corresponding to the matestack-ui-core ruby gem. Make sure that the npm package version matches the gem version. To find out what gem version you are using, you may use bundle info matestack-ui-core.

Next, import 'matestack-ui-core' in your app/javascript/packs/application.js

import MatestackUiCore from 'matestack-ui-core'

and compile the JavaScript code with webpack:

$ bin/webpack --watch

When you update the matestack-ui-core gem, make sure to update the npm package as well.

Asset Pipeline

If you are using the asset pipeline, you don't need to install the separate npm package. All required JavaScript libraries are provided by the matestack-ui-core gem.

Require 'matestack-ui-core' in your app/assets/javascript/application.js

//= require matestack-ui-core

Turbolinks

Rails layouts still required

Even if a Matestack app defines the layout of the UI, you need a classic Rails layout in order to get things running:

For Example, your app/views/layouts/shop_layout.html.erb should look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Shop</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all' %>

    <!-- if you are using webpacker: -->
    <%= javascript_pack_tag 'application' %>

    <!-- if you are using the asset pipeline: -->
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
    <div id="matestack-ui">
      <!-- Matestack apps and pages will be yielded here! -->
      <%= yield %>
    </div>
  </body>
</html>

You need to add the ID "matestack-ui" to some part of your application layout (or any layout you use). Don't apply the "matestack-ui" id to the body tag.

Rails controllers referencing Matestack apps and pages

app/controllers/shop_controller.rb

class ShopController < ApplicationController

  # if not already included
  include Matestack::Ui::Core::ApplicationHelper
  # if custom components are used
  include Components::Registry

  layout "shop_layout" # if it shouldn't be the default application layout

  matestack_app Shop::App # apps are optional!

  def home
    render Shop::Pages::Home
  end

  def product_detail
    render Shop::Pages::Product::Detail
  end

end

and something like this in place:

app/matestack/shop/app.rb

class Shop::App < Matestack::Ui::App

  def response
    heading text: 'Matestack Shop'
    yield_page
  end

end

app/matestack/shop/pages/home.rb

class Shop::Pages::Home < Matestack::Ui::Page

  def response
    heading size: 2, text: 'A few products you may like'
    Product.limit(5).each do |product|
      paragraph text: product.name
      small text: product.price
    end
  end

end

app/matestack/shop/pages/products/detail.rb

class Shop::Pages::Products::Detail < Matestack::Ui::Page

  def prepare
    @product = Product.find(params[:id])
  end

  def response
    heading size: 2, text: @product.name
    paragraph text: product.description
  end

end

Rails routing as you're used to

Just use Rails routing as you're used to. No additional setup required!

Rails.application.routes.draw do

  get '/home', to: 'shop#home'
  get '/product_details/:id', to: 'shop#product_details'

end
PreviousSPA OverviewNextApp API

Last updated 3 years ago

Was this helpful?

We recommend to (remove/deactivate)() turbolinks, as there is no reason to use it alongside matestack-ui-core and there might appear some strange side effects. If you encounter strange page-transition/form-submit/action-submit behavior and have turbolinks activated, try to deactivate it first.

https://stackoverflow.com/a/38649595