Настраиваем рабочее место: MODXCloud + PhpStorm

Для комфротной разработки нам нужно хорошее окружение. Лично я использую локальный веб-сервер Nginx + Php5-fpm + Mysql на Mac Os X, но это далеко не обычная конфигурация.

Гораздо проще и доступнее использовать любой хостинг с доступом к сайту по SFTP. Неважно, какой именно: shared, vps или cloud.

Конкретно для нашей задачи, чтобы сделать рабочее окружение максимально одинаковым и доступным для всех участников обучения, мы будем использовать бесплатный аккаунт на MODXCloud и 30 дневную пробную версию IDE PhpStorm.

Регистрация и настройка MODXCloud

Тут все проще некуда. Регистрируемся, заходим, создаём облако. -

После входа жмём Clouds в верхнем меню, потом Add new cloud, заполняем требуемые поля, выбираем тарифный план Development и нажимаем Complete Cloud Creation. -

Дальше ждем минут 5, пока новое облако будет готово. Вы увидите новое уведомление вверху экрана и облако появится в списке. Заходим в него, и в самом низу видим доступ по SFTP - он то нам и нужен. -

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

Настройка PhpStorm

Причины, по которым я выбрал именно PhpStorm описаны в отдельной заметке, так же есть кое-что про настройку. Честно скажу, информация уже устарела и сейчас я использую более простые способы работы, без монтирования директорий.

Итак, скачиваем и устанавливаем PhpStorm. Скорее всего, вам потребуется загрузить еще и Java 7, он сам должен об этом сказать.

Мы получаем пробную версию без ограничения функциональности, на 30 дней. Этого вполне достаточно, чтобы пройти весь курс и определиться, нужно ли покупать эту прекрасную IDE, или стоит поискать бесплатные аналоги. Лично я купил её на прошлой новогодней распродаже, кажется, за $25. Надеюсь, и в этом году нас всех порадуют - ибо нужно продлять лицензию =)

Запускаем IDE, создаём новый проект Sendex. -

Лично я переношу все панельки вправо, потому что я правша и там мне к ним удобнее лазить. Сделать это очень просто - через контекстное меню.

Для оформления я использую тему Twilight со шрифтами Ubuntu Mono, почти все настройки по умолчанию. Стиль оформления кода стандартный, с одним изменением - настоящая, а не smart, табуляция. Древний холивар "табы vs пробелы" я решил для себя просто - табы. -

Если кому интересно - вот экспорт моих настроек, можно импортировать себе.

Дальше мы настраиваем связь с сервером. Это один из самых важных моментов в дальнейшей работе. Выбираем в меню: ToolsDeploymentConfiguration, добавляем новый сервер и вбиваем данные от MODXCloud: -

Не забываем ответить зелёную галочку в левом-верхнем углу окошка, чтобы наш новый сервер стал по-умолчанию для этого проекта. Также после настройки желательно нажать Apply и Test SFTP connection. Если видим слово successfully, значит все хорошо.

С этого момента мы уже можем спокойно работать с файлами и директориями на сервере. Для этого нужно найти вкладку Remote host справа и кликнуть. В директории www лежит наш сайт, в котором можно создать директорию Sendex.

Теперь второй важный момент - нам нужно настроить синхронизацию между удалённой директорией Sendex и локальным проектом. Это делается там же, в настройках Deployment, вкладка Mapping:

Создаём в проекте файл test.php и копируем туда код для проверки:

<?php
// Подключаем
define('MODX_API_MODE', true);
require '../index.php';

// Включаем обработку ошибок
$modx->getService('error','error.modError');
$modx->setLogLevel(modX::LOG_LEVEL_INFO);
$modx->setLogTarget(XPDO_CLI_MODE ? 'ECHO' : 'HTML');

echo '<pre>';
print_r($modx->config);

Теперь нужно синхронизировать проект с удалённым сервером при помощи контекстного меню. Сразу после выгрузки файла мы можем его запускать на сервере по ссылке http://c2263.paas2.ams.modxcloud.com/Sendex/test.php -

Лично я всегда включаю автоматическую синхронизацию, чтобы файлы обновлялись при нажатии Ctrl+S. Как видите, мы уже работаем с ядром MODX из этого файла, который находится у нас в проекте и синхронизируется с удалённой директорией.

