Створення та запуск проєкту Nuxt.js у ServBay

Що таке Nuxt.js?

Nuxt.js — це відкритий фреймворк, створений на основі популярного Vue.js, розроблений для створення сучасних високопродуктивних веб-додатків. Nuxt.js абстрагує багато складних налаштувань, дозволяючи розробникам зосередитися на бізнес-логіці. Він особливо добре підходить для створення додатків із серверним рендерингом (SSR), але також надає потужні можливості для генерації статичних сайтів (SSG), що робить його ідеальним вибором для створення контентних, SEO-орієнтованих сайтів та веб-застосунків.

Ключові можливості та переваги Nuxt.js

• Серверний рендеринг (SSR): Попереднє рендерування сторінок Vue на сервері для прискорення завантаження першого екрану, покращення користувацького досвіду та поліпшення SEO завдяки кращому індексуванню контенту.
• Генерація статичних сайтів (SSG): Під час збірки створюються повністю статичні HTML-файли. Це забезпечує високу продуктивність, простоту деплою та відсутність потреби у серверних обрахунках — ідеально для сайтів із рідкими змінами, наприклад, блогів чи документації.
• Автоматичний поділ коду: Nuxt.js автоматично ділить JavaScript-код по маршрутах, завантажуючи лише потрібний код для поточної сторінки — це помітно прискорює роботу застосунку.
• Маршрутизація на основі файлової системи: Створюйте .vue файли у папці pages — маршрути створюються автоматично, що значно спрощує керування сторінками застосунку.
• Модульність: Розвинена екосистема модулів дозволяє легко інтегрувати різноманітні функціональні можливості та сторонні сервіси (наприклад, Axios, підтримка PWA, системи керування контентом тощо).
• Конвенція понад конфігурацію: Строге дотримання структури папок і іменування мінімізує потребу у складній конфігурації.
• Покращений досвід розробки: Фреймворк пропонує гаряче перезавантаження модулів (HMR), детальне повідомлення про помилки та інші функції, що роблять розробку ефективнішою.

Завдяки цим особливостям, Nuxt.js значно спрощує розробку складних, продуктивних і оптимізованих для SEO веб-додатків.

Налаштування та запуск проєкту Nuxt.js у ServBay

У цьому посібнику показано, як використовувати потужне локальне середовище розробки ServBay, зокрема його Node.js-пакет та інструменти керування сайтами, для створення, налаштування та запуску проекту Nuxt.js. Ви дізнаєтеся, як налаштовувати розробницький режим (з реверс-проксі) і production-режим (через статичне обслуговування файлів) у ServBay.

Необхідні умови

Перед початком переконайтеся, що:

1. Ви встановили додаток ServBay.
2. У ServBay встановлено і активовано Node.js пакет. Це можна перевірити й встановити на вкладці "Пакети" у панелі керування ServBay.
3. Ви маєте базові знання з Node.js, npm (або Yarn/pnpm) та володієте основними командами термінала.
4. (Рекомендовано) Встановлено редактор коду, наприклад, VS Code.

Створення проєкту Nuxt.js

Ми використаємо CLI-інструмент create-nuxt-app для швидкої ініціалізації проєкту на Nuxt.js.

1. Відкрийте термінал і перейдіть до кореневої папки сайтів ServBay

   За замовчуванням, коренева папка для сайтів ServBay знаходиться тут: /Applications/ServBay/www. Це рекомендоване місце для ваших локальних проєктів. Відкрийте термінал і виконайте команду:

   cd /Applications/ServBay/www

2. Ініціалізуйте новий Nuxt.js-проєкт

   Виконайте команду npx create-nuxt-app для створення нового проєкту з назвою servbay-nuxt-app. npx входить до складу npm, починаючи з версії 5.2+, і дозволяє запускати пакети без глобальної інсталяції.

   npx create-nuxt-app servbay-nuxt-app

   Далі оберіть потрібні налаштування, орієнтуючись на підказки у терміналі. Нижче приклад можливих відповідей:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Оберіть ваш менеджер пакетів (рекомендовано Npm або Yarn)
   ? UI framework: None           # За потреби можна додати UI фреймворк
   ? Nuxt.js modules: Axios       # Оберіть потрібні модулі Nuxt.js
   ? Linting tools: ESLint        # За бажанням підключіть лінтери
   ? Testing framework: None      # Тестування — за потреби
   ? Rendering mode: Universal (SSR / SSG) # Universal підтримує SSR і SSG
   ? Deployment target: Server (Node.js hosting) # Для локальної розробки оберіть цей пункт
   ? Development tools: jsconfig.json (Recommended for VS Code) # Рекомендується для VS Code

3. Встановлення залежностей проєкту

   Перейдіть у створену директорію та встановіть залежності за допомогою обраного пакетного менеджера:

   cd servbay-nuxt-app
   npm install
   # або Yarn: yarn install
   # або pnpm: pnpm install

   Дочекайтеся завершення встановлення залежностей.

Зміна контенту стартової сторінки

Для швидкої перевірки ми змінимо стартовий файл, щоб відображати простий текст.

1. Відкрийте файл pages/index.vue

   У редакторі відкрийте файл pages/index.vue вашого проєкту.

2. Змініть вміст файлу

   Замініть його вміст на такий, щоб на сторінці з'явилось "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Додаємо атрибут scoped до тега style, щоб обмежити дію стилів лише цим компонентом, а також трохи вдосконалити зовнішній вигляд.

Запуск Nuxt.js у режимі розробки з ServBay

Nuxt.js зазвичай стартує dev-сервер на певному локальному порту. Щоб мати змогу використовувати домен ServBay з SSL-сертифікатом і стандартними портами 80/443, налаштуємо реверс-проксі через ServBay.

1. Запустіть сервер розробки Nuxt.js

   У корені проєкту запустіть сервер на порту 8585 (або будь-якому іншому вільному):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # або Yarn: yarn dev --port 8585
   # або pnpm: pnpm run dev --port 8585

   Після запуску сервер буде доступний за адресою http://localhost:8585. Не закривайте цей термінал — сервер має працювати постійно.

2. Налаштуйте сайт у ServBay (реверс-проксі)

   Відкрийте панель керування ServBay, зайдіть у вкладку "Сайти" і натисніть кнопку + для додавання нового сайту:

   • Назва (Name): наприклад, Nuxt.js Dev Site (Proxy)
   • Домен (Domain): оберіть бажане ім'я, наприклад nuxt-dev.servbay.demo (завершення .servbay.demo — це найкраща практика для бренду ServBay)
   • Тип сайту (Website Type): оберіть Реверс-проксі (Reverse Proxy)
   • IP-адреса (IP Address): вкажіть 127.0.0.1 (localhost)
   • Порт (Port): вкажіть порт, на якому працює Nuxt.js (8585)

   Збережіть налаштування. ServBay автоматично застосує нову конфігурацію.

   Детальніше про додавання Node.js-розробницьких сайтів у ServBay дивіться тут: Додавання Node.js розробницького сайту.

3. Відвідайте сайт у режимі розробки

   Відкрийте браузер та перейдіть за доменом, який ви вказали, наприклад: https://nuxt-dev.servbay.demo.

   Завдяки реверс-проксі ви тепер можете працювати із Nuxt.js dev-сервером через кастомний домен ServBay і порт HTTPS. ServBay автоматично створить SSL-сертифікат (підписаний внутрішнім ServBay User CA — переконайтеся, що ваш macOS довіряє цьому CA). Це дає можливість розвитку і тестування у захищеному середовищі, що особливо корисно для імітації production-умов, роботи з Service Worker тощо.

Збірка та запуск production-версії

Коли розробка завершена і потрібно задеплоїти (або переглянути production-версію локально), варто створити статичну збірку. Якщо ви обрали режим Universal і хочете отримати статичний сайт, використовуйте команду nuxt generate (або скрипт npm run export).

1. Збірка production-версії та генерація статичних файлів

   Виконайте наступні команди у корені проєкту. npm run build компілює код, а npm run export генерує статичні HTML-файли (зберігаються у папці dist):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # або Yarn: yarn build && yarn export
   # або pnpm: pnpm build && pnpm run export

   Після завершення збірки у проєктах з’явиться папка dist, де розміщені всі статичні файли.

2. Налаштуйте сайт у ServBay (статична роздача)

   Відкрийте панель ServBay, увійдіть у "Сайти", натисніть + для нового сайту:

   • Назва (Name): наприклад, Nuxt.js Prod Site (Static)
   • Домен (Domain): оберіть домен, наприклад nuxt-prod.servbay.demo
   • Тип сайту (Website Type): виберіть Статичний (Static)
   • Коренева папка сайту (Website Root): вкажіть шлях до статичних файлів Nuxt.js, тобто /Applications/ServBay/www/servbay-nuxt-app/dist

   Збережіть налаштування. ServBay застосує їх автоматично.

3. Відвідайте сайт у production-режимі

   Відкрийте браузер та перейдіть за production-доменом, наприклад: https://nuxt-prod.servbay.demo.

   Високопродуктивний веб-сервер ServBay (Caddy або nginx — залежно від конфігурації) буде напряму обслуговувати файли з каталогу dist. Це оптимальний спосіб видачі статичного контенту з максимальною швидкістю. Ви також автоматично отримаєте SSL-сертифікат і підтримку кастомних доменів через ServBay.

Підсумок

З ServBay ви легко налаштуєте локальне середовище для розробки й тестування Nuxt.js-проєктів. Запускайте development-сервер Nuxt.js через Node.js-пакет та налаштовуйте домени із реверс-проксі через інтерфейс ServBay, щоб працювати на HTTPS з кастомним доменом. Після завершення розробки — збирайте статичну версію, розміщуйте її через статичний сайт ServBay — і швидко переглядайте production-результат локально.

Такий робочий процес повністю розкриває потенціал ServBay і дозволяє швидко, зручно та безпечно розробляти front-end-проєкти локально. Сподіваємося, ця інструкція допоможе ефективно скористатися можливостями ServBay для Nuxt.js-розробки!