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/c...
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/uma...

[@adeolaabdulramon9251]

Thanks for these docker videos. Please do video on how to deploy a NextJs docker on AWS free cloud services either s3 or EC2.
Thank you.

[@atmanirbharofficialindiaon2789]

Dude i found my dream channel, can u plss deploy next js / react app on kubernetes using docker or on aws s3

[@ProgrammingwithUmair321]

Stay updated, new videos on ci/cd and docker coming up.

[@lanngo1718]

What’s the fuck with your voice 😂?

[@sulaimanshabbir]

subscribed, can you create videos on social Auth and how our db modified with social Auth without nextauth.....

[@krishnaagarwal7934]

a video on how to integrate a api of uploading a file , backend and frontend both