Image

laravel

Setup dependencies

Setup usefeul dependencies like PHP CS fixer, IDE Helper...

5 min read
Last update: November 28, 2021

!> Here is a tip.

?> And a warning.

x> Or an error.

Laravel permissions

At root of Laravel's repository

sudo chgrp -R www-data storage bootstrap/cache ; sudo chmod -R ug+rwx storage bootstrap/cache

OR

sudo chown -R $USER:www-data * ; sudo chmod -R ug+rwx storage bootstrap/cache
sudo chown -R $USER:www-data * ; sudo chmod -R ug+rwx storage bootstrap/cache ; git checkout .

Helpers

PHP CS Fixer

Add this dependency to this project

composer require --dev friendsofphp/php-cs-fixer
touch .php-cs-fixer.dist.php
<?php

$rules = [
    '@PhpCsFixer' => true,
    'no_empty_comment' => false,
    'no_extra_blank_lines' => [
        'tokens' => [
            'extra',
            'throw',
            'use',
            'use_trait',
        ],
    ],
    'not_operator_with_successor_space' => true,
    'php_unit_method_casing' => false,
    'single_line_comment_style' => false,
    'php_unit_internal_class' => false,
    'php_unit_test_class_requires_covers' => false,
];

$finder = PhpCsFixer\Finder::create()
    ->in([
        __DIR__.'/app',
        __DIR__.'/config',
        __DIR__.'/database',
        __DIR__.'/resources',
        __DIR__.'/tests',
    ])
    ->name('*.php')
    ->notName('*.blade.php')
    ->ignoreDotFiles(true)
    ->ignoreVCS(true)
;

$config = new PhpCsFixer\Config();

return $config->setFinder($finder)
    ->setRules($rules)
    ->setRiskyAllowed(true)
    ->setUsingCache(true)
;

Add this to .gitignore

.gitignore
# ...
.php-cs-fixer.cache

Execute this command to fix all files

./vendor/bin/php-cs-fixer fix

Laravel IDE Helper

composer require --dev barryvdh/laravel-ide-helper
php artisan ide-helper:generate ; php artisan ide-helper:models --nowrite; php artisan ide-helper:meta ; php artisan ide-helper:eloquent

Execute with composer

Add this command to scripts into composer.json

{
  "scripts": {
    "helper": [
      "./vendor/bin/php-cs-fixer fix",
      "php artisan ide-helper:generate",
      "php artisan ide-helper:models --nowrite",
      "php artisan ide-helper:meta",
      "php artisan ide-helper:eloquent"
    ]
  }
}

And execute composer helper

Assets

When you use laravel-mix to compile assets like css and js, this will create files into public. Add these files to .gitignore cause of differences between minified files on local and production.

.gitignore
/public/css
/public/js
/public/mix-manifest.json

jsconfig.json

If you want to use Vue.js into Laravel with Visual Studio Code, you have to setup jsconfig.json

touch jsconfig.json
jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "resources/js/*"
      ],
      "@Components/*": [
        "resources/js/Components/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "public"
  ]
}

API doc

knuckleswtf/scribe

Scribe helps you generate API documentation for humans from your Laravel/Lumen/Dingo codebase. See a live example at demo.scribe.knuckles.wtf. There's a Node.js version, too!

Official documentation

composer require --dev knuckleswtf/scribe
php artisan vendor:publish --tag=scribe-config
php artisan scribe:generate

Laravel Swagger

Add l5-swagger

composer require "darkaonline/l5-swagger"

Publish config

php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider"

Add this to .env

.env
L5_SWAGGER_GENERATE_ALWAYS=true
config/l5-swagger.php
<?php

return [
  // ...
  'documentations' => [
    'default' => [
      'api' => [
        'title' => 'My beautiful API documentation', // Update title
      ],
      // ...
    ],
  ],
  'defaults' => [
    // ...
    'group_options' => [
      'api' // Add this to add api/ routes
    ],
  ],

  'paths' => [
    'docs' => public_path('docs'), // generate doc into 'public'
    // ...
  ],
];

Into main API Controller

app/Http/Controllers/Api/ApiController.php
<?php

namespace App\Http\Controllers\Api;

use App\Models\Formation;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Route;

/**
 * @OA\Info(
 *     version="1.0.0",
 *     title="API",
 *     description="My Documentation"
 * ),
 * @OA\Tag(
 *     name="global",
 *     description="Global requests"
 * ),
 */
class ApiController extends Controller
{
  // ...
}

In any controller

app/Http/Controllers/Api/AnyController.php
<?php

// ...

class AnyController extends Controller
{
  /**
    * @OA\Get(
    *     path="/products",
    *     tags={"global"},
    *     summary="List of products",
    *     description="Products",
    *     @OA\Response(
    *         response=200,
    *         description="Successful operation"
    *     )
    * )
    */
  public function index()
  {
    // ...
  }
}

Generate documentation

php artisan l5-swagger:generate

ESLint

Useful with ESLint and Vue

npm i -D eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier babel-eslint
Automatic config
./node_modules/.bin/eslint --init

OR

Manual config

Create these files at the root of repository

touch .eslintrc.js
.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    // es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  rules: {},
  parserOptions: {
    parser: 'babel-eslint',
  },
}
touch .prettierrc
.prettierrc
{
  "semi": false,
  "singleQuote": true
}
.editorconfig
# ...
[*.{vue,js}]
indent_style = space
indent_size = 2
package.json
{
  "scripts": {
    "lint": "./node_modules/.bin/eslint resources/js/ --ext .js,.vue"
  }
}

Tailwind CSS v2.0

Vanilla

yarn add -D postcss postcss-import tailwindcss @tailwindcss/forms @tailwindcss/typography
package.json
{
  "devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.0",
    "laravel-mix": "^6.0.6",
    "postcss": "^8.1.14",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^2.0.1"
  }
}
webpack.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
  .postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
  ])
  .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
  mix.version();
}
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',
  purge: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
  ],

  theme: {
    extend: {
      fontFamily: {
        sans: ['Nunito', ...defaultTheme.fontFamily.sans],
      },
    },
  },

  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};
resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
app.blade.php
<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  </head>
  <!-- ... -->
</html>

Starter kit

First install a starter kit like github.com/laravel/breeze or github.com/laravel/jetstream, this will install Tailwind.

Tailwind JIT

From dyrynda.com.au/blog/using-tailwind-jit-with-laravel-mix

yarn add -D @tailwindcss/jit tailwindcss postcss
webpack.mix.js
mix.postCss("resources/css/app.css", "public/css", [
    require("@tailwindcss/jit"),
    require("postcss-import"),
  ]);
yarn watch

Blade Formatter

From Laravel Blade formatter, install Extension from Vieusla Studio Code

In settings.json, add this

settings.json
{
  // ...
  "bladeFormatter.format.indentSize": 2,
  "bladeFormatter.format.enabled": true,
  "bladeFormatter.format.wrapAttributes": "auto",
  "bladeFormatter.format.wrapLineLength": 120,
}
Open settings.json

Execute Ctrl + Shift + P to open **Preferences: Open settings (JSON)

To find other settings with Blade formatter, check page extension.