Xây dựng ứng dụng cho phép render React với Rails từ Sever Side

882

Xây dựng trang web với React có nhiều ưu điểm như thời gian phát triển nhanh hơn và có thể tùy chọn để tái sử dụng lại các component. Nhưng để ứng dụng của bạn thân thiện với SEO thì nó có thể gặp một chút khó khăn khi phát triển.

Gần đây tôi có làm 1 dự án về trang đích (landing page) bằng React có thể thân thiện với SEO và có các tùy chọn mở thêm các tính năng. Cuối cùng tôi quyết định phát triển theo hướng hiện tại và sử dụng React cùng Rails để cho phép render từ phía server trên front-end.

Sau khi tham khảo nhiều bài viết và rút kinh nghiệm từ quá trình thử nghiệm. Tôi xin hướng dẫn sơ về xây dựng landing page được render từ phía server bằng cách sử dụng React. Hy vọng hướng dẫn này sẽ giúp bạn tiết kiệm thời gian và đỡ stress, bằng cách tránh những lỗi thường gặp mà tôi gặp phải trong quá trình thực hiện.

TL; DR / Xin vui lòng xem qua code này.

Bắt đầu thiết lập:

Trước khi bắt đầu, bạn cần phải cài đặt một số thứ cơ bản trên máy tính của bạn để mọi thứ đều có thể vận hành chính xác.

Điều kiện tiên quyết phải có:

RVM — install

NVM — install

BREW — install

Tiếp theo, chạy các lệnh trong terminal để tất cả các thành phần đã cài đặt hoàn thành việc thiết lập ban đầu.

Nếu bạn gặp khó khăn trong việc thiết lập môi trường, hãy xem bài viết của Justin.

Tạo template cho landing page cơ bản:

Sau khi đã cài đặt tất cả các thành phần trên, hãy bắt đầu bằng cách tạo một ứng dụng Rails mới.

Bây giờ bạn đã hướng đối tượng vào cài đặt mới của Rails đã đến lúc thêm React-on-rails vào Gemfile của bạn.

Tiếp theo, chúng ta sẽ sử dụng React-on-rails để xây dựng một cấu trúc cơ bản của dự án. Điều đó cho phép chúng tôi xây dựng lại landing page bằng React / Rails thân thiện với SEO của chúng tôi.

Bây giờ chúng ta hãy bắt đầu template mới mà chúng ta vừa tạo bằng cách sử dụng:

Lệnh này sẽ chạy ứng dụng phía trước và phía máy chủ của bạn.

Nếu tất cả mọi thứ hoạt động đúng terminal của bạn thì output sẽ như trông như thế này :

Bước 1: Hiểu được generator

Bây giờ bạn đã thiết lập được react-on-rails cho dự án của mình bằng cách sử dụng generator để thử và hiểu những gì được tạo ra và cách chúng tôi có thể tùy chỉnh để kết thúc việc xây dựng landing page của chúng tôi.

File đã được:

Cấu trúc thư mục của bạn nên giống nhau như hình dưới. Sau khi tạo ứng dụng mặc định từ react-on-rails. Cấu trúc này sẽ là cơ sở cho toàn bộ landing page của bạn. Dưới đây tôi sẽ giải thích cơ bản của mỗi file được tạo ra và cách sử dụng chúng trong dự án của bạn.

Controllers: Controller sẽ được sử dụng để gửi bất kỳ dữ liệu nào từ phía máy chủ đến front-end ứng dụng React của bạn. Đối với ví dụ này, chúng tôi chỉ xây dựng một landing page nên việc này sẽ không được sử dụng rộng rãi và chỉ được sử dụng trong hướng dẫn này.

Views: Layout này cho Rails biết cách hiển thị SCSS và JavaScript của bạn.

Các file hello_world ngắn và đơn giản nhưng nó là nơi mà tất cả những điều kì diệu thực sự xảy ra. Các file trong thư mục này là những gì bạn sử dụng để thực hiện render React từ phía khách hàng của bạn.

Client: Trong thư mục khách hàng là tất cả các logic front-end và tìm hiểu những thứ tương tự bằng React trước nhé.

Bắt đầu xây dựng lại:

Bây giờ bạn đã có một sự hiểu biết cơ bản về những gì đã được xây dựng từ máy phát . Hãy bắt đầu bằng cách đổi tên tất cả mọi thứ để một cái gì đó ít hơn “HelloWorld” nhưng nhiều hơn “IBuiltThisWithNoGeneratorGiveRaisePlease”.

