Reading time: 4 min read
Enable Linting on Every Git Commit in Your Headless Sitecore XM Cloud Project With a Single Site
Learn how to create a pre-commit hooks in your project to help seemlessly run linting to prevent failed deployments.
Learn how to create a pre-commit hooks in your project to help seemlessly run linting to prevent failed deployments.
Start typing to search...
In the development world, it's common for anyone to make mistakes and occasionally overlook coding standards. These lapses can occur at any stage of the development cycle, potentially leading to issues such as:
Here’s an easy way to ensure that everything pushed to your repository is always lint-free by linting at every commit. This approach automates the process, reducing the risk of forgetting to run linting manually and making your development workflow seamless. This is where Husky and Git hooks come in. Husky simplifies the setup of Git hooks, which allow you to introduce commands at specific stages of your Git workflow, ensuring consistency and quality throughout your development process.
In this section, we will explore one approach to integrating this setup into your project. Below are the objectives and limitations of the configuration we will implement:
The first challenge we will be facing is having the hook be located inside your frontend folder. When we set up Husky it creates a folder and that folder’s path is where the Git Hook is located. Since this is not in the root folder we will need to configure Git.
Run this command on your repository’s root folder to configure the git hook path:
git config core.hooksPath headapps/nextjs-starter/.husky
For updated XM Cloud projects, your child frontend folder may be located at headapps/nextjs-starter and older versions may have it at src/nextjs-starter. You can easily check if the path is correct by running the command.
git config --get core.hooksPath
First, navigate to your frontend folder and install Husky:
npm install --save-dev husky
Next, initialize the necessary files that Husky will create by running the following command:
npx husky init
Before testing a commit, we need to make a small adjustment that deviates from the default setup in Husky's "Get Started" documentation. Open your package.json file and locate the prepare script. It should look like this:
"prepare": "husky"
Since we need to run the hook from the root folder and the path to the pre-commit file differs, we’ll need to adjust this. Modify the prepare script to:
"prepare": "cd ../.. && husky src/nextjs-starter/.husky"
Next, run the following command.
npm run prepare
This will add a few more files to your .husky folder, indicating that the configuration was successful:
.husky/
├── _ // Some additional files for git hooks
└── pre-commit
We forgot the main point to this guide, the actual pre-commit command we need to run! Navigate to your .husky folder and open the pre-commit file. You can then configure what command you want to run. Here’s a simple command you could start off with. It will run the linter of your project which you should be already doing.
npm run lint
Depending on how you’re running your git commit you will then get an error and it will tell you that the lint failed. Here’s a sample error message you might get if your lint fails.
C:\Users\John\Projects\nextjs-starterkit\src\tsask\src\Layout.tsx
93:1 error Delete `␍⏎··␍⏎` prettier/prettier
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
husky - pre-commit script failed (code 1)
With this setup, you may have added a few extra seconds to each commit, but it ensures your code meets the required standards and reduces the chances of deployments failing due to linting errors. Stay tuned for an upcoming guide on how to configure this for projects with multiple sites.