Навчальний посібник: Створення та розгортання односторінкового додатку за допомогою GitHub Spark та Codespaces

Нова підтримка односторінкових додатків надає розробникам більшу гнучкість: ви можете створювати, налаштовувати та керувати сайтами Power Pages повністю у вихідному коді. З нещодавнім випуском GitHub Spark розробники тепер можуть створювати сайт, редагувати його безпосередньо в кодовому просторі GitHub і розгортати в середовищі Power Pages, не виходячи з браузера. Цей урок проведе вас через повний робочий процес.

GitHub Spark — це нова природномовна платформа на основі штучного інтелекту від GitHub Copilot. Він розроблений, щоб допомогти розробникам швидко завантажувати сучасні веб-програми. У поєднанні з GitHub Codespaces для редагування коду, Spark забезпечує:

  • Готовий до використання репозиторій шаблонів для вашого проекту.
  • Попередньо налаштовані контейнери розробника для узгоджених середовищ.
  • Платформа на основі штучного інтелекту та природної мови від 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. Після створення натисніть «Відкрити в кодових просторах».

Це дає вам хмарне середовище розробки, де ви можете працювати над своїм проектом 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. Після завантаження ваш сайт з'явиться в розділі Неактивні сайти на сторінках живлення.
  2. Перейдіть до розділу Неактивні сайти, знайдіть свій сайт і натисніть Повторно активувати.
  3. Коли сайт стане активним, відкрийте його URL-адресу, щоб підтвердити розгортання.

Наступні кроки: Захистіть та розширте свій сайт

Тепер, коли ваш сайт розгорнуто:

  • Last updated on