Now that is quite a title there.

Embarking on the journey of creating monolithic applications can be a complex task, but with the right tools and practices, you can ensure a smooth and efficient workflow. In this tutorial, we're going to share our curated approach, extracted from our experience with Laravel Breeze, Inertia, and React, to help you maintain a consistent codebase throughout your project's lifecycle.

Why a Consistent Codebase Matters

A consistent codebase is the cornerstone of a productive development environment. It streamlines the readability and maintainability of your code, allowing developers to navigate the project with ease. This clarity is crucial when it comes to identifying and resolving bugs, as well as simplifying the process of reviewing pull requests (PRs). In short, consistency in your code can significantly reduce development time and improve collaboration within your team.

Addressing the Challenge

One of the hurdles you might encounter, especially when prioritizing frontend development with Inertia and frameworks like React or Vue, is achieving uniformity in styling and coding standards. While there are abundant resources for setting up standalone frontend projects with tools like ESLint, Prettier, and Husky, guidance often falls short for integrating these tools within a monolithic architecture.

Prerequisites for the Tutorial

Before diving into the tutorial, it's essential to have a fresh Laravel installation at your disposal. We'll be working from a clean slate, so no prior installations or configurations should be present. This ensures that you can follow along without any discrepancies and get the most out of the tutorial as we set up a monolithic application that is as efficient as it is elegant.

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.

Implementing Husky for Better Code Consistency

With the frontend configurations well in hand, we reach the thrilling part of our setup process. Despite our best efforts to establish clear coding standards, individual developer preferences and habits can lead to deviations. Common reasons for such inconsistencies include misconfigured editor settings or simply overlooking established rules. This is where Husky steps in as a game-changer.

Husky enhances our workflow by implementing Git hooks, acting as a vigilant gatekeeper for our codebase. With each new commit attempt, Husky triggers predefined commands to format the code and detect any issues. If these checks reveal problems, the commit is blocked until the issues are resolved. This ensures that nothing short of clean, compliant code makes it into our repository, safeguarding the uniformity and quality of our codebase.

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/[email protected]

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

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!

Bring Your Ideas to Life 🚀

If you need help with a Laravel project let's get in touch.

Lucky Media is proud to be recognized as a Top Laravel Development Agency

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