Đặt lại tên client-side:

Trước tiên, hãy bắt đầu bằng cách đổi tên folder /client/app/bundles/“HelloWorld”/ to “LandingPage”

Tiếp theo, bạn cần phải chỉnh sửa webpack tại /client/webpack.config.js, và thay đổi đường dẫn của bạn để phản ánh sự thay đổi tên thư mục.

Vì chúng ta đã ở trong thư mục client, nên bạn hãy tiếp tục thay đổi tất cả các tham chiếu của HelloWorld sang tên mới của chúng ta là “LandingPage”

Hãy bắt đầu bằng cách thay đổi các componient được tạo ra sang tên mới tại.  — /app/bundles/LandingPage/components/

Bây giờ thay đổi “HelloWorld.jsx” thành “Landing.jsx” và trong file đó thay đổi các class mặc định thành “Landing”.

Bây giờ hãy vào thư mục khởi động ở app/bundles/LandingPage/startup và mở file “registration.jsx”. Từ đây chúng tôi sẽ đổi tên mọi “HelloWorld” thành “LandingPage”.

Đặt lại tên server-side:

Bây giờ chúng ta chỉ cần đổi tên tất cả các phần tử Rails sang định dạng tên mới mà chúng ta dự định sử dụng cho landing page của chúng ta.

Hãy bắt đầu bằng cách chỉnh sửa tên bộ điều khiển và file của nó. File chính xác mà chúng ta muốn nằm ở /app/controllers/  — vì vậy hãy đổi tên file “hello_world_controller.rb” thành “landing_page_controller.rb”. Bên trong chúng ta sẽ loại bỏ một số chức năng không cần thiết và thay đổi tên trên.

Tiếp theo, trước tiên đổi tên tất cả các file tin trong phần view của folder nằm ở /app/views/. Sau khi bạn đã hoàn tất đổi tên mọi thứ từ “hello_world” sang “landing_page” đến /app/views/landing_page/. Mở tập tin index.html.erb để chỉnh sửa.

Bây giờ đầu tiên là loại bỏ <h1> bên trong và loại bỏ các prop không cần thiết vì chúng ta không cần qua front-end. Theo mặc định, react-on-rails thiết lập trước render, điều ngược lại với những gì chúng tôi muốn cho một landing page thân thiện với SEO. Công cụ tìm kiếm sẽ không đọc nó đúng, do đó, cần thiết lập ngay từ đầu để nó hoạt động đúng.

Cuối cùng nhưng quan trọng nhất là chúng ta cần thay đổi trong ứng dụng Rails của chúng ta. Đi đến /config/routes.rb và thay đổi tuyến đường để tải landing page React của chúng ta làm đích đến mặc định.

Bước 2: Tạo hoặc tích hợp các React components

Bây giờ chúng ta đã hoàn tất việc thiết lập, đây là giai đoạn thực sự thú vị – bắt đầu xây dựng landing page mới sử dụng React.

Đối với ví dụ này tôi sẽ sử dụng landing page mà thành viên nhóm Mackenzie Higa của tôi tại Musefind volunteered. Đây là một phiên bản rút gọn được thực hiện cho mọi người sử dụng.

Bắt đầu bằng cách tạo các file yêu cầu mà chúng tôi sẽ sử dụng trong phần tiếp theo của hướng dẫn này.

Trong / client / app / bundles / LandingPage / components / tạo các file sau.

Đầu tiên mở index.jsx và thêm những điều sau:

Tiếp theo mở Landing.jsx và copy/paste các mục sau:

Giờ tới LandingHeader.jsx:

Cuối cùng, mở Footer.jsx:

Khi bạn có tất cả bốn file, bạn nên có landing page React từ phía máy chủ thật đẹp. Đẹp trong trong trường hợp này có nghĩa là tất cả các kết xuất được thực hiện trên máy chủ sau đó gửi đến khách hàng.

– Có lẽ không quá đẹp trong về mặt hình ảnh nhưng chúng ta sẽ có thêm phong cách và hình ảnh tiếp theo.

Bước 3: Làm sassy với SASS

Bây giờ chúng ta có landing page React cơ bản hoàn toàn sử dụng Rails trên máy chủ, đây là lúc làm cho landing page trở nên hấp dẫn.

