Создайте свое первое приложение React с рендерингом на стороне сервера с помощью Rails

Создайте свое первое приложение React с рендерингом на стороне сервера с помощью Rails

Создание любой веб-страницы с помощью React предлагает множество преимуществ, таких как более быстрое время разработки и возможность повторного использования компонентов. Но когда вам нужно, чтобы ваше приложение было оптимизировано для SEO, настройка может быть немного сложнее.

Моим последним проектом было сделать нашу новую целевую страницу React SEO-дружественной и оставить возможности для добавления функций в будущем. В конце концов, я решил следовать нашему текущему стеку и сохранить React и использовать Rails, чтобы обеспечить рендеринг нашего интерфейса на стороне сервера.

Отличная статья о преимуществах использования рендеринга на стороне сервера:

После прочтения множества статей и множества проб ошибок. Я представляю этот учебник по созданию целевой страницы, отображаемой на стороне сервера, с помощью React. Надеюсь, это руководство сэкономит вам время и рассудок, избегая типичных проблем, с которыми я столкнулся на этом пути. Если будет достаточно интереса, я с удовольствием завершу часть 2, объясняющую, как использовать эти знания и создать простое приложение CRUD.

TL; DR / Пожалуйста, введите код:

Начало настройки:

Прежде чем мы начнем, вам нужно будет установить на свой компьютер некоторые основные предварительные требования, чтобы все могло работать правильно.

Предварительные условия:

RVM - установить

NVM - установить

BREW - установить

Затем запустите следующие команды в терминале, чтобы все зависимости были доступны для завершения начальной настройки.

rvm install 2.3.0   # For this tutorial we will use version 2.3.0 
nvm install node    # Install newest version of node
gem install rails   # Install newest version of Rails
gem install foreman # Install newest version of Foreman

Если у вас возникли проблемы с настройкой среды, вам следует прочитать статью, написанную Джастином.

Создание базового шаблона целевой страницы:

Предполагая, что у вас установлены все предварительные требования, давайте начнем с создания нового приложения Rails.

rails new landingpage  # Feel free to use any name you wish.
cd landingpage

Теперь, когда вы вошли в новую установку Rails, пора добавить React-on-rails в ваш Gemfile.

gem 'react_on_rails', '8.0.3'  # Add this line into your gem file.
# React-on-rails highly suggests keeping a fixed version within your # gem file as the version has to match the client/package.json
bundle install  # Run this command in terminal to use react-on-rails

Далее мы будем использовать генератор React-on-rails для создания базовой структуры проекта. Это мы перестроим в нашу SEO-дружественную целевую страницу React / Rails.

rails generate react_on_rails:install  # Run the generator
bundle && yarn  # Run bundle and yarn to prepare the application

Теперь давайте запустим новый шаблон, который мы только что создали, используя:

foreman start -f Procfile.dev

Эта команда запустит ваше интерфейсное и серверное приложение.

Если все работает правильно, ваш терминал должен вывести что-то похожее на мое:

Шаг 1. Изучите генератор

Теперь, когда вы настроили свой проект response-on-rails с помощью их генератора, давайте попробуем понять, что было создано, и как мы можем настроить его, чтобы завершить создание нашей целевой страницы.

Созданные файлы:

Ваша структура папок должна быть такой же, если не очень похожей на приведенную ниже. После создания приложения по умолчанию из react-on-rails. Эта структура станет основой всей вашей целевой страницы. Ниже я объясню основы каждого сгенерированного файла и их использования в вашем проекте.

Контроллеры. Контроллер будет использоваться для отправки любых данных со стороны сервера в ваше интерфейсное приложение для реагирования. В этом примере мы создаем только целевую страницу, поэтому она не будет широко использоваться, а лишь немного позже в этом руководстве.

Представления: Макет сообщает Rails, как визуализировать ваш SCSS и JavaScript.

Папка hello_world короткая и милая, но именно в ней происходит вся магия. Файлы в этой папке - это то, что вы используете для визуализации React на стороне клиента.

Клиент: в папке клиента находится вся ваша интерфейсная логика, и она должна быть вам немного знакома, если вы раньше использовали React.

Начать восстановление:

Теперь, когда у вас есть базовое представление о том, что было построено из генератора. Давайте начнем с переименования всего в что-то менее «HelloWorld» и что-то большее «IBuiltThisWithNoGeneratorGiveRaisePlease».

