Создание нового проекта

Первым делом нам нужно разобраться с вашей рабочей средой. Я использую одни из самых популярных инструментов:

• Операционную систему MacOS с менеджером пакетов Homebrew
• Laravel Valet для локальной разработки
• Интегрированную среду PhpStorm
• Веб-сервер Nginx
• База данных MySQL 8.0
• Php 7.4 и NodeJS 17

Здесь нет ничего особенного, обычный набор веб-разработчика.

Если вы используете такой же сетап, то поздравляю, вам будет максимально легко следовать моим инструкциям - нужно только установить специальный драйвер для Valet из репозитория vesp-valet-driver, что делается простым копированием файла VespValetDriver.php в ~/.config/valet/Drivers.

Структурно Vesp состоит из 2х больших частей: фронтенда на VueJS и бэкенда на PHP. Обе части разрабатываются (и могут быть использованы) независимо друг от друга и хранятся в разных репозиториях:

• vesp/core: Packagist, Github
• vesp/frontend: Npmjs, Github

Объединяются они в 1 общем пакете, который называется просто Vesp и ставится из Packagist при помощи composer. Давайте создадим наш новый проект VespShop.

composer create-project vesp/vesp ./VespShop

Команда create-project у composer не просто скачивает пакеты, но и запускает скрипты, прописанные в composer.json. В нашем случае они устанавливают зависимости Node.js.

Далее заходим в директорию VespShop и делаем valet link vesp-shop, что создаёт в нашем Valet новый сайт vesp-shop.test.

В нём пока ничего нет, поэтому делаем в той же директории composer node:generate и переходим по локальному адресу http://vesp-shop.test - теперь вы должны увидеть такую картинку:

Давайте разберёмся как это всё работает.

Структура проекта

В корне проекта лежат следующие файлы и директории:

• .env.dist пример конфигурации проекта
• .env рабочая конфигурация, которая исопользуется в проекте
• composer.json наши PHP зависимости и команды управления проектом
• composer.lock служебный файл Composer с установленными версиями зависимостей
• core это наш бэкенд со всем PHP кодом: модели, контроллеры, маршруты, консольные скрипты - в общем, вся серверная часть.
• frontend а это, понятное дело, фронтенд. Причём внутри сразу 2 независимых веб-приложения: админка и публичный веб-сайт
• www публично доступная директория с одним единственным коннектором для запросов в API и примером правил для .htaccess.

Запущенная нами команда composer node:generate создала в frontend/dist статичные HTML и JS файлы нашего фронтенда. Причём там собрано 2 приложения: admin и site.

Когда вы открываете vesp-shop.test, ваш запрос принимает локальный Nginx, отправляет в Valet, тот смотрим доступные драйвера, запускает драйвер для Vesp, а тот говорит ему, откуда нужно грузить файлы - именно из frontend/dist.

Статичные файл загружаются в браузер и дальше отправляют запросы на сервер через API. Таким образом и происходит всё взаимодействие фронтеда с бэкендом, через разные запросы в API и ответы в формате JSON.

Важно понимать, что в отличие от MODX сервер здесь не генерирует никакой HTML код в момент запроса, весь нужный код уже заранее сгенерирован и загружен пользователем. Теперь он просто выводится в соотвеcтвии со своей логикой и ответами бэкенда.

Публичный сайт по умолчанию никаких запросов пока не делает, просто выводит логотип системы на чёрном фоне. Поэтому давайте посмотрим на админку по адресу http://vesp-shop.test/admin/.

Что бы вы здесь не указывали, получите ошибку. Потому что у нас еще нет никаких данных, мы даже таблицы еще не создали.

Работа с базой данных

Первым делом нам нужно создать базу для нашего проекта.

mysql -e "create database VespShop" -uroot -proot

Как видно, у меня локальный root MySQL с паролем root. Дальше смотрим наш .env файл и меняем настройки:

# имя проекта, будет использовать на фронтенде
APP_NAME="Vesp Shop"

# базовый url сайта 
SITE_URL=http://vesp-shop.test/

# url для API запросов, может отличаться от базового
API_URL=http://vesp-shop.test/api/

# Разрешение для кроссдоменных запросов, на локалке обязательно включаем
CORS=1

# Настройки доступа в MySQL
DB_DRIVER=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_PREFIX=app_
DB_DATABASE=VespShop
DB_USERNAME=root
DB_PASSWORD=root
DB_CHARSET=utf8mb4
DB_COLLATION=utf8mb4_general_ci
DB_FOREIGN_KEYS=1

# Настройки для генерации JWT, пока можно не трогать
JWT_SECRET=secret
JWT_EXPIRE=2592000
JWT_MAX=3

# Абсолютные пути к директориям 
UPLOAD_DIR=/Users/bezumkin/Projects/VespShop/upload/
CACHE_DIR=/Users/bezumkin/Projects/VespShop/tmp/

Вы должны указать собственные пути к директориям, их можно узнать командой pwd в MacOS.

После изменения файла .env нам нужно пересобрать фронтенд, потому что изменился адрес отправки API запросов - composer node:generate.

А дальше запускаем новые команды:

composer db:migrate
composer db:seed

Первая команда создаёт таблицы, вторая "засеивает" их начальными данными.

После этого можно заходить в админку с логином и паролем admin.

Заключение

Сегодня мы создали и настроили новый проект на Vesp. Он уже работает, но все страницы и данные пока по-умолчанию. На следующих уроках мы научимся их менять под свои нужды.

Часть с настройкой проекта на локальной машине обычно вызывает самое больше число вопросов, поэтому я жду их в комментариях. Как только разберёмся с этим, дальше всё пойдёт гораздо проще и быстрее.