Быстрый старт 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 страниц.

Но надеемся, что комфортная среда разработки, которую вы настроите по данной инструкции, будет способствовать творческому развитию и продуктивной работе.