Published:September 12, 2022
Updated: April 5, 2023
Views: 3,796
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.
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.
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
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"
],
}
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.
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:
JSX
files)Now let's go into detail for each setup.
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"
}
}
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.
No setup is needed here we run the command from the npm scripts that we will cover later on.
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.
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"
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.
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!
Stay up to date
Be updated with all news, products and tips we share!