Project
Nightmares
Unformated Code
const sum = (a,b, v) => { const res = a +b; const res2 = res+ v; return res; }
Unformated Code pushed to remote
const sum = (a,b, v) => { const res = a +b; const res2 = res+ v; return res; }
Devs using --no-verify
git commit -m "fix: core logic" --no-verify
Force Merging PRs without tests
Unnecessary Deps in useEffect
useEffect(() => { setOption(false); }, [ loader, setOptions, response ])
These nightmares comes at a
price
Affects
speed
Affects
readibility
Affects
DX
Bulletproof
React Project with
Sensible Configs & Practices
Bulletproof
React Project with
Sensible Configs & Practices
Keyur Paralkar
Front-end developer👨💻; Book enthusiasts📖; Love to Unravel and Build Complex UIs. Volunteering @jslovers_del
X
Github
ESLint + githooks + CI
ESLint + githooks + CI
=
Good Dx
What is ESLint?
ESLint
Configs
Source Code
Verified
Linted Code
Unused Variables
Prob#1
The Silent Killer
The Silent Killer
No squiggly/error lines;
The Silent Killer
No squiggly/error lines;
missed
Would easily get
no-unused-vars
to the rescue
no-unused-vars
Squiggly error lines
✅
build failures
✅
Console.logs
Prob#2
Unnecessary logs bloating the console
console.log leaking User Data!!!!
Redaction / Code Reviews / Wrapper Funcs
Redaction / Code Reviews / Wrapper Funcs
But still there is a margin of Error
to the rescue
no-console
to the rescue
no-console
Squiggly error lines
build failures
✅
✅
Duplicate & Un-sorted Imports
Prob#3
import React, { useState } from 'react'; import { Route, Switch } from 'react-router-dom'; import './App.css'; import ComponentC from './components/ComponentC'; import { useEffect } from 'react'; import ComponentA from './components/ComponentA'; import { Link } from 'react-router-dom'; import { NavLink } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import ComponentB from './components/ComponentB'; import ComponentD from './components/ComponentD';
Duplicate & Unsorted Imports
The Manual Horror
simple-import-sort
no-duplicate-imports
+
Easy Peasy!
GitHooks
What are GitHooks?
From Atlassian Blog
From Atlassian Blog
Installing GitHooks
Githook Managers
🐶
Husky
Pre-commit
... many more
Secrets getting commited
Prob #1
You Pushed It!!!
const Secret = "12345-ABCDE-67890-FGHIJ-12345"; const fetchData = async () => { try { const response = await fetch(`https://api.example.com/data?api_key=${Secret}`); if (!response.ok) { throw new Error("Network response was not ok " + response.statusText); } const data = await response.json(); console.log("Data from API:", data); } catch (error) { console.error("There was a problem with the fetch operation:", error); } }; fetchData();
GitLeaks
to the rescue
GitLeaks
to the rescue
No Unit Test checks before commit
Prob #2
Save time on CI
CI can focus on Regression
Staged Files
Hook
Fetch .js files
Run Related Tests
Staged Files
Hook
Fetch .js files
Run Related Tests
Staged Files
Hook
Fetch .js files
Run Related Tests
Staged Files
Hook
Fetch .js files
Run Related Tests
CI/Github actions
Prob: Githooks can be easily bypassed by --no-verify
CI to resuce
Adding Operations in CI related to tests, Secrets check and Prettier can make sure your builds are bullet proof
Other tools/rules such as js.recommends or react babel plugins
Inspired from CeciumJS
Thank You
Project Nightmares
Copy of Bulletproof your React Project with sensible configs and practices
By keyur paralkar
Copy of Bulletproof your React Project with sensible configs and practices
- 65
