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

LinkedIn

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

Bulletproof your React Project with sensible configs and practices

By keyur paralkar

Made with Slides.com

Bulletproof your React Project with sensible configs and practices

  • 80

More from keyur paralkar

  • Copy of Bulletproof your React Project with sensible configs and practices
    keyur paralkar
    62