Одна загвоздка - в редакторе всё как-то некрасиво выглядит и ругается на undefined variable 'modx':

Это оттого, что PhpStorm не знает MODX из коробки, и нам нужно подключить его в проект. Тогда IDE проиндексирует файлы и научится понимать объявленные переменные и их методы.

Нужно скачать последнюю версию MODX Revolution с официального сайта, распаковать куда-то на вашем компьютере и подключить в проект через контекстное меню External Libraries в окошке файлов проекта: -

Нажимаем сохранить и все ошибки, кроме невозможности открыть файл index.php, пропадают. Этого файла у нас в проекте нет - он лежит на сервере, так что просто игнорируем.

Обратите внимание, что после подключения MODX в проект, мы видим все его методы при наборе - волшебный PhpStorm начинает нам их подсказывать. Более того, по методам и переменным можно переходить, просто нажав на них Ctrl+B.

Вот, видео из старой заметки, тут все понятно:

Заключение

Итак, мы создали хостинг, создали проект, настроили IDE и синхронизацию файлов. Правильное рабочее окружение - очень важно, от него зависит комфорт и удовольствие при разработке.

На следующем занятии мы склонируем modExtra из репозитория и разберем его структуру.

← Предыдущая заметка
Вводное занятие
Следующая заметка →
Разбор структуры компонента, зачем нужны assets, core и \_build
Комментарии (61)
alex.vakhitovAlex Vakhitov
08.11.2013 08:22

Немного непривычно конечно, я обычно использую git как прослойку между компом, dev сервером и продакшеном. По pull все обновляется везде и если есть прогоняются тесты и если тесты прошли успешно то уже отправляется на продакшен. Или если тестов нет тестируется в ручную на dev сервере и после этого отправляется продакшен. Для синхронизации используется git и под каждую фичу создается своя ветка, получается что любое изменение задокументировано в коммитах и всегда можно быстро все откатить назад. Хотелось бы с modx также работать, но вот проблема с задачами.

bezumkinВасилий Наумкин
08.11.2013 08:37

В MODX обновления не из git, а пакетами из репозитория.

Ну и коммитить нам пока нечего, это будет позже.

Виталий Князь
08.11.2013 10:53

Василий, а сейчас премиум раздел с сайта вообще убрали? (найти не могу) Просто у меня на счету было 135 руб. вроде, сейчас их нет...)

bezumkinВасилий Наумкин
08.11.2013 10:55

Да, всё убрал, все заметки открыл.

Это же не счет, а поддержка меня и моего сайта. Тебе вернуть эти 135 рублей, скажи куда?

Виталий Князь
08.11.2013 10:57

Нет, заметки открыты же.

ilyautkinИлья Уткин
10.11.2013 09:44

Что-то не получается найти вкладку Remote host... Может, что-то не так настроил?

alex.vakhitovAlex Vakhitov
10.11.2013 10:11

Можно отобразить панель вот так

ilyautkinИлья Уткин
10.11.2013 10:13

Спасибо большое!))

5636504Василий
20.11.2013 17:17

Кстати, в настройках (File->Settings->Keymap) можно и клавиши забиндить для чего угодно,чтобы быстрее добираться

Сергей Росоловский
17.11.2013 10:40

А если ведется разработка дополнений к минишопу то как подключить минишоп что бы phpStrom понимал его методы и переменные?

bezumkinВасилий Наумкин
17.11.2013 11:20

Точно так же как и сам MODX.

AlroniksИван Климчук
11.12.2013 11:42

Есть минус при работе с PhpStorm через удаленное соединение. Если настроить хостинг (на линоде, например) с ограничениями в iptables, то могут возникнуть проблемы при подключении. А проблема одна - при сохранении файла запускается деплой, который каждый раз подымает соединение и каждый раз делает логин, что медленно (иногда) и можно упереться в этот самый лимит подключений. А держать live-соединений он вроде пока не умеет.

bezumkinВасилий Наумкин
11.12.2013 11:54

Это минус не только PhpStorm, но и практически любой разработки на удалённом сервере.

