for in

!> 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

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

GitHub github.com/FriendsOfPHP/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

GitHub github.com/barryvdh/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

GitHub github.com/DarkaOnLine/L5-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

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.

laravel

Setup dependencies

Laravel permissions

Helpers

PHP CS Fixer

Laravel IDE Helper

Execute with composer

Assets

jsconfig.json

API doc

knuckleswtf/scribe

Laravel Swagger

ESLint

Tailwind CSS v2.0

Vanilla

Starter kit

Tailwind JIT

Blade Formatter