Laravel Breeze with Inertia, React, Eslint, Prettier, Pint and Husky

Now that is quite a title there.

In this tutorial, we will show you how to use our opinionated setup when working on Monolithic applications using Laravel Breeze, Inertia and React to make sure you have a consistent codebase.

A consistent codebase is important because it helps developers work more efficiently and effectively. When code is consistent, it is easier to read and understand. This makes it easier to find and fix errors. Consistent code also makes it easier to review PR-s.

The problem

When working with Inertia projects that are focused mostly on the frontend running on React or Vue, you will often need consistent styling.

When you decouple the frontend you have a plethora of guides on how to correctly set up your project with Eslint, Prettier and Husky but the resources fall short when you need to do the same in a monolith application as the example mentioned here.

Prerequisites

In order to follow this tutorial, we expect that you have a clean Laravel installation without anything else installed.

First, we start by installing Laravel Breeze:

composer require laravel/breeze --dev

Then we have to install the starter kit. For this example, we will go with React.

php artisan breeze:install react

# Now migrate and install
php artisan migrate
npm install && npm run dev

Laravel Ide helper

This amazing package is something we include in every project along with Debugbar. Based on the description of the package this is what it does:

This package generates helper files that enable your IDE to provide accurate autocompletion. Generation is done based on the files in your project, so they are always up-to-date.

composer require --dev barryvdh/laravel-ide-helper

In the scripts section of your composer.json file, you need to add the following:

{
  "post-update-cmd": [
    "@php artisan vendor:publish --tag=laravel-assets --ansi --force",
    "@php artisan ide-helper:models -N",
    "@php artisan ide-helper:generate",
    "@php artisan ide-helper:eloquent",
    "@php artisan ide-helper:meta"
    ],
}

Pest

Laravel Pest is a testing library for Laravel that makes it easy to write and run tests. It is based on the popular PHPUnit testing library and provides a number of useful features specific to Laravel.

For installation follow their excellent documentation.

Frontend Setup

In order to have everything formatted nicely, we will need to install a bunch of npm packages that will make sure we have a consistent codebase.

npm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks husky lint-staged prettier pretty-quick

The command above will install the following packages:

• Eslint ( along with prettier, react, react hooks plugin )
• Prettier ( used to format our JSX files)
• Pretty Quick ( Runs prettier on git changed files )
• Lint Staged ( Runs linters on staged files )
• Husky ( Ability to have git hooks, run commands on each commit )

Now let's go into detail for each setup.

Eslint

A proper Eslint installation needs a new file in the root dir called .eslintrc.js with the following config.

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 2020, // Use the latest ecmascript standard
    sourceType: 'module', // Allows using import/export statements
    ecmaFeatures: {
      jsx: true, // Enable JSX since we're using React
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  env: {
    browser: true,
    amd: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'react/jsx-first-prop-new-line': [2, 'multiline'],
    'react/jsx-max-props-per-line': [2, { maximum: 1, when: 'multiline' }],
    'react/jsx-indent-props': [2, 2],
    'react/jsx-closing-bracket-location': [2, 'tag-aligned'],
    'prettier/prettier': [
      'error',
      {},
      {
        usePrettierrc: true,
      },
    ],
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'no-console': 2,
  },
};

This is our opinionated Eslint config and we won't cover all the details. Feel free to modify how you see fit based on your project structure.

If you are using VSCode you might want to include the following script in your Settings.json. Every time you hit save, the code is formatted automatically and the editor won't scream at you.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier

In order for Prettier to play nice in our project, we have to create a new file in our root dir called .prettierrc

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}

The same goes for the Prettier config, it's opinionated to suit our requirements but feel free to change it if you want a different config.

Pretty Quick

No setup is needed here we run the command from the npm scripts that we will cover later on.

Lint Staged

We need to add the following key at the end of our package.json file to get lint-staged working.

{
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
}

The above will run eslint on our staged files before pushing to our origin repo.

Husky

Now comes the exciting part. While we did a pretty good job at covering all the frontend configs, everyone has their own desires and thoughts. It's normal for developers to ignore the formatting mentioned above for a plethora of reasons. Some of them include bad editor config, ignoring rules, etc. Here comes Husky at the rescue.

We use Husky to add git hooks. Whenever there is a new commit, we make sure to run all the commands and format the code, or even find issues in the code. Without fixing those issues the code can't be committed and that's how we make sure the codebase is consistent.

We edit our package.json file and add the following commands to our scripts section.

{
  "scripts": {
    "prepare": "husky install",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint --fix .",
    "format": "prettier 'resources/{js,jsx}/**/*.{js,jsx}' --write",
    "pre-commit": "npm run format && lint-staged && pretty-quick --staged"
  },
}

Now we can run npm run prepare to make sure husky will install correctly.

P.S make sure you have a git repo or it will fail.

We need to add our pre-commit hook. You can either create it by running a command or manually.

The file pre-commit (without extension) needs to be created under the .husky folder.

Add the following command inside the pre-commit file.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run pre-commit

This will add a git hook that will call our pre-commit script in our package.json file.

If you followed everything correctly, simply commit all changes to your repo. You should see the following in your terminal.

P.S. gc "fixed testing" is a shorthand for git add . && git commit "fixed testing"

CI/CD Setup

We can't enforce the rules on everyone or you might skip the Husky setup for certain reasons. In that case, we can utilize GitHub Workflows to make sure the commands run on each Pull Request.

Here is our GitHub Action that formats the code on Pull Requests:

name: Code Fixes

on:
  pull_request:
    branches: [main]

jobs:
  php-code-styling:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          ref: ${{ github.head_ref }}

      - name: Fix PHP code style issues
        uses: aglipanci/laravel-pint-action@1.0.0

      - name: Cache node modules
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        name: List the state of node modules
        continue-on-error: true
        run: npm list

      - name: Install dependencies
        run: npm ci
      - name: Format code
        run: npm run format

      - name: Commit changes
        uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: Fix styling

The script above will run Laravel Pint to format your PHP code and then it will run our format script to make sure all the frontend components are nicely styled. If there is an error the Action will fail and the pull request will not complete.

Do you have a Laravel project in mind? Learn more about our expertise in Laravel development.

Finishing up

Thanks for following this very long and detailed tutorial. If you feel ready to jump straight to the code, we prepared a demo repo running here. Enjoy!