Сборка стека React On Rails 6 (расширенная версия)

Настройка виртуальной машины (источник)

Запомните или запишите название своей виртуальной машины (в вашем случае это HSEDC2016-1, если вы создавали её точно по инструкции) и название общей папки (в вашем случае это Share, опять же если вы точно действовали по инструкции).

Если у вас другие названия, запомните их или запишите точно так, как они написаны (регистр букв имеет значение).

Выключите виртуальную машину и саму программу VirtualBox и после этого в терминале введите команду, заменив в ней VM_NAME на название вашей виртуальной машины, и SHARE_NAME на название вашей общей папки (без "sf_" префикса).

На маке

VBoxManage setextradata VM_NAME VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARE_NAME 1

На винде

VBoxManage.exe setextradata VM_NAME VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARE_NAME 1

Переустановка node

На виртуалке нужно переустановить nodejs. Для этого нужно уже установленные вещи.

sudo apt-get remove npm
sudo apt-get remove node
sudo apt-get remove nodejs

И после этого установить версию node, которая подходит под нашу систему. Пока мы используем Ubuntu 14.04. Это достаточно старая система, так что находим под неё инструкцию по установке.

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

После установки node в терминале будет предложено установить yarn. Нужно последовательно запустить четыре предложенные команды.

Генерация нового приложения

Собираем стек React On Rails 6 по статье

Выполняем команду для генерации приложения, заменяя PROJECT_NAME на название нашего приложения. Опции -BT не нужны.

rails new PROJECT_NAME --webpack=react

После первого шага (генерации проекта), нужно войти в папку проекта, открыть проект в редакторе кода, зайти в файл config/webpacker.yml и изменить параметро check_yarn_integrity на false (источник)

Далее выполняем

yarn install
rails webpacker:install

Нас спросят о перезаписи файла config/wabpacker.yml, нужно ответить нет (написать букву n и нажать Enter). Дальше, нас могут спросить, заменять ли файл babel.config.js. Его можно заменить, пишем y, жмём Enter.

После этого запускаем команду

rails webpacker:install:react

После этого вернуться в статью и продолжать пошагово закончив работы выполнением команды rails g react:install

Выполняем

bundle add react-rails
rails g react:install

Заходим в файл .gitignore и добавляем туда в самый низ две строчки

.DS_Store
thumbs.db

Выполняем команду, чтобы сохранить всё, что мы сделали в гит репозитории

git add . && git commit -m "initial commit"

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

Мы закончили с настройкой. Для проверки можем сгенерировать котроллер и проверить, всё ли работает.

rails g controller welcome index

Запускаем сервер

rails s

На виртуальной машине запускаем так

rails s -b 10.0.2.15

В браузере идём смотреть страницу осцилятора.

Всё готово! Мы молодцы!