Урок: Създайте и разположите приложение за една страница с помощта на GitHub Spark и Codespaces

Новата поддръжка на приложения за една страница дава на разработчиците по-голяма гъвкавост: можете да създавате, персонализирате и управлявате сайтове на Power Pages изцяло в изходния код. С неотдавнашното издание на GitHub Spark разработчиците вече могат да създават сайт, да го редактират директно в GitHub Codespace и да го внедряват в среда на Power Pages, без да напускат браузъра си. Този урок ви превежда през целия работен процес.

GitHub Spark е нова базирана на AI платформа за естествен език от GitHub Copilot. Той е предназначен да помогне на разработчиците бързо да стартират модерните уеб приложения. Когато се комбинира с GitHub Codespaces за редактиране на код, Spark предоставя:

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

За разработчиците на Power Pages това означава, че можете да започнете с готов шаблон на сайт, да го персонализирате и да внедрите без традиционната локална настройка.

До края на тази статия ще знаете как да:

  1. Създайте прототип на Power Pages сайт с помощта на GitHub Spark.
  2. Конфигурирайте вашето Codespace за поддръжка на .NET и PAC CLI.
  3. Създайте и качете вашето приложение за една страница в среда на Power Pages.
  4. Активирайте отново и тествайте вашия сайт директно от Power Pages.

Предварителни изисквания

Преди да започнете, уверете се, че имате:

  • Среда на Power Pages с администраторски права.
  • Power Platform CLI (PAC CLI) версия 1.44.x или по-нова, инсталирана и удостоверена.
  • Сайт на Power Pages на версия 9.7.4.x или по-нова.
  • GitHub Spark лиценз с Codespaces за вашия персонализиран фронтенд проект.

Бележка

  • За да използвате GitHub Spark, уверете се, че имате подходящите лицензи за GitHub.
  • Поддръжката за GitHub Spark или Codespaces е достъпна чрез екипа за поддръжка на Spark.

Стъпка 1: Започнете с шаблона GitHub Spark

  1. Отидете в инструмента GitHub Spark и генерирайте нов сайт, като използвате естествен език.
  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: Rebuild Container и го изберете.
  3. Контейнерът ще се рестартира. По време на този процес ще бъдат инсталирани .NET 9 и всички други зависимости.
  4. Изчакайте няколко секунди, докато инсталацията завърши, преди да продължите.

Тази стъпка гарантира, че вашата среда на Codespace ще бъде опреснена с новата конфигурация. Това гарантира, че вашето Codespace включва необходимото време за изпълнение за инструменти за изграждане на Power Pages.

Стъпка 3: Инсталирайте инструменти на Power Platform

От терминала на Codespaces:

  1. Инсталирайте инструменти на Power Platform (налични като разширение VS Code).
  2. Тази инсталация също така въвежда PAC CLI, интерфейс на командния ред, който ви позволява да удостоверявате, изтегляте и качвате сайтове.

Стъпка 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"

Параметри

параметър Псевдоним Описание
--rootPath -rp Локална папка, в която са изходните файлове на вашия сайт
--compiledPath -cp Път до компилирани активи, като например React build
--siteName -sn Показвано име за вашия сайт на Power Pages

Стъпка 7: Активирайте отново и тествайте

  1. След качването вашият сайт се появява под Неактивни сайтове в Power Pages.
  2. Отидете на Неактивни сайтове, намерете вашия сайт и изберете Активиране отново.
  3. Когато сайтът стане активен, отворете неговия URL адрес, за да потвърдите внедряването.

Следващи стъпки: Защитете и разширете сайта си

Сега, когато сайтът ви е внедрен:

  • Last updated on