К тому же, ограничение в iptables нужно ставить на production сервере, а не на dev. А еще есть виртуальные машины и локальные серверы. Я вот себе даже на Mac OS X поднял nginx + php5-fpm и переписал скрипты добавления\ удаления сайтов - отлично работают.

AlroniksИван Климчук
11.12.2013 11:57

Я вот думаю использовать puppet, если получится подружить его с MODX. На маке пробовал sshfs - тормозило люто. Пока сапасает небольшой скриптик на nodejs, который следит за изменениями файлов и автоматом аплоудит их на удаленный хост, но не работает в ubuntu почему-то. dev-сервер, который смотрит в интернет, предпочитаю так же защищать через iptables.

alex.vakhitovAlex Vakhitov
11.12.2013 12:17

Для разработки отлично подходит vagrant. Избавляет от всех проблем во время разработки

bezumkinВасилий Наумкин
11.12.2013 14:06

Большой вопрос, насколько это окружение будет индентично реальному серверу. У меня навалом вопросов по разным косякам с Denwer и аналогами под Windows.

Надо бы потестить на досуге. Это виртуальная машина, значит? Ну тут тогда другие сложности: энергопотребление и невозможность выполянять скрипты из IDE на сервере. Я в последнее время очень полюбил пакеты собирать хоткеем.

Но все равно скачал и посмотрю на досуге, спасибо!

alex.vakhitovAlex Vakhitov
11.12.2013 14:13

Абсолютно идентично, за основу берется виртуальная машина с той же убунтой и по стартовому сткрипту все что нужно на нее ставится и развертывается. В конечном итоге выходит так что локальная папка примонтирована к виртуально пространству.

Саму конфигурацию можно хранить в гите и все кто будут разрабатывать будут делать это в таком же окружении.

bezumkinВасилий Наумкин
11.12.2013 14:17

Звучит хорошо, надо попробовать.

alex.vakhitovAlex Vakhitov
11.12.2013 14:27

Php Storm из коробки кстати умеет работать

По поводу энергопотребления, gfxCardStatus говорит что видео остается интегрированным после старта. Ну и субъективно разница во времени работы не чувствуется, когда запущенно или нет

bezumkinВасилий Наумкин
11.12.2013 14:43

Чего ж ты раньше то молчал?!

Спасибо за наводку, уже поставил, но пока некогда погонять.

alex.vakhitovAlex Vakhitov
11.12.2013 14:49

Вообще-то не молчал, вот. Если нужно могу поискать у себя в Time Machine скрипт для создания окружения по твоей инструкции к vargant, то я с пару месяцев назад делал, но как то так и не пользовался

asxАлександр Котлов
23.01.2014 17:24

Дошли руки организовать нормально рабочее окружение, и после прочтения заметки про Шторм и уроков по компоненту появился вопрос. Я пока по большей части фронтендом занят, бэкэнд - на стандартных, максимум пару сниппетов допишу, свои компоненты далеко в будущем планируются. Поэтому вроде больше подходит WebStorm. Пока использую Sublime + FTPsync + LiveEdit + cssrefresh.js .

Собственно вопрос - сильно ли отличаются WEB и PHP штормы, что для фронтенда подойдет больше, и стоит ли заморачиваться с ними, или остаться на том, что есть и, в перспективе, на LightTable переехать когда его до ума доведут. Ну и если кто расскажет как он окружение организует - тоже буду весьма признателен.

Ну и до кучи - как там сейчас дела в линукс обстоят для фронтенда? Я когда-то давно году в 2003-2008 сидел на Debian, потом как-то не сложилось, но всегда хотелось назад, и вот думаю, может обратно вернуться? Глянул, большая половина инструментов под линукс есть. Отговорите или наоборот)

bezumkinВасилий Наумкин
23.01.2014 17:48

Про WebStorm не скажу - не видел, но не думаю, что стоит дергаться.

Ну и честно говоря, я не вижу каких-то мега особенностей. Тот же PhpStorm отлично редактирует CSS, Javascript и выгружает на сервер - мне больше ничего не нужно.

В Linux уже давно всё хорошо, если он не глючит на твоём железе. У меня вот на ноутбуках подгонял. Но зато все нормальные IDE там давно работают, так как написаны на мультиплатформенной Java.

Сейчас я рассортирую операционки для работы так: - GNU/Linux - Mac OS X - Windows

