Доброго… Решил поделиться с сообществом опытом интеграции Vue.js v2 и Ruby on Rails на примере разработки чата. Для этого нам потребуется реализация websocket в Rails — ActionCable.


Это первая часть из нескольких статей чтобы не нагромождать всё в кучу и применять поэтапный подход к разработке. Эта часть в основном повторяет уже существующую статью, ссылка на которую приведена ниже, однако она необходима чтобы проследить весь процесс разработки поэтапно. Зинтересовавшимся — под кат.


Подготавливаем BackEnd


Устанавливаем гем: 

gem install webpacker

Создаем новое приложение:

rails new chat --webpack=vue

Добавим gem Foreman для запуска фронта и бэка одной командой:

gem 'foreman'

и установим его:

bundle update

Создадим Procfile в корне проекта со следующим содержимым:


#Procfile
backend: bin/rails s -p 3000
frontend: bin/webpack-dev-server

создаем ресурс:

rails g resource Message body:text username:string

Добавляем методы в контроллер:


# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def index
  end

  def create
  end
end

Определяем root_path:

#config/routes.rb: 
Rails.application.routes.draw do
  resources :messages
  root to: 'messages#index'
end

создаем пустой файл index.html в папке app/views/messages

Подготовительные работы для Бэкенд закончены, теперь необходимо подготовить фронтенд.

Подготавливаем ФронтЕнд


После установки гема webpacker в проекте появилась новая директория app/javascript в которой будет жить наш фронтенд. Немного изменим существующую архитектуру фронтенда. для этого создадим директорию app/javascript/packs/component и поместим в неё файл app.vue
такого содержания:

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

содержимое файла app/javascript/packs/application.js заменим на:
import Vue from 'vue'
import App from './components/app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('application'))
  const app = new Vue({
    el,
    render: h => h(App)
  })

  console.log(app)
})

В application.html.erb заменяем подключения js и css

<head>
  <title>Chat</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= stylesheet_pack_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %>

  <!-- <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> -->
</head>

Первый запуск


bundle binstubs bundler --force
foreman start

В браузере по адресу http://localhost:3000 мы должны увидеть страницу с надписью Hello Vue!

На этом подготовка проекта закончена и можно перейти к разработке чата.

Код на GitHub.

Используемые ресурсы: