Швидкий старт Frontend розробки на Laravel

Сучасна веб-розробка вже давно вийшла на новий рівень. Інструменти, які використовуються для верстки проектів заощаджують час та наповнюють робочий процес приємними опціями, щоб розробник не відволікався на зайві процеси та повністю поринув в творчий процес.

Але для початківця ці інструменти просто не зрозумілі та можуть викликати більше питань ніж принести явної користі. Тому молоді веб-розробники часто їх ігнорують, а даремно.

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

Якщо ти лише починаєш свій шлях веб-розробника то багато чого може тобі видатись не зрозумілим - нічого страшного, повтори все описане тут від а до я та отримаєш прогресивне середовище розробки вже сьогодні. А знання поступово прийдуть з часом.

Операційна система та апаратне забезпечення

Апаратне забезпечення

Насправді верстку веб-проектів можна виконувати в будь-якому середовищі, хоч "на колінках" в смартфоні, але найкращої продуктивності ви досягнете лише зручно облаштувавши робоче місце.

Для комфортної розробки вам знадобиться:

• ПК або ноутбук підключений до мережі Інтернет
• пристрої вводу (клавіатура + мишка)
• додатковий монітор (опціонально)

Як бачите, апаратне забезпечення доволі класичне, за виключенням другого монітора (хоча він не обов'язковий, але піднімає користувацький досвід на новий рівень, але про це пізніше).

Вибір операційної системи

В якості операційної системи ми рекомендуємо використовувати ОС із сімейства Unix, або актуальну версію Mac OS. Для власників ОС Windows також є рішення, але воно доволі компромісне, з подробицями можете ознайомитись в цьому відео.

Для написання цієї інструкції ми використовуємо дистрибутив Ubuntu через його універсальність та доволі широке поширення, але команди в більшості випадків підійдуть і для інших Unix подібних систем, просто враховуйте їх специфіку і все буде гаразд.

Установка фреймворку Laravel

Laravel - це прогресивний PHP фреймворк, який активно розвивається. Якщо ви шукаєте універсальний інструмент для розробки веб-додатків то Laravel якнайкраще для цього підійде. Його можна використовувати як для генерації простих лендінгів так і для високонавантажених проектів та розробки бекенду.

Існує кілька варіантів установки Laravel, один із них описаний в цьому відео. Для роботи фреймворка Laravel у вашій системі повинні бути встановлені наступні компоненти:

• Composer
• PHP версії 7.4 або вище (краще 8.1)
• MySQL або інша СУБД (якщо ви плануєте працювати з базами даних)
• Nginx або Apache (якщо будете налаштовувати Laravel для роботи з локальним сервером)

Отже для верстки нам обов'язкова присутність в системі Composer-а та PHP, оскільки бази даних. як правило, для верстки не використовуються. Також Laravel поставляється із власним сервером розробки, якого для наших потреб буде достатньо.

PHP

PHP - це мова програмування, яка використовується фреймворком Laravel. Грубо кажучи Laravel написаний на PHP і без нього скрипти фреймворку просто не зможуть виконуватися.

Перевіримо чи установлений він в нашій системі, для цього відкриємо термінал та введемо наступну команду:

php -v

Якщо консоль відобразила версію PHP і вона не нижче 7.4 - можете продовжувати. Якщо ж ви отримали помилку, що означає відсутність PHP в системі - її потрібно встановити.

Почергово виконайте наступні команди, зазвичай цього достатньо для установки PHP та необхідних для Laravel модулів

sudo apt update
sudo apt install php
sudo apt install php-mbstring php-xml php-bcmath

Тепер знову спробуйте перевірити версію PHP і якщо все гаразд - переходьте до наступного кроку

php -v

Composer

Composer - це менеджер PHP пакетів, він керує PHP залежностями проектів, також він нам знадобиться для установки Laravel.

Перевіримо чи встановлений в системі Composer:

composer

Якщо ви побачили ось таке повідомлення то можете рухатись дальше, в інакшому випадку вам потрібно його встановити. Варіантів установки декілька і офіційна документація допоможе вибрати оптимальний.

Laravel

Після того, як ми встановили залежності ми можемо перейти до установки самого фреймворка Laravel.

Установимо його за допомогою Composer, для початку створимо нову директорію в якій ми будемо зберігати усі проекти Laravel і перейдемо в неї (в прикладі ми використовуємо назву директорії "Laravel" та ви можете назвати її як вам заманеться)

mkdir ~/Laravel
cd ~/Laravel

Тепер проведемо установку Laravel (в прикладі "my-project" - це назва проекту Laravel, для нього буде створена однойменна директорія)

composer create-project laravel/laravel my-project
cd my-project
php artisan serve

Після виконання останньої команди буде запущений веб-сервер і ваш проект буде доступний за посиланням http://127.0.0.1:8000 якщо ви перейдете за ним то побачите початкову сторінку нового проекту Laravel. Це означає що установка пройшла успішно.

Для зупинки сервера, як ы будь-якого процесу в терміналі, натисніть комбінацію клавіш Ctrl + C

Налаштування середовища розробки

Для комфортної роботи із версткою потрібно налаштувати наш новий проект. Для початку установимо NPM залежності, які поставляються із фреймворком Laravel

npm i

Tailwind CSS

Для прикладу ми встановимо CSS фреймворк Tailwind CSS - це фреймворк, який відповідає за візуальні класи веб сторінок. Це далеко не єдиний CSS фреймворк, їх існує доволі багато і Laravel може працювати із будь-яким. Якщо вам необхідно використовувати інший CSS фреймворк - просто скористайтесь його документацією для підключення до проекту Laravel.

Для установки виконаємо наступні команди

npm install -D tailwindcss postcss postcss-import autoprefixer
npx tailwindcss init

Після цього потрібно налаштувати Tailwind CSS. Відкриємо щойно створений проект в будь-якому зручному редакторі та відредагуємо файл tailwind.config.js, який розташований в корені проекту. Приведемо його до наступного вигляду:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Також відкриємо файл /resources/css/app.css та вставимо в нього наступні рядки:

@tailwind base;
@tailwind components;
@tailwind utilities;

Browser Sync

Використання BrowserSync допоможе не відволікатись на перезавантаження сторінки кожен раз при внесенні змін в файли проекту. Це особливо корисно при верстці - кожен раз коли ви редагуєте проект браузер сам чарівним чином відображає зміни. Якщо додати до цього зовнішній монітор - продуктивність буде ще вищою. Окрім того BrowserSync може перезавантажувати не лише браузер вашого ПК, а й будь-якого пристрою в локальній мережі, який відкриє сторінку проекту за посиланням, що буде згенероване підчас старту сервера. Хіба не чудово! Давайте встановлювати!

npm install -D browser-sync browser-sync-webpack-plugin

Webpack

І завершальним штрихом буде налаштування Webpack-а - це інструмент, який буде допомагати нам в розробці фронтенду нашого додатку, а значить і у верстці сторінок. Він займається упаковкою та мініфікацією CSS та JS файлів, а також керує іншими корисними додатками, наприклад тим же BrowserSync.

Його нам встановлювати не потрібно, оскільки Laravel вже поставляється з даним пакетом, нам потрібно лише його налаштувати. Для цього відкриємо файл webpack.mix.js, який знаходиться в корені проекту, та приведемо основну його секцію до наступного вигляду:

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
        require('postcss-import'),
        require('autoprefixer'),
    ]);

mix.browserSync('127.0.0.1:8000');

Ми додали до налаштувань встановлені обробники процесів, а також процес BrowserSync, який відтепер буде моніторити зміни в проекті. використовуючи в якості проксі IP нашого локального серверу розробки - 127.0.0.1:8000 (для цього він повинен бути запущеним). Якщо ви налаштували власний локальний сервер і назначили для проекту віртуальний домен, то в якості проксі потрібно вказувати його. 

Останні приготування

Відтепер проект налаштований, але запустивши сервер ми не побачимо ніяких змін. Нам потрібно відредагувати головний файл шаблонів blade, який зараз містить код вітальної сторінки Laravel. В якості зразка ми використаємо фрагмент із документації Tailwind CSS. Вікриємо файл /resources/views/welcome.blade.php та замінимо його вміст на наступний код:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/app.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline text-transparent bg-clip-text bg-gradient-to-b from-cyan-500 to-pink-500">
    I'm the king of web markup!
</h1>
</body>
</html>

Зверніть увагу, що в шостому рядку ми підключаємо файл стилів, який вже опрацьований Webpack-ом, без нього класи Tailwind працювати не будуть.

Запуск середовища розробки

Тепер ми готові виконати перший запуск середовища розробки, для цього нам потрібно дві вкладки термінала із розташуванням в кореневій директорії проета.

В першій ми виконуємо запуск сервера розробки Laravel

php artisan serve

Відкриваємо другу вкладку і запускаємо процес Webpack-а, командою:

npm run watch-poll

В результаті відкриється вкладка браузера з таким вмістом:

Тепер спробуйте внести, якісь зміни в файл /resources/views/welcome.blade.php і побачите, як після збереження файлу вкладка браузера самостійно перезавантажиться.

На завершення

Зрозуміло, що для повноцінної верстки потрібно знати CSS та HTML, також не зайвим буде вивчити основи шаблонізатора Blade, який Laravel використовує для генерації HTML сторінок. 

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