Bắt đầu đầu tiên bằng cách điều hướng tới / app / assets / stylesheets / và thực hiện application.css vào application.scss. Sau đó mở file đó để chỉnh sửa và copy/paste mã bên dưới file đó.

Có rất nhiều Source code ở đây

Hoàn hảo!Bây giờ landing page của bạn đã trở nên đẹp hơn. Landing page của chúng tôi được thiết kế theo phong cách tự nhiên do Tommy Cambell thiết kế.

– Lưu ý nhỏ: bạn sẽ nhận được một số lỗi trong bảng điều khiển do lấy lại phông chữ, nhưng chúng tôi sẽ khắc phục sự cố đó ngay.

Bước 4: Tìm kiếm phông chữ cục bộ

Phông chữ cũng sẽ được phục vụ cho ứng dụng của chúng tôi bằng cách sử dụng nguồn tài nguyên Rails vì chúng tôi sẽ gọi chúng trực tiếp từ bảng định kiểu của chúng tôi.

Bắt đầu bằng cách tải các phông chữ mà chúng tôi sẽ sử dụng nếu bạn chưa có tải tại Link

Bây giờ chúng ta đã cài đặt phông chữ này tạo một thư mục mới trong / app / assets / được gọi là “fonts” và đặt tất cả các phông chữ mà bạn vừa tải về trong đó.

Đã đến lúc để ứng dụng Rails của chúng ta tìm thấy những phông chữ mới trong nguồn tài nguyên. Chúng tôi sẽ làm điều này bằng cách điều hướng đến /config/application.rb và thêm dòng dưới đây trong module.

Tiếp theo là chỉnh sửa file application.scss của bạn một lần nữa và thêm phần sau vào đầu file. Thao tác này sẽ thêm phông chữ để chúng tôi có thể sử dụng chúng trong bảng định kiểu của chúng ta.

Nếu bạn đã thực hiện đến bước này, bây giờ bạn đã có một landing page hoàn hảo. Trừ các biểu tượng tương tác mạng xã hội nằm ở cuối trang.

Bước 5: Làm thế nào với nguồn hình ảnh

Khi tôi đang cố gắng để hoàn thành bước này. Bước cuối cùng chỉ cần tải hình ảnh của tôi lên Cloud và liên kết chúng với bên ngoài. Đây là giải pháp tôi thích nhất để đẩy trực tiếp tuy nhiên vì lợi ích của bài hướng dẫn này tôi quyết định hunker xuống và figure nó.

Đầu tiên nếu bạn chưa tải xuống và cài đặt các hình ảnh trong / app / assets / images /

Khi bạn có tài nguyên được lưu trong thư mục thích hợp giờ là lúc điều hướng và mở /app/controllers/landing_page_controller.erb. Cuối cùng làthêm một cái gì đó trong bộ điều khiển này như tôi đã hứa lúc bắt đầu hướng dẫn này.

Chúng tôi đang tạo ra một đối xứng của hình ảnh từ back-end đến front-end của ứng dụng. Chúng ta không thể chỉ tập trung nguồn hình ảnh từ front-end của chúng ta vì Rails sẽ ghi đè lên bất kỳ đường dẫn nào bạn thử và nhập bao gồm cả hình ảnh.

Bây giờ chúng ta đã tạo ra một đối tượng của các hình ảnh có các tuyến đường ống dẫn Rails tài nguyên của chúng ta, chúng ta cần phải chuyển thông tin này đến front-end. Chúng tôi sẽ thực hiện việc này bằng cách chỉnh sửa /app/views/landing_page/index.html.erb

Ở đây chúng tôi chỉ đơn giản là đi qua một prop đến front-end có chứa tất cả các đường dẫn cho những hình ảnh mà chúng ta cần truy cập vào.

Kết luận

Tại thời điểm này, bạn có landing page đầy đủ được xây dựng bằng React. Và render từ phía máy chủ bằng cách sử dụng Rails, để tạo ra một ứng dụng SEO thân thiện. Hy vọng rằng nó đã cho bạn một ý tưởng về làm thế nào để tiếp tục với kiến thức này và xây dựng hoặc chuyển đổi một ứng dụng trở nên thân thiện với SEO.

Nếu bạn muốn triển khai ứng dụng của bạn trên Heroku có một nguồn bên ngoài ở dưới mà tôi đã sử dụng để tự kiểm tra:

Hàng từ Git

Techtalk via Engineering