Изменение названия на стороне клиента:

Сначала давайте переименуем следующую папку / client / app / bundles / «HelloWorld» / в «LandingPage».

Затем вам нужно будет отредактировать веб-пакет, который находится в /client/webpack.config.js, и изменить свой путь, чтобы отразить изменение имени папки.

entry: {
    'webpack-bundle': [
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'babel-polyfill',
      './app/bundles/LandingPage/startup/registration',
    ],
  },

Поскольку мы уже находимся в папке клиента, давайте продолжим и изменим все ссылки HelloWorld на наше новое имя «LandingPage».

Начнем с того, что изменим сгенерированный компонент на новое имя в следующем месте. - / приложение / пакеты / LandingPage / компоненты /

Теперь измените «HelloWorld.jsx» на «Landing.jsx» и в этом файле измените класс экспорта по умолчанию на «Landing».

export default class Landing extends React.Component { }

Теперь перейдите в папку автозагрузки в app / bundles / LandingPage / startup и откройте файл «registration.jsx». Отсюда мы просто переименуем каждый «HelloWorld» в «LandingPage».

import ReactOnRails from 'react-on-rails';
import LandingPage from '../components/Landing';
// This is how react_on_rails can see components in the browser.
ReactOnRails.register({
  LandingPage,
});

Переименование на стороне сервера:

Теперь нам просто нужно переименовать все элементы Rails в новый формат именования, который мы планируем использовать для нашей целевой страницы.

Начнем с редактирования названия контроллеров и самого файла. Точный файл, который нам нужен, находится в / app / controllers /, поэтому теперь переименуйте файл «hello_world_controller.rb» в «landing_page_controller.rb». Внутри мы удалим некоторые ненужные функции и изменим имена.

# frozen_string_literal: true
class LandingPageController < ApplicationController
  layout "landing_page"
  
  def index
    # This will be used later in the tutorial.
  end
end

Затем переименуйте все файлы в папке views, расположенной в / app / views /. После того, как вы закончите переименование всего, от «hello_world» до «landing_page», перейдите в / app / views / landing_page /. Откройте файл index.html.erb для редактирования .

Теперь удалите ‹h1›, который находится внутри, и удалите ненужную опору, так как мы больше не передаем ее во внешний интерфейс. По умолчанию response-on-rails устанавливает для pre render значение false, что противоположно тому, что мы хотим для целевой страницы, дружественной к SEO. Поскольку поисковая система не прочитает его должным образом, задайте для него значение true.

<%= react_component("LandingPage", prerender: true) %>
# LandingPage is the name of the controller we want to use.

И последнее, но самое главное, нам нужно изменить маршруты в нашем приложении Rails. Перейдите в /config/routes.rb и измените маршрут, чтобы загрузить нашу целевую страницу React в качестве пункта назначения по умолчанию.

Rails.application.routes.draw do
  root 'landing_page#index'
end

Шаг 2. Создайте или интегрируйте компоненты React

Теперь, когда мы закончили настройку, пора приступить к настоящему веселью и начать создавать нашу новую целевую страницу с помощью React.

В этом примере я буду использовать целевую страницу, которую добровольно предложила член моей команды Маккензи Хига из Musefind. Это урезанная версия, предназначенная для всех.

Начните с создания необходимых файлов, которые мы будем использовать в следующей части этого руководства.

В / client / app / bundles / LandingPage / components / создайте следующие файлы.

index.jsx
Landing.jsx
LandingHeader.jsx
Footer.jsx

Сначала откройте index.jsx и добавьте следующее:

export { default as Landing } from './Landing'

Затем откройте Landing.jsx и скопируйте / вставьте следующее:

Теперь LandingHeader.jsx:

Наконец, откройте Footer.jsx:

Когда у вас будут все четыре файла, у вас должна получиться красивая целевая страница React, отрисованная на стороне сервера. Прекрасно в контексте того, что весь рендеринг выполняется на стороне сервера, а затем отправляется клиенту.

- Может быть, не так красиво с точки зрения визуальных эффектов, но мы перейдем к добавлению стиля и изображений дальше.

Шаг 3. Получите дерзость с SASS

Теперь, когда у нас есть базовая целевая страница React, отрисовываемая полностью на стороне сервера с использованием Rails, пришло время сделать эту целевую страницу привлекательной.

