[Из песочницы] Ruby on Rails ActionCable+Vue.js v2 на примере чата26.02.2018 08:18

habr.png

Доброго… Решил поделиться с сообществом опытом интеграции 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
такого содержания:


содержимое файла 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


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


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


bundle binstubs bundler --force
foreman start


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

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

Код на GitHub.

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


  • Интеграция Vue.js в Ruby on Rails

© Habrahabr.ru