Разработка и сборка

После создания проекта Astro вы сможете сразу приступить к работе! 🚀

Редактирование проекта

Чтобы вносить изменения в проект, откройте папку проекта в вашем редакторе кода. Работа в режиме разработки с запущенным dev-сервером позволяет сразу видеть изменения на сайте по мере редактирования кода.

Вы также можете настроить параметры среды разработки, например, настроить TypeScript или установить официальные расширения редактора для Astro.

Запуск сервера разработки Astro

Astro включает встроенный сервер для разработки со всем необходимым функционалом. Команда astro dev запустит локальный сервер, позволяя впервые увидеть ваш сайт в действии.

Каждый стартовый шаблон содержит предустановленный скрипт, который автоматически выполнит astro dev за вас. После перехода в директорию проекта используйте предпочитаемый менеджер пакетов для запуска этой команды и старта сервера разработки Astro.

npm run dev

pnpm run dev

yarn run dev

Всё работает? Отлично! Ваш проект теперь доступен по адресу http://localhost:4321/ — открывайте его в браузере и смотрите результат!

Работа в режиме разработки

Astro будет отслеживать изменения файлов в каталоге src/ и обновлять предварительный просмотр сайта по мере сборки, поэтому вам не придётся перезапускать сервер при внесении изменений во время разработки. При работе dev-сервера вы всегда сможете увидеть в браузере актуальную версию вашего сайта.

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

Если после запуска dev-сервера вы не можете открыть свой проект в браузере, вернитесь в терминал, где вы выполняли команду dev, и проверьте отображаемые сообщения. Так вы поймёте, произошла ли ошибка или обслуживается ли ваш проект по URL-адресу, отличному от http://localhost:4321/.

Сборка и предварительный просмотр вашего сайта

Чтобы проверить версию вашего сайта, которая будет создана во время сборки, закройте сервер разработки (Ctrl + C) и запустите соответствующую команду сборки для вашего менеджера пакетов в терминале:

npm run build

pnpm build

yarn run build

Astro создаст готовую к развёртыванию версию вашего сайта в отдельной папке (по умолчанию dist/), и вы сможете наблюдать за её развитием в терминале. Это предупредит вас о любых ошибках сборки проекта до его развёртывания в производство. Если TypeScript настроен на strict или strictest, сценарий build также проверит ваш проект на наличие ошибок типа.

Когда сборка будет завершена, запустите соответствующую команду preview (например, npm run preview) в терминале, и вы сможете просмотреть собранную версию сайта локально в том же окне предварительного просмотра браузера.

Обратите внимание, что в этом случае ваш код просматривается в том виде, в котором он существовал на момент последнего запуска команды сборки. Это позволит вам увидеть, как будет выглядеть ваш сайт, когда он будет развёрнут в интернете. Любые последующие изменения, внесённые в код после сборки, не будут отражены во время предварительного просмотра сайта, пока вы не выполните команду сборки снова.

Используйте комбинацию Ctrl + C, чтобы выйти из предварительного просмотра и запустить другую команду терминала, например, перезапустить сервер разработки, чтобы вернуться в работу в режиме разработки, который обновляется по мере редактирования и отображает предварительный просмотр изменений вашего кода.

Узнайте больше об интерфейсе командной строки Astro и командах терминала, которые вы будете использовать при сборке с помощью Astro.

Следующие шаги

Отлично! Теперь вы готовы начать строительство с помощью Astro! 🥳

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

Настройка среды разработки

Изучите приведённые ниже руководства, чтобы улучшить свой опыт разработки.

Настройка редактора Настройте редактор кода, чтобы улучшить свою работу и открыть новые возможности.

Панель разработчика Изучите полезные функции панели инструментов разработчика.

Настройка TypeScript Настройте параметры для проверки типов, IntelliSense и многого другого.

Изучите возможности Astro

Структура проекта Разберитесь в организации файлов Astro с помощью руководства по структуре проекта.

Работа с коллекциями контента Добавляйте контент на сайт с валидацией метаданных и автоматической типизацией.

Добавление переходов между страницами Создавайте плавные анимации и переходы.

Архитектура островков Узнайте об архитектуре островков Astro.

Пройдите вводное руководство

Создайте полнофункциональный блог на Astro с нуля, используя наше вводное руководство.

Это отличный способ увидеть, как работает Astro, и пройти основы работы со страницами, макетами, компонентами, маршрутизацией, островками и прочим. Для начинающих разработчиков предусмотрен отдельный раздел с пошаговыми инструкциями по установке программ, регистрации в GitHub и публикации сайта.

Внести свой вклад Сообщество Sponsor