А для развлечений вот так: - Mac OS X - GNU/Linux - Windows

Ну и Mac стоит денег, а Linux - нет. Так что пробуй, смотри, авось понравится!

asxАлександр Котлов
23.01.2014 17:59

Ха, как в воду глядел )) - только что win 8 сказал что я плохой - и пишет что теперь будет перезагружаться каждые 2 часа, так что жить ей на винте осталось не долго) Посему еще 1 вопрос - что качать из дистрибутивов? На слуху Убунта, как вариант - Debian, но впринципе всеравно что, лишь бы не гента)

Ps еще вроде лучше чтобы npm был а не apt, или не принципиально?

bezumkinВасилий Наумкин
23.01.2014 18:03

Вот тут не знаю, могу предложить 2 варианта.

Ubuntu для любителей всего новенького и не особо стабильного, или Mint - для консерваторов. Я бы взял для работы Mint.

asxАлександр Котлов
23.01.2014 18:04

Спсибо! Глянул тостер - там тоже минт и убунта, качаю Минт)

alex.vakhitovAlex Vakhitov
24.01.2014 00:26

Я в связке использую webstorm и phpstorm/ pycharm. Мне вышло проще переключаться между ide чем раскачивать что-то плагинами. У каждой из них есть свои удобства, которые тяжело достигаются плагинами, поэтому проще скачать eap версию того и того. Ну и webstorm сейчас супер поддержку ангулара имеет, а все остальное нет (:

asxАлександр Котлов
24.01.2014 10:04

А можно чуть подробнее про отличия веб и пхп шторма, про ангуляр понял, питон мне не нужен. Впринципе пока к пхпшторму склоняюсь, но разница в цене в 2 раза в пользу веба слегка напрягает)

alex.vakhitovAlex Vakhitov
24.01.2014 10:43

Я именно про шторм сказать не могу, так как сейчас уже им не пользуюсь, но думаю сравнение с pycharm будет примерно таким же как и со штормом.

1. все зависит от того каким шронт эндом ты занимаешься, если это только jQuery то он отлично определяет функции во всех ide от jetbrains и вообще каких то проблем нет. Но вот как дело доходит до angular, backbone, ember все уже не так хорошо. К примеру мне так и не удалось заставить pycharm корректно обрабатывать все контроллеры ангулара и выводить их в автодополнении, а вот в вебшторме все отлично работает из коробки

2. простые скрипты на любом языке отлично обрабатываются в вебшторм, но как дело доходит какихто сложных специфичных функций все плохо. Чтото типо дебага, тестирования просто неудобно проводить.

3. всеже вебшторм расчитан на разработку веб приложений на js и бекенда на nodejs. Как бы то не было и сколько плагинов не ставь это его основная функция

Еще хочу сказать что я склоняюсь к версии что нужно использовать 2 ide, так как тупо не люблю тратить много времени на настройку рабочего места. Гораздо комфортней, чтобы все работало сразу и быстро.

Ну и продукты jetbrains можно использовать в виде беты (EAP), тогда можно долго не покупать лицензии

asxАлександр Котлов
24.01.2014 10:45

Спасибо!

asxАлександр Котлов
23.01.2014 21:43

В последний момент передумал и поставил Elementary OS (основана на убунту) - ощущения непередаваемые) А как далеко шагнул прогресс за это время - я даже не слегка офигел)

bezumkinВасилий Наумкин
23.01.2014 23:39

Ну круто, долго её делали, я так и не дождался - купил mac =)

asxАлександр Котлов
24.01.2014 10:08

Ну, я с мас поверхностно знаком, пару раз в гостях игрался - пока разницы не увидел)) А в остальном - праздник продолжается - все что мне нужно для счастья поставил в течении часа - приятно порадовало что 90% - линукс версии, и только пару - аналоги (punto switcher'а нет , и еще по мелочи ).

asxАлександр Котлов
31.01.2014 13:01

Подскажите, в modxcloud можно установить модх с отличным от английского языком? Как-то с ходу не нашел(

ВолодянВолодя
31.01.2014 13:06

нет помоему, так потом в админке можно язык поменять.

asxАлександр Котлов
31.01.2014 13:12

Спасибо, точно в админке меняется. Как всегда самое простое и очевидное решение мне в голову не пришло)))

