Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Astro Husky Git Hooks: CI Tooling # Astro Husky Git Hooks: CI Tooling #

blurry low resolution placeholder image Astro JS Favicon
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Astro Astro Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Astro Husky Git Hooks: CI Tooling #

Updated 2 years ago
3 minute read
Gunning Fog Index: 5.1
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🪝 Astro Husky Git Hooks #

In this Astro Husky Git hooks video, we start by seeing what the Husky tooling is all about. With that out of the way, we take an existing git repo and add three hooks. Hooks are just code snippets which we want to run automatically just before a git operation. As an example, we see a pre-push hook. In that one, we run the astro check command (automatically) every time we push code to our remote repo. This might catch a simple JavaScript error, stop the commit and give you a chance to update. So the hooks help keep your remote repos clean. In fact, they are fantastic if you are working in a team.

Anyway, you came here to see the short video, so hit play below! You can drop a comment below or reach out for a chat on Element  as well as Twitter @mention  if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Astro Husky Git Hooks: CI Tooling

🗳 Poll #

Do you run Astro check on your Astro projects?
Voting reveals latest results.

🖥 Astro Husky Git Hooks: Code #

package.json
json
    
1 {
2 "name": "astro-vanilla-extract",
3 "type": "module",
4 "version": "0.0.1",
5 "private": true,
6 "license": "BSD-3-Clause",
7 "description": "Astro vanilla-extract: how to set up vanilla-extract in your Astro project for zero runtime overhead styling, theming, contracts and more.",
8 "scripts": {
9 "dev": "astro dev",
10 "start": "astro dev",
11 "build": "astro telemetry disable && astro build && subfont -ir --root dist",
12 "preview": "astro preview",
13 "astro": "astro",
14 "check": "astro check",
15 "lint:css": "stylelint "src/**/*.{css,svelte}"",
16 "format": "prettier --plugin=prettier-plugin-astro --write .",
17 "prettier:check": "prettier --check --plugin=prettier-plugin-astro ."
18 }, // TRUNCATED...
19 }
.husky/commit-msg
shell
    
1 #!/usr/bin/env sh
2 . "$(dirname -- "$0")/_/husky.sh"
3
4 pnpm commitlint --edit "$1"
.husky/pre-commit
shell
    
1 #!/usr/bin/env sh
2 . "$(dirname -- "$0")/_/husky.sh"
3
4 pnpm prettier:check
.husky/pre-push
shell
    
1 #!/usr/bin/env sh
2 . "$(dirname -- "$0")/_/husky.sh"
3
4 pnpm astro check
commitlint.config.cjs
javascript
    
1 module.exports = {
2 extends: ['@commitlint/config-conventional'],
3 };

🔗 Links #

  • Astro vanilla-extract post,
  • MDN docs on URL JavaScript Web API ,
  • Husky docs ,
  • Conventional Commits site ,
  • Commitizen repo ,
  • Element chat: #Rodney matrix chat ,
  • Twitter handle: @askRodney .

🏁 Astro Husky Git Hooks: Summary #

Can you use Husky git hook with Astro? #

Certainly! To get going, install the Husky package with `pnpm add husky` then run `pnpm husky install` to initialize it. You can add all the popular hooks like commit-msg (e.g. with commitlint for conventional commits), pre-push and pre-commit.

What does astro check do? #

Astro check, inspired by Svelte check lints your Astro files. It will point out if you stray from best practices, On top if you are using TypeScript in your project, it will spot additional errors. Running it before push code to your remote git repo is a fantastic idea as one final check to make sure your code is spotless!

How can you automatically check your Astro source code when you run git commit? #

Husky git hooks work really well with Astro. If you install Husky, you can first add a prettier formatting script to your project package.json file. For example: `"prettier:check": "prettier --check --plugin=prettier-plugin-astro ."`. Then add a Husky pre-commit script, to run just before each commit: `pnpm husky add .husky/pre-commit "pnpm prettier:check"`. In this case, if formatting is not quite right, the commit will fail, giving you a chance to fix it before finally committing a pristine version!

🙏🏽 Feedback #

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

Quick video on how to set up ✅ astro-check and other CLI tooling in your 🚀 Astro project continuous integration process using Husky.

Hope you find it useful!

#learnastro #JAMStackhttps://t.co/xQrTDdQnAl

— Rodney (@askRodney) January 30, 2023

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter, @[email protected]  on Mastodon and also the #rodney  Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SEO. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
ASTRO

Likes:

Likes

  • Webjeda 🛹 profile avatar
  • Raul Nohea Goodness profile avatar
Likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Astro Server-Side Rendering: Edge Search Site

Astro Server-Side Rendering: Edge Search Site

plus
astro
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.