Установка Symfony на Mac OS

Admin Mac OS, PHP Обсудить

Symfony — фреймворк для языка программирования PHP, который структурирует и упрощает написание кода.

Для установки Symfony предварительно нужно установить Composer.

Ссылка на установку Symfony на официальном сайте:
https://symfony.com/doc/current/setup.html

Есть 2 способа установки: для обычного веб приложения и для микросервисов или API. Далее будет установка директорий для типового веб сайта.

Переходим в папку из которой хотим установить, это может быть папка Sites:

cd Sites

Далее ставим каркас проекта:

composer create-project symfony/website-skeleton symfony

Для запуска проекта нужен вебсервер, например MAMP PRO.

Если всё настроено верно, то сайт откроется по адресу:

http://localhost/symfony/public/

На этом установка Symfony завершена.

Собственный сервер symfony

Устанавливаем собственный сервер для symfony. Он хорош тем, что он показывает информацию для отладки как в консоли, так и на странице браузера. И в случае ошибок, вместо пустой страницы покажет отладочную информацию.

Установка сервера:

composer require server

По умолчанию он работает на

localhost:8000

Запускаем сервер

bin/console server:run

Ошибка

Если при создании тестовой страницы (по гайду symfony) может быть следующая ошибка:

No route found for «GET /lucky/number»

1. Можно попробовать сбросить кэш

bin/console cache:clear

2. Проверить адрес. На собственном сервере, когда запущена команда bin/console server:run он будет таким:

localhost:8000/lucky/number

3. В файле routes.yaml изменить путь на

index:
    path: /

И запустить главную страницу:

localhost/symfony/public/

На стороннем сервере

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

Как установить веб-сервер на Mac OS.

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

/symfony/public/

файл .htaccess. Внутри прописываем правила реврайта:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /symfony/public/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /symfony/public/index.php [L]
</IfModule>

Теперь у нас все ссылки будут работать по адресу:

localhost/symfony/public/

Для роутинга lucky/number (из мануала по symfony) адрес будет такой:

localhost/symfony/public/lucky/number

А вообще оба сервера могут жить одновременно и не мешать друг другу. Например, если потребуется отладочная информация. Запускаем сайт по адресу стандартного сервера и если надо запускаем и сервер symfony. Внизу сайта видим отладочную информацию:

Устанавливаем автоматическую прописку роутинга

Установка

composer require annotations

Код

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class PageController
{
    /**
     * @Route("/lucky/number")
     */

    public function number()
    {
        $number = random_int(0, 100);

        return new Response(
            '<html><body>Lucky number: '.$number.'</body></html>'
        );
    }
}

А если для последующего вывода через шаблонизатор:

namespace App\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class Tables extends AbstractController {

    /**
     * @Route("/test/")
     */

    public function homepage()
    {

        return $this->render('home.html.twig', [

        ]);
    }
}

Устанавливаем Webpack

Для упрощения работы с Node.js в Symfony сразу устанавливаем yarn с помощью HomeBrew.

brew install yarn

Устанавливаем webpack

composer require symfony/webpack-encore-bundle
yarn install

Компиляция для локальной разработки

yarn encore dev

Компиляция при изменении файлов

yarn encore dev --watch

На продакшен

yarn encore production

Включаем SASS

В файле webpack.config.js расскоментируем строку

.enableSassLoader()

А в файле assets/js/app.js добавляем подключаемый файл стилей:

require('../scss/style.scss');

После запуска команд компиляции yarn encore dev могут возникнуть ошибки.

Ошибка

При запуске компиляции ошибка:

Running webpack …

Error: Install sass-loader & node-sass (or sass) to use enableSassLoader()
yarn add sass-loader@^7.0.1 node-sass —dev

error Command failed with exit code 1.

Запускаем команду из ошибки:

yarn add sass-loader@^7.0.1 node-sass --dev

Если видим ошибки вида

The engine «node» is incompatible with this module. Expected version «>=7.0.0»

Обновляем (или переустанавливаеам на новую) версию Node.js.

После этого заново запускаем команду:

yarn add sass-loader@^7.0.1 node-sass --dev

Теперь должно быть все ок.

Подключаем стили и js на страницу

Подключаем стили на странице шаблонизатора:

templates/home.html.twig

Подключение:

<!DOCTYPE html>
<html>
<head>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>
<body>

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

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

/build/app.css

а если вы используете сервер по умолчанию, то адрес нужен другой:

/symfony/public/build/app.css

И чтобы изменить путь компиляции надо изменить его в файле

webpack.config.js
Encore
    // directory where compiled assets will be stored
    .setOutputPath('/symfony/public/public/build/')

    // public path used by the web server to access the output path
    .setPublicPath('/build')

Подключение jQuery к Symfony 4

Качаем последнюю версию jQuery. Кладем ее в папку public/vendor.

Подключаем в файле шаблонизаторе так:

<script src="{{ asset('vendor/jquery-3.4.1.min.js') }}"></script>

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Установка Symfony на Mac OS"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>