TOC

Как добавить Bootstrap в приложение на Ruby on Rails

Вступление

Если вы разрабатываете приложение Ruby on Rails, вас может заинтересовать добавление стилей в ваш проект для облегчения взаимодействия с пользователем. Один из способов сделать это - добавить Bootstrap, среду HTML, CSS и JavaScript, предназначенную для упрощения процесса создания адаптивных веб-проектов и обеспечения готовности к мобильным приложениям. Внедрив Bootstrap в проект Rails, вы можете интегрировать его соглашения и компоненты макета в свое приложение, чтобы сделать взаимодействие пользователей с вашим сайтом более привлекательным.

В этом руководстве вы добавите Bootstrap в существующий проект Rails, который использует упаковщик webpack для обслуживания своих ресурсов JavaScript и CSS. Цель состоит в том, чтобы создать визуально привлекательный сайт, с которым пользователи могут взаимодействовать, чтобы делиться информацией об акулах:

изображение: https: //assets.digitalocean.com/articles/docker_node_image/landing_page.png [целевая страница приложения]

Предпосылки

Чтобы следовать этому уроку, вам понадобится:

  • Локальный компьютер или сервер разработки под управлением Ubuntu 18.04. Ваша машина разработки должна иметь пользователя без полномочий root с правами администратора и брандмауэром, настроенным с помощью + ufw +. Инструкции о том, как это настроить, см. В нашем учебном руководстве Initial Настройка сервера с Ubuntu 18.04.

  • https://nodejs.org [Node.js] и npm, установленные на локальном компьютере или на сервере разработки. В этом руководстве используются версия Node.js и версия npm. Для получения инструкций по установке Node.js и npm в Ubuntu 18.04 следуйте инструкциям в разделе * «Установка с использованием PPA» * на https://www.digitalocean.com/community/tutorials/how-to-install-node- js-on-ubuntu-18-04 # Установка-использование-a-ppa [Как установить Node.js в Ubuntu 18.04].

  • Ruby, rbenv и Rails, установленные на вашем локальном компьютере или сервере разработки, следуя * Шаги 1-4 * в https://www.digitalocean.com/community/tutorials/ Как установить Ruby on Rails с помощью rbenv в Ubuntu 18.04. В этом руководстве используются Ruby, rbenv и Rails.

  • SQLite установлен, следуя * шагу 1 * How для создания приложения на Ruby on Rails. В этом руководстве используется SQLite 3.

Шаг 1 - Клонирование проекта и установка зависимостей

Нашим первым шагом будет клонирование хранилища rails-stimulus из учетной записи DigitalOcean Community. , Этот репозиторий содержит код из установки, описанной в [WW. Как добавить стимул к Ruby on Rails Application, в котором описано, как добавить Stimulus.js в существующий проект Rails 5.

Клонируйте репозиторий в каталог с именем ++:

git clone https://github.com/do-community/rails-stimulus.git

Перейдите в каталог ++:

cd

Чтобы работать с кодом проекта, вам сначала нужно установить зависимости проекта, которые перечислены в его Gemfile. Используйте следующую команду для установки необходимых гемов:

bundle install

Далее вы установите ваши зависимости https://yarnpkg.com [Yarn]. Поскольку этот проект Rails 5 был изменен для обслуживания ресурсов с помощью веб-пакета, его зависимостями JavaScript теперь управляет Yarn. Это означает, что необходимо установить и проверить зависимости, перечисленные в файле проекта + package.json +.

Выполните следующую команду, чтобы установить эти зависимости:

yarn install --check-files

Флаг + - check-files + проверяет, не были ли удалены все файлы, уже установленные в каталоге + node_modules +.

Затем запустите миграцию базы данных:

rails db:migrate

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

rails s

Если вы работаете на сервере разработки, вы можете запустить приложение с:

rails s --binding=

Перейдите к + localhost: 3000 + или + http: //: 3000 +. Вы увидите следующую целевую страницу:

изображение: https: //assets.digitalocean.com/articles/build_rails_app/index_no_style.png [целевая страница приложения]

Чтобы создать новую акулу, нажмите на ссылку * New Shark * внизу страницы, которая приведет вас к маршруту + sharks / new +. Вам будет предложено ввести имя пользователя (* sammy ) и пароль ( shark *) благодаря проекту https://www.digitalocean.com/community/tutorials/how-to-build-a-ruby-on- rails-application # step-% E2% 80% 94-добавление-аутентификация [настройки аутентификации]. Представление + new + выглядит следующим образом:

изображение: https: //assets.digitalocean.com/articles/build_rails_app/new_no_style.png [Создать новую акулу]

Чтобы убедиться, что приложение работает, мы можем добавить к нему некоторую демонстрационную информацию. Введите «Great White» в поле * Name * и «Scary» в поле * Facts *:

изображение: https: //assets.digitalocean.com/articles/build_rails_app/add_shark_no_style.png [Добавить большую белую акулу]

Нажмите кнопку * Создать акулу *, чтобы создать акулу:

изображение: https: //assets.digitalocean.com/articles/build_rails_app/show_no_style.png [Показать акулу]

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

Шаг 2 - Добавление главной целевой страницы и контроллера

Текущее приложение устанавливает корневое представление для главной страницы информации об акулах, представление + index on для контроллера` + sharks on`. Хотя это работает для привлечения пользователей к основному приложению, может быть менее желательным, если мы решим разработать приложение в будущем и добавить другие возможности и функции. Мы можем реорганизовать приложение, чтобы в качестве корневого представления был установлен контроллер + home +, который будет включать представление + index +. Оттуда мы можем ссылаться на другие части приложения.

Чтобы создать контроллер + home +, вы можете использовать команду +rails generate + ` с генератором

Related