Сначала начните с перехода в / app / assets / stylesheets / и превратите application.css в application.scss. Затем откройте этот файл для редактирования и скопируйте / вставьте приведенный ниже код в этот файл.

Очень большой исходный код - Нажмите здесь

Идеально теперь на вашей целевой странице, у вас должна быть красота рендеринга на стороне сервера. Также актуальный дизайн-красота благодаря Томми Кэмпбеллу, который разработал для нас эту целевую страницу.

- Небольшое примечание: вы получите некоторые ошибки в консоли из-за извлечения шрифтов, но мы исправим это в ближайшее время.

Шаг 4. Получение локальных шрифтов

Шрифты также будут передаваться в наше приложение с помощью конвейера ресурсов Rails, поскольку мы будем вызывать их прямо из наших таблиц стилей.

Начните с загрузки шрифтов, которые мы будем использовать, если вы еще этого не сделали - Ссылка

Теперь, когда у нас установлены эти шрифты, создайте новую папку в / app / assets / под названием «fonts» и поместите в нее все шрифты, которые вы только что загрузили.

Пришло время позволить нашему приложению Rails найти эти новые шрифты в конвейере ресурсов. Мы сделаем это, перейдя в /config/application.rb и добавив строку ниже в модуль.

config.assets.paths << Rails.root.join("app", "assets", "fonts")

Теперь пора снова отредактировать наш файл application.scss и добавить следующее в начало файла. Это позволит импортировать шрифты, чтобы мы могли использовать их в наших таблицах стилей.

Если вы следовали каждому шагу до сих пор, у вас должна получиться идеальная рабочая целевая страница. За исключением значков социальных сетей, расположенных в нижнем колонтитуле.

Шаг 5: Как получить изображения

Когда я пытался завершить этот шаг, это закончилось парой часов ненависти к себе и гнева. Что, в конце концов, превратилось в просто загрузку моих изображений в Cloudinary и их внешнюю привязку. Решение, которое я лично был счастлив опубликовать вживую, хотя ради этого урока я решил остановиться и понять его.

Итак, без лишних слов, я представляю вам обходной путь, который я реализовал с помощью примерно пяти минут поиска в Google во второй раз.

Сначала, если вы еще не загрузили, поместите следующие изображения в / app / assets / images /

После того, как вы разместили ресурсы в соответствующей папке, самое время перейти и открыть /app/controllers/landing_page_controller.erb. Наконец, пришло время добавить что-то в этот контроллер, как я обещал в начале этого руководства.

class LandingPageController < ApplicationController
  layout "landing_page"
  
  def index
    @images = {
      instagram: path_to_asset('landing/server-instagram'),
      twitter: path_to_asset('landing/server-twitter'),
      medium: path_to_asset('landing/server-medium')
    }
  end
  
  private
def path_to_asset(asset)
    ApplicationController.helpers.asset_path(asset)
  end
end

Мы создаем опору изображений для передачи от серверной части к клиентской части нашего приложения. Мы не можем просто использовать локальные источники изображений из нашего внешнего интерфейса, поскольку Rails перезапишет любой путь, который вы попытаетесь ввести, включая изображения.

Теперь, когда мы создали объект изображений, у которых есть маршруты конвейера ресурсов Rails, нам нужно передать эту информацию во внешний интерфейс. Мы сделаем это, отредактировав /app/views/landing_page/index.html.erb

<%= react_component("LandingPage", props: @images, prerender: true) %>

Здесь мы просто передаем опору в интерфейс, которая содержит все пути для изображений, к которым нам нужен доступ.

Заключение

На данный момент у вас есть полностью рабочая целевая страница, созданная с помощью React. и рендеринг на стороне сервера с помощью Rails, чтобы создать приложение, оптимизированное для SEO. Надеюсь, это дало вам представление о том, как продолжить работу с этими знаниями и создать или преобразовать приложение в SEO-дружественную электростанцию.

Если вы хотите развернуть свое приложение на Heroku, я указал ниже внешний источник, который я лично не тестировал:

Если эта статья в любом случае была вам полезна, нажмите на зеленое сердечко ниже. Если вы чувствуете себя очень щедрым, не стесняйтесь поделиться этим со своим ближайшим окружением, чтобы вы могли фактически похвастаться полученными знаниями.

Спасибо за прочтение.

Репозиторий Git: