Настраиваем рабочее место: 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);
Теперь нужно синхронизировать проект с удалённым сервером при помощи контекстного меню. Сразу после выгрузки файла мы можем его запускать на сервере по ссылке 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
Предыдущая заметка
Вводное занятие


Комментарии ()

  1. Alex Vakhitov 08 ноября 2013, 12:22 # 0
    Немного непривычно конечно, я обычно использую git как прослойку между компом, dev сервером и продакшеном. По pull все обновляется везде и если есть прогоняются тесты и если тесты прошли успешно то уже отправляется на продакшен. Или если тестов нет тестируется в ручную на dev сервере и после этого отправляется продакшен. Для синхронизации используется git и под каждую фичу создается своя ветка, получается что любое изменение задокументировано в коммитах и всегда можно быстро все откатить назад. Хотелось бы с modx также работать, но вот проблема с задачами.
    1. Василий Наумкин 08 ноября 2013, 12:37 # 0
      В MODX обновления не из git, а пакетами из репозитория.

      Ну и коммитить нам пока нечего, это будет позже.
      1. Виталий Князь 08 ноября 2013, 14:53 # 0
        Василий, а сейчас премиум раздел с сайта вообще убрали? (найти не могу)
        Просто у меня на счету было 135 руб. вроде, сейчас их нет...)
        1. Василий Наумкин 08 ноября 2013, 14:55 # 0
          Да, всё убрал, все заметки открыл.

          Это же не счет, а поддержка меня и моего сайта. Тебе вернуть эти 135 рублей, скажи куда?
          1. Виталий Князь 08 ноября 2013, 14:57 # 0
            Нет, заметки открыты же.
    2. Илья Уткин 10 ноября 2013, 13:44 # 0
      Что-то не получается найти вкладку Remote host…
      Может, что-то не так настроил?
      1. Alex Vakhitov 10 ноября 2013, 14:11 # 0
        Можно отобразить панель вот так

        1. Илья Уткин 10 ноября 2013, 14:13 # 0
          Спасибо большое!))
          1. Василий 20 ноября 2013, 21:17 # 0
            Кстати, в настройках (File->Settings->Keymap) можно и клавиши забиндить для чего угодно, чтобы быстрее добираться
      2. Сергей Росоловский 17 ноября 2013, 14:40 # 0
        А если ведется разработка дополнений к минишопу то как подключить минишоп что бы phpStrom понимал его методы и переменные?
        1. Василий Наумкин 17 ноября 2013, 15:20 # 0
          Точно так же как и сам MODX.
        2. Иван Климчук 11 декабря 2013, 15:42 # 0
          Есть минус при работе с PhpStorm через удаленное соединение. Если настроить хостинг (на линоде, например) с ограничениями в iptables, то могут возникнуть проблемы при подключении. А проблема одна — при сохранении файла запускается деплой, который каждый раз подымает соединение и каждый раз делает логин, что медленно (иногда) и можно упереться в этот самый лимит подключений. А держать live-соединений он вроде пока не умеет.
          1. Василий Наумкин 11 декабря 2013, 15:54 # 0
            Это минус не только PhpStorm, но и практически любой разработки на удалённом сервере.

            К тому же, ограничение в iptables нужно ставить на production сервере, а не на dev. А еще есть виртуальные машины и локальные серверы.
            Я вот себе даже на Mac OS X поднял nginx + php5-fpm и переписал скрипты добавления\ удаления сайтов — отлично работают.
            1. Иван Климчук 11 декабря 2013, 15:57 # 0
              Я вот думаю использовать puppet, если получится подружить его с MODX. На маке пробовал sshfs — тормозило люто. Пока сапасает небольшой скриптик на nodejs, который следит за изменениями файлов и автоматом аплоудит их на удаленный хост, но не работает в ubuntu почему-то. dev-сервер, который смотрит в интернет, предпочитаю так же защищать через iptables.
              1. Alex Vakhitov 11 декабря 2013, 16:17 # 0
                Для разработки отлично подходит vagrant. Избавляет от всех проблем во время разработки
                1. Василий Наумкин 11 декабря 2013, 18:06 # 0
                  Большой вопрос, насколько это окружение будет индентично реальному серверу. У меня навалом вопросов по разным косякам с Denwer и аналогами под Windows.

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

                  Но все равно скачал и посмотрю на досуге, спасибо!
                  1. Alex Vakhitov 11 декабря 2013, 18:13 # 0
                    Абсолютно идентично, за основу берется виртуальная машина с той же убунтой и по стартовому сткрипту все что нужно на нее ставится и развертывается. В конечном итоге выходит так что локальная папка примонтирована к виртуально пространству.

                    Саму конфигурацию можно хранить в гите и все кто будут разрабатывать будут делать это в таком же окружении.
                    1. Василий Наумкин 11 декабря 2013, 18:17 # 0
                      Звучит хорошо, надо попробовать.
                      1. Alex Vakhitov 11 декабря 2013, 18:27 # 0
                        Php Storm из коробки кстати умеет работать


                        По поводу энергопотребления, gfxCardStatus говорит что видео остается интегрированным после старта. Ну и субъективно разница во времени работы не чувствуется, когда запущенно или нет
                        1. Василий Наумкин 11 декабря 2013, 18:43 # 0
                          Чего ж ты раньше то молчал?!

                          Спасибо за наводку, уже поставил, но пока некогда погонять.
                          1. Alex Vakhitov 11 декабря 2013, 18:49 # 0
                            Вообще-то не молчал, вот. Если нужно могу поискать у себя в Time Machine скрипт для создания окружения по твоей инструкции к vargant, то я с пару месяцев назад делал, но как то так и не пользовался
          2. Александр Котлов 23 января 2014, 21:24 # 0
            Дошли руки организовать нормально рабочее окружение, и после прочтения заметки про Шторм и уроков по компоненту появился вопрос. Я пока по большей части фронтендом занят, бэкэнд — на стандартных, максимум пару сниппетов допишу, свои компоненты далеко в будущем планируются. Поэтому вроде больше подходит WebStorm. Пока использую Sublime + FTPsync + LiveEdit + cssrefresh.js.

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

            Ну и до кучи — как там сейчас дела в линукс обстоят для фронтенда? Я когда-то давно году в 2003-2008 сидел на Debian, потом как-то не сложилось, но всегда хотелось назад, и вот думаю, может обратно вернуться? Глянул, большая половина инструментов под линукс есть. Отговорите или наоборот)
            1. Василий Наумкин 23 января 2014, 21:48 # 0
              Про WebStorm не скажу — не видел, но не думаю, что стоит дергаться.

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

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

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

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

              Ну и Mac стоит денег, а Linux — нет. Так что пробуй, смотри, авось понравится!
              1. Александр Котлов 23 января 2014, 21:59 # 0
                Ха, как в воду глядел )) — только что win 8 сказал что я плохой — и пишет что теперь будет перезагружаться каждые 2 часа, так что жить ей на винте осталось не долго) Посему еще 1 вопрос — что качать из дистрибутивов? На слуху Убунта, как вариант — Debian, но впринципе всеравно что, лишь бы не гента)

                Ps еще вроде лучше чтобы npm был а не apt, или не принципиально?
                1. Василий Наумкин 23 января 2014, 22:03 # 0
                  Вот тут не знаю, могу предложить 2 варианта.

                  Ubuntu для любителей всего новенького и не особо стабильного, или Mint — для консерваторов.
                  Я бы взял для работы Mint.
                  1. Александр Котлов 23 января 2014, 22:04 # 0
                    Спсибо! Глянул тостер — там тоже минт и убунта, качаю Минт)
              2. Alex Vakhitov 24 января 2014, 04:26 # 0
                Я в связке использую webstorm и phpstorm/ pycharm. Мне вышло проще переключаться между ide чем раскачивать что-то плагинами. У каждой из них есть свои удобства, которые тяжело достигаются плагинами, поэтому проще скачать eap версию того и того. Ну и webstorm сейчас супер поддержку ангулара имеет, а все остальное нет (:
                1. Александр Котлов 24 января 2014, 14:04 # 0
                  А можно чуть подробнее про отличия веб и пхп шторма, про ангуляр понял, питон мне не нужен. Впринципе пока к пхпшторму склоняюсь, но разница в цене в 2 раза в пользу веба слегка напрягает)
                  1. Alex Vakhitov 24 января 2014, 14:43 # 0
                    Я именно про шторм сказать не могу, так как сейчас уже им не пользуюсь, но думаю сравнение с pycharm будет примерно таким же как и со штормом.

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

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

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

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

                    Ну и продукты jetbrains можно использовать в виде беты (EAP), тогда можно долго не покупать лицензии
                    1. Александр Котлов 24 января 2014, 14:45 # 0
                      Спасибо!
              3. Александр Котлов 24 января 2014, 01:43 # 0
                В последний момент передумал и поставил Elementary OS (основана на убунту) — ощущения непередаваемые) А как далеко шагнул прогресс за это время — я даже не слегка офигел)
                1. Василий Наумкин 24 января 2014, 03:39 # 0
                  Ну круто, долго её делали, я так и не дождался — купил mac =)
                  1. Александр Котлов 24 января 2014, 14:08 # 0
                    Ну, я с мас поверхностно знаком, пару раз в гостях игрался — пока разницы не увидел)) А в остальном — праздник продолжается — все что мне нужно для счастья поставил в течении часа — приятно порадовало что 90% — линукс версии, и только пару — аналоги (punto switcher'а нет, и еще по мелочи ).
                2. Александр Котлов 31 января 2014, 17:01 # 0
                  Подскажите, в modxcloud можно установить модх с отличным от английского языком? Как-то с ходу не нашел(
                  1. Володя 31 января 2014, 17:06 # 0
                    нет помоему, так потом в админке можно язык поменять.
                    1. Александр Котлов 31 января 2014, 17:12 # 0
                      Спасибо, точно в админке меняется. Как всегда самое простое и очевидное решение мне в голову не пришло)))
                  2. Максим Полетаев 05 февраля 2014, 03:46 # 0
                    Древний холивар «табы vs пробелы» я решил для себя просто — табы.
                    Дабы разрешать такие холивары у MODX есть Code Standards, где разработчикам рекоментуют использовать 4 проблела. Я ничего не имею против табов, но печально, когда забивают на стандарты.
                    1. Василий Наумкин 05 февраля 2014, 05:55 # 0
                      Когда я отправляю pull-request в ядро MODX — там пробелы.

                      Ну а в своих дополнениях у меня табы. Так что, не расстраивайся.
                    2. Александр Котлов 12 февраля 2014, 01:30 # 0
                      Опять все менее хорошо чем мне хотелось бы)

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

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

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

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

                      Подскажите как победить??
                      1. Василий Наумкин 12 февраля 2014, 02:13 # 0
                        Можно попробовать использовать MinifyX — он собирает less прямо на сервере.

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

                        Ошибки компиляции смотреть в системном журнале. Less файлы указываются в &cssSources.
                        1. Александр Котлов 12 февраля 2014, 02:19 # 0
                          Спасибо. Вообще давно собирался его попробовать но как всегда не доходили руки)
                          1. Александр Котлов 12 февраля 2014, 02:39 # 0
                            Василий, а чтобы он увидел изменения 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=``
                            	]]
                            1. Василий Наумкин 12 февраля 2014, 02:45 # 0
                              пока f5 не пнешь — не летит
                              Стили проверяются php на сервере, при генерации страницы. Естественно, что нужно её инициировать.
                              1. Александр Котлов 12 февраля 2014, 03:08 # 0
                                Пока придумал только сумрачный тевтонский сниппет — он в цикле смотрит папку лесс, и если время создания поменялось у какого-то файла — запускает runSnippet'ом minifyX.

                                Ход мыслей верный (в чем я сильно сомневаюсь, только математически объяснить не могу))) или вообще нужно в другую сторону думать. Опять без пинка никак((
                                1. Василий Наумкин 12 февраля 2014, 03:10 # 0
                                  Некэшированный MinifyX и сам прекрасно это делает.

                                  Возможно, у тебя PhpStorm проставляет не то время изменения файлов на сервере из-за разницы с часовых поясах. Были такие жалобы на SFTP клиентов.
                                  1. Александр Котлов 12 февраля 2014, 03:12 # 0
                                    ! Наверное оно, спасибо!
                        2. Пётр Молчанов 12 февраля 2014, 18:29 # 0
                          А как победить эту проблему? Инклюдить как-то по-другому?
                          1. Василий Наумкин 12 февраля 2014, 18:57 # 0
                            Это не проблема, просто пути у тебя на локальном компе и на сервере далеко не всегда совпадают.

                            Если сильно напрягает — можно отключить проверку этих ошибок.
                            1. Пётр Молчанов 13 февраля 2014, 11:30 # 0
                              Блин, а у мя в этом файле инклюдится core.php, в котором содержатся все мои базовые классы и функции))) Видимо, придется пересматривать структуру проекта(
                            2. Михаил 12 февраля 2014, 19:06 # 0
                              А можно вводить путь нажать / потом Cntrl + пробел и будет показывать папки а ты выбирай. и не будет ошибки
                              1. Василий Наумкин 12 февраля 2014, 19:08 # 0
                                Если подключаешь файл, который есть на сервере, но нет в локальном проекте (или находится не там) — это не поможет.

                                1. Михаил 12 февраля 2014, 19:12 # 0
                                  Ну это да. Хотя например у меня синхронизация проекта(например полный modx) то как то нормально)) Ну или opencart
                            3. Саша Туманов 10 апреля 2014, 18:37 # 0
                              Не удается подключиться к облаку, через sftp. Не находит ip. Несколько клиентов попробовал. Видимо какая то проблема с dns. Сижу из Казахстана, тут это нормально :(
                              Можно ли мне для дальнейшей работы использовать локальный сервер?
                              1. Илья Уткин 10 апреля 2014, 19:35 # 0
                                Лучше зарегистрируйтесь на beget.ru — там для любого тарифного плана первый месяц работы бесплатно. Для учебы хватит. Зато там полноценный ssh, FTP, есть веб-файл-менеджер. Всяко ближе к боевым условиям.
                                1. Саша Туманов 10 апреля 2014, 19:54 # 0
                                  Спасибо, пробую )
                                  1. Илья Уткин 10 апреля 2014, 19:58 # 0
                                    Только в .htaccess пропиши
                                    AddDefaultCharset UTF-8
                                    А то там по умолчанию кодировка Win-1251.

                                    И при установке просто в браузере поменяй кодировку вручную.
                                    1. Саша Туманов 10 апреля 2014, 21:37 # 0
                                      Спасибо большое, все работает замечательно :)
                                      И видимо, они поменяли кодировку по умолчанию, с установкой не было проблем.

                                      И еще, подскажите пожалуйста, если я буду использовать не шторм, а лобстер например, у меня не будет больших проблем с дальнейшим изучением? У меня шторм тормозит очень :)
                                      1. Василий Наумкин 10 апреля 2014, 21:56 # 0
                                        Ну кто ж тебе сможет ответить, будут ли у тебя проблемы, если учить не как написано?

                                        Пробуй сам.
                                        1. Михаил 11 апреля 2014, 11:12 # 0
                                          Пробуй. Может еще NetBeans глянь. Ниче так
                                          1. Антон Соловьёв 11 апреля 2014, 14:55 # 0
                                            NetBeans оперативы много жрет. А как ОС?
                                            1. Саша Туманов 12 апреля 2014, 19:27 # 0
                                              Семерка стоит, 4Gb памяти. Вроде приноровился к шторму. Просто привык к скоростной работе компилированных под windows редакторов :)
                                              Спасибо большое за ответы!
                                  Добавление новых комментариев отключено.