Руководство. Создание и развертывание одностраничного приложения с помощью GitHub Spark и Codespaces

Новая поддержка одностраничного приложения обеспечивает разработчикам большую гибкость: вы можете создавать, настраивать и управлять сайтами Power Pages полностью в исходном коде. В недавнем выпуске GitHub Spark разработчики теперь могут создавать сайт, изменять его непосредственно в GitHub Codespace и развертывать его в среде Power Pages, не выходя из браузера. В этом руководстве описан полный рабочий процесс.

GitHub Spark — это новая платформа естественного языка на основе искусственного интеллекта из GitHub Copilot. Она предназначена для помощи разработчикам в быстром создании современных веб-приложений. В сочетании с GitHub Codespaces для редактирования кода Spark предоставляет:

  • Готовый репозиторий шаблонов для проекта.
  • Предварительно настроенные контейнеры разработки для согласованных сред.
  • Платформа искусственного интеллекта с использованием естественного языка из GitHub Copilot.

Для разработчиков Power Pages это означает, что вы можете начать работу с готовым шаблоном сайта, настроить его и развернуть без традиционной локальной установки.

К концу этой статьи вы узнаете, как:

  1. Создайте прототип сайта Power Pages с помощью GitHub Spark.
  2. Настройте пространство кода для поддержки .NET и PAC CLI.
  3. Создайте и отправьте одностраничные приложения в среду Power Pages.
  4. Повторно активируйте и протестируйте сайт непосредственно из Power Pages.

Предпосылки

Перед началом работы убедитесь, что у вас есть следующие ресурсы:

Замечание

  • Чтобы использовать GitHub Spark, убедитесь, что у вас есть соответствующие лицензии GitHub.
  • Поддержка GitHub Spark или Codespaces доступна в группе поддержки Spark.

Шаг 1. Начало работы с шаблоном Spark GitHub

  1. Перейдите к средству Spark GitHub и создайте новый сайт с помощью естественного языка.
  2. После создания нажмите кнопку Открыть в Codespaces.

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

Шаг 2. Обновление конфигурации контейнера разработки

В репозитории найдите файл:

.devcontainer/devcontainer.json

Измените раздел функций, чтобы добавить поддержку .NET 9.0. Конфигурация должна выглядеть следующим образом:

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

Перестройте контейнер

После сохранения изменений:

  1. Нажмите Ctrl + Shift + P клавишу (или Command + Shift + P на Mac), чтобы открыть палитру команд.
  2. Введите Codespaces: Перестроить контейнер и выберите его.
  3. Контейнер перезагрузится. Во время этого процесса будут установлены .NET 9 и все остальные зависимости.
  4. Подождите несколько секунд, пока установка завершится, прежде чем продолжить.

Этот шаг гарантирует обновление среды Codespace с новой конфигурацией. Это гарантирует, что ваше codespace будет включать необходимую среду выполнения для средств сборки Power Pages.

Шаг 3. Установка средств Power Platform

Из терминала Codespaces:

  1. Установите средства Power Platform (доступно в виде расширения VS Code).
  2. Эта установка также предоставляет интерфейс командной строки PAC, который позволяет выполнять проверку подлинности, скачивание и отправку сайтов.

Шаг 4. Подключение к среде Power Platform

Используйте PAC CLI для аутентификации в целевой среде:

pac auth create -u https://org12x34x45.crm.dynamics.com

Замените URL-адрес фактическим URL-адресом среды Power Platform.

Шаг 5. Создание сайта

Перед развертыванием создайте код сайта:

npm run build

Эта команда компилирует сайт и выводит артефакты в папку dist .

Шаг 6. Отправка сайта

Разверните сайт в среде Power Pages с помощью:

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

Параметры

Параметр Псевдоним Description
--rootPath -rp Локальная папка с исходными файлами сайта
--compiledPath -cp Путь к скомпилированным ресурсам, таким как React build
--siteName -sn Отображаемое имя сайта Power Pages

Шаг 7. Повторная активация и тестирование

  1. После отправки сайт появится в разделе "Неактивные сайты " в Power Pages.
  2. Перейдите на неактивные сайты, найдите свой сайт и выберите "Повторно активировать".
  3. Когда сайт становится активным, откройте его URL-адрес, чтобы подтвердить развертывание.

Дальнейшие действия. Защита и расширение сайта

Теперь, когда сайт развернут:

  • Last updated on