# Разработка проекта локально

Узнайте, как создать локальную среду разработки, работая с примером клиентского приложения, созданного на основе HTML, CSS и JavaScript.

## Обзор

Локальная разработка означает настройку и **запуск проекта на собственном компьютере** вместо облака или на удаленном сервере. При локальной разработке код можно работать без подключения к Интернету и экспериментировать, не затрагивая динамическое приложение.

Действия, необходимые для настройки локальной среды разработки, отличаются для каждого проекта на основе языков программирования, платформ, инструментов и зависимостей. В этом руководстве вы узнаете **основные навыки** , необходимые для настройки любого проекта, работая с примером клиентского приложения, созданного на основе HTML, CSS и JavaScript. Затем вы можете применить эти же навыки к другим проектам в будущем.

## Установка основных средств разработки

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

1. [Настройте VS Code с помощью GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup-simplified).
1. [Установите Git](https://git-scm.com/downloads).

## Клонирование и открытие репозитория в VS Code

Сначала создайте копию репозитория на компьютере, клонировав его.

1. [Начните с клонирования репозитория](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application) новых2code/client-side-web-application. Эта ссылка открывает диалоговое окно в VS Code для клонирования репозитория. <!-- markdownlint-disable-line GHD003 -->
1. Выберите расположение для сохранения репозитория на компьютере, а затем нажмите кнопку **"Выбрать в качестве назначения** репозитория".
1. При появлении запроса откройте репозиторий.

## Установка необходимых компонентов для проекта

1. [Open Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text), затем попросите его определить, что нужно установить с помощью следующей подсказки. <!-- markdownlint-disable-line GHD003 -->

    ```text copy
    What do I need to install to develop this project locally? 
    ```

    В этом примере Copilot скажет, что для этого проекта требуется Node.js. Node.js позволяет запускать код JavaScript на компьютере и предоставляет средства для веб-разработки.

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

    В этом примере можно спросить "Разделы справки установить Node.js?" Copilot предоставит инструкции по посещению https://nodejs.org/ и скачиванию установщика.

## Установка зависимостей проекта

Теперь, когда у вас установлено необходимое программное обеспечение, необходимо понять, как использовать его для этого конкретного проекта.

**Сначала проверьте файл** README. Большинство проектов включают файл README в корневом каталоге, который объясняет, как настроить и запустить проект. Для этого проекта файл README и запрос Copilot сообщит вам, что следующим шагом является установка зависимостей проекта с помощью npm, диспетчера пакетов Node.js.

1. Откройте палитру команд, нажав <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows/Linux) или <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Mac).

1. Введите `Terminal: Create New Terminal` и нажмите клавишу <kbd>ВВОД</kbd>.

1. На вкладке терминала вставьте следующую команду.

   ```bash copy
   npm install
   ```

Так как этот проект использует Node.js, мы использовали для `npm install` чтения `package.json` файла и скачивания всех зависимостей, необходимых для правильной работы проекта. Другие типы проектов будут использовать разные команды. Например, Python проекты могут использовать `pip install -r requirements.txt`, а проекты Ruby — `bundle install`.

Если README не содержит сведения об установке зависимостей, вы можете:

* **Ищите конфигурационные файлы**: Разные проекты используют разные файлы для перечисления своих зависимостей — например, Node.js проекты используют `package.json`, Python проекты — `requirements.txt`, а Ruby — `Gemfile`.
* **Спросите Copilot**: попробуйте выполнить запрос: "Теперь, когда я Node.js установлен, что следующий шаг для настройки этого проекта?"

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

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

1. Узнайте, как запустить проект, проверив файл README в папке проекта.

   В этом примере раздел "Действия для локального запуска" в README объясняет, что можно запустить сервер разработки с `npm start` помощью команды. Введите следующую команду в терминале.

   ```bash copy
   npm start
   ```

1. Чтобы определить, где доступен локальный сервер, просмотрите выходные данные терминала. Вы увидите, что локальный сервер доступен.http://localhost:8080 Перейдите к адресу в браузере.
1. Внесите небольшое изменение в код, например редактирование текста в HTML-файле или изменение цвета в CSS-файле. Сохранение изменений.
1. Проверьте документацию по проекту или выходные данные терминала, чтобы понять, как просмотреть изменения. Некоторые проекты автоматически обновляются после сохранения изменений, а другие требуют обновления окна браузера.

   Для этого проекта обновите окно браузера, чтобы увидеть изменения.

Если README не содержит необходимых сведений, проверьте файлы конфигурации для доступных команд. Вы также можете спросить [переменные данных.copilot. copilot_chat_short %}](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text) с следующим запросом. <!-- markdownlint-disable-line GHD003 -->

```text copy
How do I start this project locally?
```

## Дальнейшие действия

Теперь, когда вы успешно настроили первую локальную среду разработки, пришло время применить эти навыки к различным типам проектов.

**Практика с другим проектом**: попробуйте настроить другой проект с различными требованиями. Например, веб-приложение [@new2code Python](https://github.com/new2code/python-web-application) использует Python и Flask вместо Node.js. <!-- markdownlint-disable-line GHD003 -->

Используйте то, что вы узнали в этом руководстве, чтобы:

* Клонирование репозитория с помощью VS Code
* Попросите Copilot какие средства и зависимости необходимо установить
* Прочитайте файл README, чтобы понять, как запустить проект
* Получение приложения, работающего в браузере

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