Ruby on Rails ActionCable + Vue.js v2 for example chat
Good ... I decided to share with the community the experience of integrating Vue.js v2 and Ruby on Rails on the example of developing a chat. To do this, we need an implementation of the websocket in Rails - ActionCable.
This is the first part of several articles so as not to pile everything up and apply a phased approach to development. This part basically repeats the already existing article, the link to which is given below, but it is necessary to trace the entire development process in stages. Interested - under cat.
Prepare BackEnd
Install heme:
gem install webpacker Create a new application:
rails new chat --webpack=vue Add gem Foreman to start the front and back-up with one command:
')
gem 'foreman' and install it:
bundle update Create a Procfile in the project root with the following contents:
#Procfile backend: bin/rails s -p 3000 frontend: bin/webpack-dev-server create a resource:
rails g resource Message body:text username:string Add methods to the controller:
# app/controllers/messages_controller.rb class MessagesController < ApplicationController def index end def create end end Determine root_path:
#config/routes.rb: Rails.application.routes.draw do resources :messages root to: 'messages#index' end create an empty index.html file in the app / views / messages folder
The preparatory work for the Backend has been completed; now it is necessary to prepare the front end.
Preparing FrontEnd
After installing the webpack gem, a new app / javascript directory appeared in the project in which our frontend will live. We will slightly change the existing frontend architecture. to do this, create the app / javascript / packs / component directory and place the app.vue file in it
such content:
<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> the contents of the file app / javascript / packs / application.js replace with:
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) }) In application.html.erb, we replace js and css connections.
<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> First start
bundle binstubs bundler --force foreman start In the browser at http: // localhost: 3000 we should see a page that says Hello Vue!
This completes the project preparation and can proceed to the development of a chat.
The code on github .
Resources used:
Source: https://habr.com/ru/post/349912/
All Articles