Начало работы с Gatsby.js в Windows

Руководство по установке Gatsby.js веб-платформы и запуску в Windows.

Gatsby.js — это фреймворк генератора статического сайта, основанный на React.js, в отличие от серверной отрисовки, как Next.js. Генератор статических сайтов создает статический HTML во время сборки. Для этого не требуется сервер. Next.js создает HTML в среде выполнения (каждый раз при создании нового запроса), требуя запуска сервера. Gatsby также определяет, как обрабатывать данные в вашем приложении (с помощью GraphQL), в то время как Next.js оставляет это решение за вами.

Дополнительные сведения о React и других платформах JavaScript на основе React см. в статье Общие сведения о React.

Предпосылки

Для работы с этим руководством нужно настроить среду разработки Node.js. Для этого:

• Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+) или Windows 11
• Установите подсистему Windows для Linux (WSL), включая дистрибутив Linux, например, Ubuntu, и убедитесь, что он функционирует в режиме WSL 2. Это можно проверить, открыв PowerShell и введя следующее: wsl -l -v
• Установите Node.js в WSL 2: Это включает менеджер версий, менеджер пакетов, Visual Studio Code и Расширение удаленной разработки.

Мы рекомендуем использовать подсистему Windows для Linux при работе с приложениями NodeJS для повышения производительности, совместимости системных вызовов и пародии при работе с серверами Linux или контейнерами Docker.

Это важно

Установка дистрибутива Linux с WSL создаст каталог для хранения файлов: \\wsl\Ubuntu-20.04 (замените Ubuntu-20.04 любым дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите свой домашний каталог с помощью cd ~, а затем введите команду explorer.exe . Не устанавливайте NodeJS или сохраните файлы, с которыми вы будете работать на подключенном диске C (/mnt/c/Users/yourname$). Это значительно замедлит установку и время сборки.

Установка Gatsby.js

Чтобы создать проект Gatsby.js, выполните приведенные действия.

1. Откройте терминал WSL (т. е. Ubuntu).

2. Создайте папку проекта и mkdir GatsbyProjects введите этот каталог: cd GatsbyProjects

3. Используйте npm для установки интерфейса командной строки Gatsby: npm install -g gatsby-cli. После установки проверьте версию с помощью команды gatsby --version.

4. Создайте ваш проект Gatsby.js: gatsby new my-gatsby-app

5. После установки пакета перейдите в каталог новой папки приложения cd my-gatsby-app, и затем откройте проект Gatsby в VS Code с помощью code .. Это позволит вам просмотреть фреймворк Gatsby.js, созданный для вашего приложения с помощью файлового менеджера VS Code. Обратите внимание на то, что экземпляр VS Code открыла приложение в среде WSL-Remote (как указано на зеленой вкладке в левом нижнем углу окна VS Code). Это означает, что при использовании VS Code для редактирования в ОС Windows он всё равно запускает ваше приложение в ОС Linux.

   

6. Есть 3 команды, которые необходимо знать после установки Gatsby:

   • gatsby develop для запуска экземпляра разработки с горячей перезагрузкой.
   • gatsby build для создания рабочей сборки.
   • gatsby serve для запуска приложения в рабочем режиме.

   Откройте терминал WSL, интегрированный в VS Code (View > Terminal). Убедитесь, что путь терминала указывает на каталог проекта (т. е. ~/GatsbyProjects/my-gatsby-app$). Затем попробуйте запустить экземпляр разработки нового приложения с помощью: gatsby develop

7. После завершения компиляции нового проекта Gatsby, в терминале отобразится информация.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Выберите эту ссылку localhost, чтобы просмотреть новый проект, встроенный в веб-браузер.

Замечание

Вы заметите, что выходные данные терминала также дают вам знать, что вы можете просмотреть GraphiQL, интегрированную в браузер среду разработки, чтобы изучить данные и схему вашего сайта: http://localhost:8000/___graphql. GraphQL объединяет ваши API в самодокументирующуюся интегрированную среду разработки (GraphiQL), встроенную в Gatsby. Помимо изучения данных и схемы сайта, вы можете выполнять такие операции GraphQL, как запросы, изменения и подписки. Для получения дополнительной информации см. введение GraphiQL.

8. Откройте файл src/pages/index.js в редакторе VS Code. Найдите заголовок <h1>Welcome to <b>Gatsby!</b></h1> страницы и измените его на <h1>Hello <b>World!</b></h1>. Если ваш веб-браузер по-прежнему открыт на http://localhost:8000, сохраните изменение и обратите внимание, что функция горячей перезагрузки автоматически компилирует и обновляет ваше изменение в браузере.

   

Отладчик VS Code можно использовать с приложением Gatsby, выбрав клавишу F5 или выбрав команду "Просмотреть отладку" (CTRL+SHIFT+D) и просмотреть >> консоль отладки (CTRL+SHIFT+Y) в строке меню. Если выбрать значок шестеренки в окне "Отладка", будет создан файл конфигурации запуска (launch.json), в котором будут сохранены сведения о конфигурации отладки. Дополнительные сведения см. в разделе «Отладка в VS Code».

Дополнительные сведения о Gatsby можно найти в документации Gatsby.js.