Создание нового проекта
Первым делом нам нужно разобраться с вашей рабочей средой. Я использую одни из самых популярных инструментов:
- Операционную систему 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. Обе части разрабатываются (и могут быть использованы) независимо друг от друга и хранятся в разных репозиториях:
Объединяются они в 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. Он уже работает, но все страницы и данные пока по-умолчанию. На следующих уроках мы научимся их менять под свои нужды.
Часть с настройкой проекта на локальной машине обычно вызывает самое больше число вопросов, поэтому я жду их в комментариях. Как только разберёмся с этим, дальше всё пойдёт гораздо проще и быстрее.
0
👍
👎
❤️
🔥
😮
😢
😀
😡
1 013
30.05.2022 10:31:26
65 комментариев
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Василий Наумкин
04.02.2025 19:27:08
Я таким давно не занимаюсь и с MODX не работаю.
Попробуйте обратиться к ребятам с modx.pro.
Создание нового проекта
65
Василий Наумкин
23.12.2024 05:33:00
В MODX сначала создали проблему, автоматически генерируя адреса, а потом "решили" заморозкой.
Так ч...
Дмитрий
14.12.2024 09:10:38
Василий, прошу прощения, тупанул, не разобрался сразу. Фреймворк отличный! "Чистый лист" на vue, рис...
Василий Наумкин
05.12.2024 20:01:14
В итоге основная ошибка была в неправильном общем root в Nginx, из-за чего запросы не улетали на фай...
Василий Наумкин
01.07.2024 11:56:41
Да, верно, именно так.
А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024 09:38:15
О, точно, вылезает если не залогинен.
Спасибо, исправил!
Уровни подписки
Спасибо!
500 ₽ в месяц
Эта подписка ничего не даёт, просто возможность сказать спасибо за мои заметки. Подписчики отмечаются зелёненьким цветом в комментариях.
Большое спасибо!
1 000 ₽ в месяц
И эта подписка не даёт ничего, кроме оранжевого цвета в комментариях и возможности сказать спасибо, но уже большое!
Меня зовут Полина, компания Gallery to Go. Руководитель попросил связаться с Вами насчет переноса нашего сайта с opencart на modx. Не смогла найти Ваши контакты. Вы не могли бы связаться со мной по данному вопросу?