zenwalkerМаксим Полетаев
04.02.2014 23:46

Древний холивар «табы vs пробелы» я решил для себя просто — табы.

Дабы разрешать такие холивары у MODX есть Code Standards, где разработчикам рекоментуют использовать 4 проблела. Я ничего не имею против табов, но печально, когда забивают на стандарты.

bezumkinВасилий Наумкин
05.02.2014 01:55

Когда я отправляю pull-request в ядро MODX - там пробелы.

Ну а в своих дополнениях у меня табы. Так что, не расстраивайся.

asxАлександр Котлов
11.02.2014 21:30

Опять все менее хорошо чем мне хотелось бы)

Есть модикс облако, есть вебшторм с настроенным автоматическим деплоем + watcher LESS, самих less файлов много, они инклюдятся в main.less, тот компилится в main.css.

В

страницы подключена cssrefresh.js - смотрит не изменился ли main.css на сервере и при необходимости перезагружает стили.

И вот тут загвоздка - после редактирования например footer.less - он тут же заливается на сервер, хотя на него мне по большей части все равно - мне нужен main.css - который в это же время прекрасно собирается но никуда почему-то не заливается, и если его принудительно загрузить - все замечательно. Но вот грузить в ручную - ну совсем уж не то)

То есть проблема в том, что автоматом заливает только файл который редактировал игнорируя main.less и main.css которые тоже изменились и их нужно залить в первую очередь.

Подскажите как победить??

bezumkinВасилий Наумкин
11.02.2014 22:13

Можно попробовать использовать MinifyX - он собирает less прямо на сервере.

То есть, когда ты редактируешь footer.less и он обновляется на сервере, MinifyX это увидит, и сгенерирует новый css с уникальным именем - cssrefresh.js не нужен.

Ошибки компиляции смотреть в системном журнале. Less файлы указываются в &cssSources.

asxАлександр Котлов
11.02.2014 22:19

Спасибо. Вообще давно собирался его попробовать но как всегда не доходили руки)

asxАлександр Котлов
11.02.2014 22:39

Василий, а чтобы он увидел изменения footer.less дополнительные телодвижения нужны?

Компилит все замечательно, но вот обновлять не хочет если поменялся файл.

Вызывал кешированым, некешированым, с разными комбинациями forceUpdate - все равно пока f5 не пнешь - не летит. В консоли и журнале тишина и спокойствие. В настройках компонента тоже ничего такого на первый взгляд нет. Документация этот момент тоже не прояснила.

Вызов на всякий

[[!MinifyX?
    &minifyCss=`1`
    &minifyJs=`1`
    &registerCss=`default`
    &registerJs=`default`
    &forceUpdate=`1`
    &cssSources=`css/fontello.css,
    less/colors.less,
    less/base.less,
    less/header.less,
    less/footer.less,
    less/cosmetic.less
    `
    &jsSources=``
    ]]
bezumkinВасилий Наумкин
11.02.2014 22:45

пока f5 не пнешь — не летит

Стили проверяются php на сервере, при генерации страницы. Естественно, что нужно её инициировать.

asxАлександр Котлов
11.02.2014 23:08

Пока придумал только сумрачный тевтонский сниппет - он в цикле смотрит папку лесс, и если время создания поменялось у какого-то файла - запускает runSnippet'ом minifyX.

Ход мыслей верный (в чем я сильно сомневаюсь, только математически объяснить не могу))) или вообще нужно в другую сторону думать. Опять без пинка никак((

bezumkinВасилий Наумкин
11.02.2014 23:10

Некэшированный MinifyX и сам прекрасно это делает.

Возможно, у тебя PhpStorm проставляет не то время изменения файлов на сервере из-за разницы с часовых поясах. Были такие жалобы на SFTP клиентов.

asxАлександр Котлов
11.02.2014 23:12

!Наверное оно, спасибо!

Пётр Молчанов
12.02.2014 14:29

А как победить эту проблему? Инклюдить как-то по-другому?

bezumkinВасилий Наумкин
12.02.2014 14:57

Это не проблема, просто пути у тебя на локальном компе и на сервере далеко не всегда совпадают.

Если сильно напрягает - можно отключить проверку этих ошибок.

Пётр Молчанов
13.02.2014 07:30

Блин, а у мя в этом файле инклюдится core.php, в котором содержатся все мои базовые классы и функции))) Видимо, придется пересматривать структуру проекта(

ElectricaМихаил
12.02.2014 15:06

А можно вводить путь нажать / потом Cntrl + пробел и будет показывать папки а ты выбирай. и не будет ошибки

bezumkinВасилий Наумкин
12.02.2014 15:08

Если подключаешь файл, который есть на сервере, но нет в локальном проекте (или находится не там) - это не поможет.

ElectricaМихаил
12.02.2014 15:12

Ну это да. Хотя например у меня синхронизация проекта(например полный modx) то как то нормально)) Ну или opencart

