CI/CD Pipeline in React.js Project with Github Workflows using Eslint Prettier Pre-commit and Husky 

Discover the streamlined process of setting up a Continuous Integration/Continuous Deployment (CI/CD) pipeline for a React.js project using GitHub workflows. This instructional video will guide you through integrating essential code quality tools like ESLint and Prettier to enforce coding standards, and utilizing pre-commit hooks with Husky to automate checks before commits. Learn how to configure GitHub Actions for seamless automation that takes your code from repository to production with GitHub Pages deployment. Perfect for developers who aim to improve their workflow efficiency and ensure code integrity in their React.js projects.
00:05 Overview of Project
02:00 Create a new react project
04:50 Push code to GitHub repository
07:10 Install required packages like eslint prettier husky pre-commit etc.
08:15 Configure .eslintrc.cjs file
09:30 Configure prettier
10:40 Add scripts for linter and format
12:30 Configure pre-commit hook using husky
13:45 Configure husky and lint-staged packages
16:25 Testing pre-commit configurations
18:20 Configure commit lint for commit message format
20:20 Add commit lint rules
23:50 Testing commit lint configurations
25:45 Configure GitHub workflows for CI (continuous integration)
33:30 Testing CI (continuous integration)
35:50 Configure GitHub workflows for CD (continuous deployment)
42:50 Testing CD (continuous deployment )
44:10 Fix permission error
45:07 Setup Github Pages for GitHub workflow
49:00 More on CD (continuous deployment)
51:40 Github Market place
#cicd #githubactions #react #continuousintegration #continuousdeployment #continuousdelivery
Follow Whatsapp Channel:
whatsapp.com/channel/0029Va7y...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Docker Tutorial & CI/CD:
• Docker Tutorials & CI/CD
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Beginners:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368
Repo Link:
github.com/umairjameel321/rea...