Развертывание платформы SharePoint Framework

В предыдущей статье мы рассмотрели конструкцию JavaScript, необходимую для платформы SharePoint Framework. На этот раз речь пойдет о завершении процесса. Мы построили веб-часть или элемент управления, и теперь нужно ввести этот компонент в SharePoint Online.

Вся конструкция платформы построена на идее автоматизированных задач, которые могут быть определены и использоваться не только для компиляции, но и для подготовки необходимого файла веб-части. Создав проект, вы можете выполнить команды gulp для компиляции и построения программного кода. В результате все становится более компактным и объединяется с использованием веб-компонентов.

Прежде чем начать, я использую такие версии компонентов, как показано на экране 1.

Экран 1. Версии используемых

Команда gulp — ship возвращает подтверждение целостности иерархии на консоль (экран 2).

Экран 2. Развертывание компонентов

Теперь вернемся к нашему редактору. Это может быть Atom, vscode или некоторое количество редакторов. Вы можете увидеть новую папку с именем temp, которая создается и заполняется. При развертывании папки temp отображается папка deploy, которая содержит вновь скомпилированные файлы (экран 3).

Экран 3. Содержимое папки deploy

Местоположение этих файлов, сохраняемых после создания, определяется файлом с именем prepare-deploy.json. Он содержит свойство deployCdnPath, как раз и указывающее на местоположение (экран 4).

Экран 4. Свойство deployCdnPath указывает местоположение

При необходимости это значение можно изменить, но пока мы оставим его в качестве выбираемого по умолчанию. Команда gulp только выдает необходимые файлы, которые нужно где-нибудь разместить, но не создает пакет SharePoint, подлежащий развертыванию. Сделать это можно с помощью gulp package-solution. После завершения отображается полный вывод пакета на консоли (экран 5).

Экран 5. Создание пакета SharePoint для развертывания

Возвращаясь к редактору, можно увидеть другую созданную папку с именем sharepoint. Прежде чем кто-нибудь попытается исправить ошибку, замечу, что здесь действительно все буквы строчные, без прописных (экран 6).

Экран 6. Вид созданной папки в редакторе

Самый важный новый компонент — файл. spapp, который представляет собой элемент, необходимый для развертывания в каталоге приложений на сайте SharePoint Online.

Следующий шаг — скопировать компоненты в нужное место, но для начала необходимо определить окончательный cdnBasePath и повторно выполнить компиляцию, чтобы обеспечить корректность ссылок. Измените файл с именем write-manifest.json и введите местоположение SharePoint Online, где предстоит сохранять вспомогательные файлы.

На своем сайте я просто добавил папку в библиотеку материалов. Очевидно, есть более подходящие способы хранения материалов, например задействовать настоящую сеть доставки содержимого (CDN), а не сайт SharePoint, если только вы не используете новый компонент CDN Azure или Office 365.

Затем нужно выполнить действия, описанные в предыдущих статьях о настройке CDN в Office 365.

Последнее значение должно быть приблизительно как на экране 7, что является общедоступным URL-адресом CDN, а не прямым URL-адресом SharePoint для используемого вами расположения.

Экран 7. Общедоступный URL-адрес CDN

Теперь требуется выполнить команды gulp bundle — ship и gulp package-solution — ship, чтобы сформировать все элементы с корректными ссылками. Затем мы передаем файлы из папки temp/deploy в расположение SharePoint (экран 8).

Экран 8. Формирование элементов с корректными ссылками

Далее, располагая вспомогательными элементами, можно перейти в каталог приложений для нашего сайта и передать файл. spapp. Получив запрос после передачи, убедитесь в правильности настроек для окна deploy (экран 9).

Экран 9. Вид окна развертывания

Представленный URL-адрес должен соответствовать URL-адресу CDN, добавленному к cdnBasePath в файле с именем write-manifest.json. Теперь можно перейти к одному из семейств веб-сайтов и выбрать пункт Add an App («Добавить приложение»), а затем обратиться к Apps from your organization («Приложения из вашей организации») и выбрать приложение. Далее можно изменить страницу и добавить новую веб-часть.

Если на данном этапе вы получаете сообщение об ошибке, проверьте URL-адрес, повторите построение, развертывание и тестирование. Конечно, возникает вопрос, каким образом полностью автоматизировать процесс развертывания. Вы можете обратиться к gulp-spsync Виктора Уилена в репозитории GitHub (https://github.com/wictorwilen/gulp-spsync). Или к gulp-propellor и gulp propeller-sharepoint, которые можно найти в следующих документах: https://github.com/oldrivercreative/propeller и https://github.com/oldrivercreative/propeller-sharepoint.

В результате процесс gulp дополняется новыми задачами, которые можно запускать в процессе компиляции.