Великолепный nuxt.js шаблон приложения vue.js и drupal 8 в одной коробке

Аватар пользователя multpix
2

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

Мы же понимаем, что ни один здравомыслящий фронтэнд разработчик не будет планировать drupal для api,
но... Drupal тоже может)

В этом обзоре я рассмотрю установку каркаса проекта с акцентом на удобства разработчика.

Цель: локальная среда для фулстек разработки на базе drupal8 и vue.js

Выбрав ЯП, принимаем соответствующий менеджер зависимостей.

В этом примере применяются: php, js, ruby

Следовательно, используем composer, npm, bundler

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

Создадим каталог проекта

mkdir application

Сфокусируем внимание на построении каркаса приложения.

Первой командой соберем фронтенд

vue init nuxt/starter app

Второй командой соберем бэкенд

composer create-project drupal-composer/drupal-project:8.x-dev api --stability dev --no-interaction

Создадим Gemfile и укажем в нем foreman

# Gemfile
gem 'foreman'

Установим

bundle install

Настроим

# Procfile.dev
vue: npm --prefix $(pwd)/app run dev
drupal: drush rs --root=$(pwd)/api/web

Теперь у нас есть возможность запуска обоих приложений:

foreman start -f Procfile.dev

Создадим скрипт обертку для этой команды

mkdir bin
touch bin/server
echo "foreman start -f Procfile.dev" > bin/server
chmod +x bin/server

Запуск

./bin/server

Для обслуживания приложений приходиться перемещаться в их корневые каталоги.

Например для добавления в проект axios:

cd app
yarn add axios

Или, для добавления модулей и установки drupal:

cd ../api
composer require jsonapi simple_oauth devel
cd web
drush si --db-url=sqlite://sites/default/files/.ht.sqlite

В итоге получаем полное разделение:
отдельное серверное приложение на базе drupal 8 организует api для доступа клиентского приложения к данным,
отдельное клиентское приложение на базе nuxt.js обеспечивает интерфейс пользователя.


Документация для работы со стеком nuxt.js drupal8:

Исходный код примера в репозитории на GitLab:

Модули и темы:
Ключевые слова:
Тип материала:
Версия Drupal:

Комментарии

Аватар пользователя bumble
bumble 4 месяца назад

На главной

Аватар пользователя Studio VIZA
Studio VIZA 4 месяца назад

Спасибо, очень давно искал эту инфу. Желателен более расширенный ввод, что на чём, где, почём. Чтоб новички меньше вопросов задавали, мы то ладно, лишнее не спросим.

Аватар пользователя multpix
multpix 4 месяца назад

давно уже,
тут решил и друпалургов подтянуть)

Аватар пользователя bumble
bumble 4 месяца назад

А .gitignore, из корня - что он игнорит?

Аватар пользователя gun_dose
gun_dose 4 месяца назад

В коде же написано)) А вообще там всё традиционно - игнорится всё, кроме кастомного кода, package.json, yarn.lock, composer.json и composer.lock

Аватар пользователя bumble
bumble 4 месяца назад

Не... На "все, кроме кастомного кода" есть свои игнорчики (в папках приложения, морды или бэка). А в корне - вроде как ничего и нет такого...
Хотя, у меня бы например, там была бы еще папка настроек ide'хи - явный претендент на игнор.

Аватар пользователя gun_dose
gun_dose 4 месяца назад

Со своими игнорчиками по-всякому бывает. Иногда node_modules индексируется. Не дай бог такое запушить)))

Аватар пользователя bumble
bumble 4 месяца назад

Согласен.

Аватар пользователя Studio VIZA
Studio VIZA 4 месяца назад
bumble написал:
что он игнорит?

git же

Аватар пользователя multpix
multpix 4 месяца назад
1

@bumble

git config --global core.excludesfile ~/.gitignore_global

и уже в него все свои специфические - кинфиги идеешек, временные файлы вима и т.п.

в корне гитигнор - думал для ясности,
а потом убрал, чтоб не дублировать и не смущать попусту)