_tangoСаша Туманов
10.04.2014 14:37

Не удается подключиться к облаку, через sftp. Не находит ip. Несколько клиентов попробовал. Видимо какая то проблема с dns. Сижу из Казахстана, тут это нормально :( Можно ли мне для дальнейшей работы использовать локальный сервер?

ilyautkinИлья Уткин
10.04.2014 15:35

Лучше зарегистрируйтесь на http://beget.ru - там для любого тарифного плана первый месяц работы бесплатно. Для учебы хватит. Зато там полноценный ssh, FTP, есть веб-файл-менеджер. Всяко ближе к боевым условиям.

_tangoСаша Туманов
10.04.2014 15:54

Спасибо, пробую )

ilyautkinИлья Уткин
10.04.2014 15:58

Только в .htaccess пропиши

AddDefaultCharset UTF-8

А то там по умолчанию кодировка Win-1251.

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

_tangoСаша Туманов
10.04.2014 17:37

Спасибо большое, все работает замечательно :) И видимо, они поменяли кодировку по умолчанию, с установкой не было проблем.

И еще, подскажите пожалуйста, если я буду использовать не шторм, а лобстер например, у меня не будет больших проблем с дальнейшим изучением? У меня шторм тормозит очень :)

bezumkinВасилий Наумкин
10.04.2014 17:56

Ну кто ж тебе сможет ответить, будут ли у тебя проблемы, если учить не как написано?

Пробуй сам.

ElectricaМихаил
11.04.2014 07:12

Пробуй. Может еще NetBeans глянь. Ниче так

Антон СоловьёвАнтон Соловьёв
11.04.2014 10:55

NetBeans оперативы много жрет. А как ОС?

_tangoСаша Туманов
12.04.2014 15:27

Семерка стоит, 4Gb памяти. Вроде приноровился к шторму. Просто привык к скоростной работе компилированных под windows редакторов :) Спасибо большое за ответы!

bezumkin
Василий Наумкин
30.06.2022 03:58
Есть ли возможность формировать &quot;friendly URL aliases&quot;, используя аналог translit MODx? ...
bezumkin
Василий Наумкин
27.06.2022 03:32
Спасибо за исправления, очень выручаешь =) Но учитывая количество не описаных в заметке дополнительн...
bezumkin
Василий Наумкин
27.06.2022 03:10
что будет использоваться для вывода многоуровневого меню Посмотри как работают комментарии на этом ...
bezumkin
Василий Наумкин
25.06.2022 11:56
Поправил, спасибо!
bezumkin
Василий Наумкин
22.06.2022 10:08
Я обычно не пользуюсь RTE редакторами, потому что они пишут всякое непонятное что в HTML. Но можно в...
bezumkin
Василий Наумкин
21.06.2022 01:58
onLoad(data) { this.total = data.total }, и onLoad({total}) { this.total = total }, В нашем случ...
bezumkin
Василий Наумкин
20.06.2022 14:01
Прекрасно тебя понимаю, я когда сам в этом разбирался - голова дымилась. Но зато теперь прямо-таки п...
bezumkin
Василий Наумкин
20.06.2022 09:30
Не надо, оно по умолчанию так - я просто чуть более подробно написал.
bezumkin
Василий Наумкин
19.06.2022 13:42
А можно же из 1 файла сделать 2 экспорта. По-умолчанию, и отдельно для футера: export const Footer =...
bezumkin
Василий Наумкин
19.06.2022 09:44
Тебе спасибо, что поддерживаешь рублём мои начинания!