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

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

Прелесть 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:
2 Спасибо

Комментарии

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

На главной

0 Спасибо
Аватар пользователя Studio VIZA
Studio VIZA 2 месяца назад

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

0 Спасибо
Аватар пользователя multpix
multpix 2 месяца назад

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

0 Спасибо
Аватар пользователя bumble
bumble 2 месяца назад

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

0 Спасибо
Аватар пользователя gun_dose
gun_dose 2 месяца назад

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

0 Спасибо
Аватар пользователя bumble
bumble 2 месяца назад

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

0 Спасибо
Аватар пользователя gun_dose
gun_dose 2 месяца назад

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

0 Спасибо
Аватар пользователя bumble
bumble 2 месяца назад

Согласен.

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

git же

0 Спасибо
Аватар пользователя multpix
multpix 2 месяца назад 1

@bumble

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

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

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