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

Когда у вас есть проект Astro, вы готовы начать разработку! 🚀

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

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

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

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

Astro поставляется со встроенным сервером разработки, в котором есть всё необходимое для работы над проектом. Команда CLI astro dev запустит локальный сервер разработки, чтобы вы могли увидеть свой новый веб-сайт в действии в первый раз.

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

npm run dev

pnpm run dev

yarn run dev

Если всё прошло успешно, Astro будет обслуживать ваш проект по адресу http://localhost:4321/. Перейдите по этой ссылке в браузере и посмотрите на свой новый сайт!

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

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

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

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

Сборка и предпросмотр сайта

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

npm run build

pnpm build

yarn run build

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

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

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

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

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

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

Успех! Теперь вы готовы начать создавать проекты на Astro! 🥳

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

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

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

Настройка редактора Настройте редактор кода для работы с Astro и разблокируйте новые функции.

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

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

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

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

Создайте коллекции контента Добавьте контент на ваш новый сайт с валидацией метаданных (frontmatter) и автоматической безопасностью типов.

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

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

Пройдите вводное учебное пособие

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

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