{"meta":{"title":"Разработка проекта локально","intro":"Узнайте, как создать локальную среду разработки, работая с примером клиентского приложения, созданного на основе HTML, CSS и JavaScript.","product":"Начало работы","breadcrumbs":[{"href":"/ru/get-started","title":"Начало работы"},{"href":"/ru/get-started/learning-to-code","title":"Узнайте, как кодировать"},{"href":"/ru/get-started/learning-to-code/developing-your-project-locally","title":"Сервер локальной"}],"documentType":"article"},"body":"# Разработка проекта локально\n\nУзнайте, как создать локальную среду разработки, работая с примером клиентского приложения, созданного на основе HTML, CSS и JavaScript.\n\n## Обзор\n\nЛокальная разработка означает настройку и **запуск проекта на собственном компьютере** вместо облака или на удаленном сервере. При локальной разработке код можно работать без подключения к Интернету и экспериментировать, не затрагивая динамическое приложение.\n\nДействия, необходимые для настройки локальной среды разработки, отличаются для каждого проекта на основе языков программирования, платформ, инструментов и зависимостей. В этом руководстве вы узнаете **основные навыки** , необходимые для настройки любого проекта, работая с примером клиентского приложения, созданного на основе HTML, CSS и JavaScript. Затем вы можете применить эти же навыки к другим проектам в будущем.\n\n## Установка основных средств разработки\n\nПрежде чем начать, необходимо установить некоторые важные инструменты, которые широко используются для локальной разработки.\n\n1. [Настройте VS Code с помощью GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup-simplified).\n1. [Установите Git](https://git-scm.com/downloads).\n\n## Клонирование и открытие репозитория в VS Code\n\nСначала создайте копию репозитория на компьютере, клонировав его.\n\n1. [Начните с клонирования репозитория](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application) новых2code/client-side-web-application. Эта ссылка открывает диалоговое окно в VS Code для клонирования репозитория. <!-- markdownlint-disable-line GHD003 -->\n1. Выберите расположение для сохранения репозитория на компьютере, а затем нажмите кнопку **\"Выбрать в качестве назначения** репозитория\".\n1. При появлении запроса откройте репозиторий.\n\n## Установка необходимых компонентов для проекта\n\n1. [Open Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text), затем попросите его определить, что нужно установить с помощью следующей подсказки. <!-- markdownlint-disable-line GHD003 -->\n\n    ```text copy\n    What do I need to install to develop this project locally? \n    ```\n\n    В этом примере Copilot скажет, что для этого проекта требуется Node.js. Node.js позволяет запускать код JavaScript на компьютере и предоставляет средства для веб-разработки.\n\n1. Попросите Copilot, как установить требования к проекту, а затем выполните действия, чтобы установить их на компьютере.\n\n    В этом примере можно спросить \"Разделы справки установить Node.js?\" Copilot предоставит инструкции по посещению https://nodejs.org/ и скачиванию установщика.\n\n## Установка зависимостей проекта\n\nТеперь, когда у вас установлено необходимое программное обеспечение, необходимо понять, как использовать его для этого конкретного проекта.\n\n**Сначала проверьте файл** README. Большинство проектов включают файл README в корневом каталоге, который объясняет, как настроить и запустить проект. Для этого проекта файл README и запрос Copilot сообщит вам, что следующим шагом является установка зависимостей проекта с помощью npm, диспетчера пакетов Node.js.\n\n1. Откройте палитру команд, нажав <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows/Linux) или <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Mac).\n\n1. Введите `Terminal: Create New Terminal` и нажмите клавишу <kbd>ВВОД</kbd>.\n\n1. На вкладке терминала вставьте следующую команду.\n\n   ```bash copy\n   npm install\n   ```\n\nТак как этот проект использует Node.js, мы использовали для `npm install` чтения `package.json` файла и скачивания всех зависимостей, необходимых для правильной работы проекта. Другие типы проектов будут использовать разные команды. Например, Python проекты могут использовать `pip install -r requirements.txt`, а проекты Ruby — `bundle install`.\n\nЕсли README не содержит сведения об установке зависимостей, вы можете:\n\n* **Ищите конфигурационные файлы**: Разные проекты используют разные файлы для перечисления своих зависимостей — например, Node.js проекты используют `package.json`, Python проекты — `requirements.txt`, а Ruby — `Gemfile`.\n* **Спросите Copilot**: попробуйте выполнить запрос: \"Теперь, когда я Node.js установлен, что следующий шаг для настройки этого проекта?\"\n\n## Запуск и разработка проекта\n\nТеперь, когда среда разработки настроена, вы можете запустить сервер разработки и использовать его для предварительного просмотра изменений в коде.\n\n1. Узнайте, как запустить проект, проверив файл README в папке проекта.\n\n   В этом примере раздел \"Действия для локального запуска\" в README объясняет, что можно запустить сервер разработки с `npm start` помощью команды. Введите следующую команду в терминале.\n\n   ```bash copy\n   npm start\n   ```\n\n1. Чтобы определить, где доступен локальный сервер, просмотрите выходные данные терминала. Вы увидите, что локальный сервер доступен.http://localhost:8080 Перейдите к адресу в браузере.\n1. Внесите небольшое изменение в код, например редактирование текста в HTML-файле или изменение цвета в CSS-файле. Сохранение изменений.\n1. Проверьте документацию по проекту или выходные данные терминала, чтобы понять, как просмотреть изменения. Некоторые проекты автоматически обновляются после сохранения изменений, а другие требуют обновления окна браузера.\n\n   Для этого проекта обновите окно браузера, чтобы увидеть изменения.\n\nЕсли README не содержит необходимых сведений, проверьте файлы конфигурации для доступных команд. Вы также можете спросить [переменные данных.copilot. copilot_chat_short %}](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text) с следующим запросом. <!-- markdownlint-disable-line GHD003 -->\n\n```text copy\nHow do I start this project locally?\n```\n\n## Дальнейшие действия\n\nТеперь, когда вы успешно настроили первую локальную среду разработки, пришло время применить эти навыки к различным типам проектов.\n\n**Практика с другим проектом**: попробуйте настроить другой проект с различными требованиями. Например, веб-приложение [@new2code Python](https://github.com/new2code/python-web-application) использует Python и Flask вместо Node.js. <!-- markdownlint-disable-line GHD003 -->\n\nИспользуйте то, что вы узнали в этом руководстве, чтобы:\n\n* Клонирование репозитория с помощью VS Code\n* Попросите Copilot какие средства и зависимости необходимо установить\n* Прочитайте файл README, чтобы понять, как запустить проект\n* Получение приложения, работающего в браузере\n\nЭта практика поможет вам распознать шаблоны в разных технологиях и обеспечить уверенность в том, что вы сможете настроить любой проект локально."}