Giới Thiệu

Ứng dụng Single Page Application (SPA) đang trở nên phổ biến nhờ vào những ưu điểm vượt trội mà nó mang lại. Những lợi ích của SPA bao gồm tốc độ tải trang nhanh, trải nghiệm người dùng mượt mà và việc tách biệt rõ ràng giữa logic frontend và backend, giúp các nhóm chuyên môn hóa hơn trong dự án.

Mặc dù SPA có nhiều điểm mạnh, nhưng việc phát triển chúng cũng kéo theo những thách thức, đặc biệt là khi kết nối và đảm bảo tính đồng bộ giữa hai máy chủ frontend và backend. Trong khi một ứng dụng Server-Side Rendered (SSR) không gặp phải những vấn đề này, việc tạo ra nhiều máy chủ cho một ứng dụng SPA có thể gây lãng phí tài nguyên, vì chỉ có máy chủ backend đảm nhận nhiệm vụ chính.

Bài viết này sẽ hướng dẫn bạn cách tích hợp Vue vào Rails để xây dựng một ứng dụng SPA mà không gặp phải các phức tạp và rào cản nêu trên.

Cài Đặt Rails

Trong hướng dẫn này, chúng ta sẽ sử dụng Vue để thay thế cho phần frontend mặc định của Rails, do đó Rails chỉ chịu trách nhiệm cung cấp các API để Vue thực hiện các cuộc gọi và hiển thị kết quả lên màn hình.

Bước đầu tiên, bạn cần khởi tạo một dự án Rails:

rails new rails-vue

Sau khi cài đặt hoàn tất, bạn chạy máy chủ Rails bằng cách sử dụng lệnh sau:

cd rails-vue
rails s

Bạn có thể truy cập vào ứng dụng tại địa chỉ localhost:3000. Như đã đề cập, Rails sẽ không quản lý và render giao diện. Thay vào đó, bạn chỉ cần một trang home duy nhất để nhúng toàn bộ mã nguồn frontend vào. Tạo một HomeController như sau:

class HomeController < ApplicationController
  def index
  end
end

Tiếp theo, tạo một tệp index.html.erb trong thư mục views để chứa mã frontend:

<h1>Trang Chủ</h1>

Sửa lại layout mặc định để chỉ hiển thị nội dung mà bạn thiết lập:

<%= yield %>

Khi người dùng truy cập vào bất kỳ đường dẫn nào, Rails sẽ chuyển hướng yêu cầu đó về trang home. Ở đây, Vue sẽ xác định trang nào cần được hiển thị và gọi các API tương ứng. Bạn cần chỉnh sửa routes để luôn chuyển hướng về home:

Rails.application.routes.draw do
  root to: "home#index"
  get "*path", to: "home#index"
end

Bây giờ bạn có thể kiểm tra, khi nhập bất kỳ đường dẫn nào vào trình duyệt, bạn sẽ luôn thấy màn hình hiển thị như trên.

Cài Đặt Vue

Chúng ta sẽ sử dụng vue-cli để tạo một dự án Vue. Chạy lệnh sau để cài đặt:

yarn global add @vue/cli@next

Tại thư mục dự án Rails, bạn chạy lệnh sau để tạo một dự án Vue:

vue create frontend

Thư mục frontend sẽ xuất hiện, và bạn cần thêm cấu hình sau vào file vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  indexPath: '../../app/views/home/index.html.erb',
  outputDir: '../public/frontend',
  publicPath: '/frontend',
})

Chúng ta đã cấu hình để indexPath trỏ đến trang home. Mỗi lần build, Vue sẽ cập nhật nội dung vào file này. Hãy thử build dự án với lệnh:

cd frontend
yarn && yarn build --watch

Sau khi refresh lại trang, nếu bạn thấy nội dung được cập nhật thành công thì mọi thứ đã hoạt động tốt.

Bạn có thể thử thay đổi nội dung template trong file App.vue:

<template>
  <HelloWorld msg="Rails Vue - Mọi thứ hoạt động tốt!"/>
</template>

Triển Khai Ứng Dụng

Với cách tiếp cận này, không cần sử dụng một máy chủ riêng cho frontend, việc triển khai ứng dụng sẽ dễ dàng hơn. Một số điều bạn cần lưu ý khi triển khai:

1. Đảm bảo vue-cli nằm trong phần dependencies trong file package.json:

{
  "dependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "^5.0.8"
  }
}

2. Không tạo source map trên môi trường production bằng cách sửa đổi file vue.config.js:

module.exports = defineConfig({
  productionSourceMap: false,
});

3. Nếu bạn đang sử dụng Capistrano để triển khai, hãy thêm cấu hình cho frontend và tạo rake task như sau:

Cấu hình role cho frontend:

set :yarn_role, :frontend
set :frontend_path, -> { release_path.join("frontend") }

Rake task để build frontend:

namespace :yarn do
  desc "Build the frontend via yarn"
  task :build do
    on fetch(:yarn_role) do
      within fetch(:frontend_path) do
        execute :yarn, "install"
        execute :yarn, "build"
      end
    end
  end
end

before "deploy:updated", "yarn:build"

Kết Luận

Chúng ta đã hoàn thành việc tích hợp Vue vào Rails. Với cách tiếp cận này, việc phát triển một ứng dụng SPA trở nên đơn giản và hiệu quả hơn bao giờ hết. Hy vọng hướng dẫn này sẽ hữu ích cho bạn trong quá trình phát triển ứng dụng của mình.

Bạn có thể tham khảo thêm thông tin chi tiết tại blog của tôi: Hướng dẫn SPA với Vue và Rails.
source: viblo