Скачать или смотреть 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:
https://whatsapp.com/channel/0029Va7y...

React tutorials:
   • React.js Tutorials  

JavaScript Tutorials and Projects:
   • JavaScript Tutorial and Projects  

Docker Tutorial & CI/CD:
   • Docker Tutorials & CI/CD  

Angular Tutorials:
   • Angular 16 Life Cycle Hooks - Explained wi...  

Angular 16 Crash Course For Beginners:
   • Angular 16 Crash Course  

Tech Tutorials - Random:
   • Postman Tutorial - Testing APIs and Build ...  

Complete Next.js 13 Tutorials:    • Next.js 13 Tutorials - App Directory  

Next.js 14 Tutorials:
   • Next.js 14 Tutorials - App Directory  

Node Express MongoDB Bootcamp:    • Build REST API with Node Express MongoDB  

ChatGPT Tutorials:    • LLM, AI, Agents  

Join our facebook group:
  / 996305460498149  

Contact us for development services:
  / umair-jameel-24aa5368  

Repo Link:
https://github.com/umairjameel321/rea...