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.
Add 'matestack-ui-core' to your
package.json by running:
$ yarn add https://github.com/matestack/matestack-ui-core#v1.3.2$ yarn install
bundle info matestack-ui-core.
Next, import 'matestack-ui-core' in your
import MatestackUiCore from 'matestack-ui-core'
$ bin/webpack --watch
When you update the matestack-ui-core gem, make sure to update the npm package as well.
Require 'matestack-ui-core' in your
//= require matestack-ui-core
We recommend to (remove/deactivate)(https://stackoverflow.com/a/38649595) 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.
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:
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.
class ShopController < ApplicationController# if not already includedinclude Matestack::Ui::Core::ApplicationHelper# if custom components are usedinclude Components::Registrylayout "shop_layout" # if it shouldn't be the default application layoutmatestack_app Shop::App # apps are optional!def homerender Shop::Pages::Homeenddef product_detailrender Shop::Pages::Product::Detailendend
and something like this in place:
class Shop::App < Matestack::Ui::Appdef responseheading text: 'Matestack Shop'yield_pageendend
class Shop::Pages::Home < Matestack::Ui::Pagedef responseheading size: 2, text: 'A few products you may like'Product.limit(5).each do |product|paragraph text: product.namesmall text: product.priceendendend
class Shop::Pages::Products::Detail < Matestack::Ui::Pagedef prepare@product = Product.find(params[:id])enddef responseheading size: 2, text: @product.nameparagraph text: product.descriptionendend
Just use Rails routing as you're used to. No additional setup required!
Rails.application.routes.draw doget '/home', to: 'shop#home'get '/product_details/:id', to: 'shop#product_details'end