1. Главная

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

Главные вкладки

multpix 13 июля 2017 в 15:26
4

Прелесть 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:

Автор

multpix
  • Drupal8
    • Разработчикам

    Комментарии

    Аватар пользователя Studio VIZA Studio VIZA 13 июля 2017 в 16:09

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

    Аватар пользователя gun_dose gun_dose 13 июля 2017 в 17:44

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

    Аватар пользователя bumble bumble 13 июля 2017 в 17:47

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

    Аватар пользователя multpix multpix 14 июля 2017 в 7:02
    1

    @bumble

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

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

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