Cách tạo một project Rails/ReactJS sử dụng gem react_on_rails đơn giản và deploy lên heroku
Bài đăng này đã không được cập nhật trong 5 năm
Giới thiệu
Reactjs hiện đang là một trong những sự lựa chọn hàng đầu của các lập trình viên về phát triển các ứng dụng web, đối với framework Ruby on Rails thì cũng đã tích hợp được React vào trong source code của project. Có nghĩa là chúng ta chỉ cần 1 server để deploy và có thể chỉ cần sử dụng Rails routes mà không cần dùng đến React routes. Để làm được điều này thì có một vài cách, trong trường hợp này mình sử dụng gem webpacker và gem react_on_rails để thực hiện.
Tạo project sử dụng gem react_on_rails
Đầu tiên chúng ta tạo 1 project rails như bình thường:
Sau đó mở file Gemfile và thêm vào 2 dòng sau:
gem "webpacker", "~> 3"
gem "react_on_rails", "11.1.4"
sau đó quay lại terminal và chạy "bundle install"
Bạn nào chưa cài yarn thì ấn vào đây để xem cách cài nhé, yarn nó cũng có chức năng như npm thôi 
Tiếp theo chạy lần lượt 2 câu lệnh này để cài đặt webpacker và reactjs
Sau khi xong chúng ta cần commit lại và tiếp tục chạy câu lệnh sau để react_on_rails tự cài đặt:
Cơ bản là xong rồi, chúng ta chạy câu lệnh sau để start project:
Nếu bạn nào chưa cài foreman thì cài như sau là được, nhớ chạy bằng sudo nha (mình chụp nhanh quá quên thêm sudo ):
Ok, giờ thì mở trình duyệt lên và truy cập localhost:3000/hello_world để xem kết quả nhé, và đã xuất hiện dấu hiệu của react
Sau khi đã hoàn thành project, nếu bạn đang sử dụng sqlite thì cần chuyển sang postgre hoặc mysql, sau đó thêm file có tên là Procfile vào trong project ( cùng cấp với các folder app, config, ...) để có thể start được project bên phía heroku. Nội dung bên trong ghi như sau:
web: bundle exec puma -C config/puma.rb sau đó lưu lại và commit tất cả trước khi deploy.
Deploy project lên heroku
Cấu hình server heroku:
Chúng ta sẽ tạo 1 app như bình thường:
Tiếp theo chọn vào mục Setting, lăn chuột xuống phần Buildpacks và thêm buildpack như mình:
Nhớ thêm đúng thứ tự như mình nhé.
Sau đó mở terminal lên và chạy lệnh heroku git:remote -a test-0874 thay test-0874 bằng tên app heroku của bạn là được, rồi chạy lệnh git push heroku master là xong.
Chúc các bạn thành công!!!
Tham khảo
All rights reserved
