Project Development with React.js and Javascript (.editorConfig, .eslintrc, .eslintignore, .prettierrc, .prettierignore, jsconfig.json, .stylelintrc, husky, lint-staged, pretty-quick)

  React.js PWA JavaScript Project Setup

https://create-react-app.dev/docs/making-a-progressive-web-app/


GitHub Repository and Project Installation

1 - Create a new repository on github.com
2 - Add project name 
3 - Add project description
4 - Set to Public or Private
5 - Skip README.md and License setup
6 - Open a parent folder in laptop where project will live then...
7 - git clone https://github.com/PROJECT-URL/NAME.git
8 - git bash in the location you want and Install React PWA with
9 - Installations
For JavaScript projects use...
npx create-react-app app-name --template cra-template-pwa
For TypeScript projects use...
npx create-react-app app-name --template cra-template-pwa-typescript
10 - Open in VS Code using code . then open the terminal and run the following...
11 - git init
12 - git add .
13 - git commit -m "Chukwuebuka: Project Setup"
14 - git branch -M main
15 - git remote add origin https://github.com/PROJECT-URL/NAME.git
16 - git push -u origin main
17 - Probably enter username and password
18 - Create README.md file
19 - Create License file
20 - Go back to VS Code terminal and type in npm start



PWA Service Worker Setup

1 - at src/index.js file switching serviceWorker.unregister() to serviceWorker.register() will opt you in to using the service worker.

2 - switch to the Service worker Network first then Cache strategy at service-worker.js

JavaScript -

self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async function () {
      try {
        return await fetch(event.request);
      } catch (err) {
        return caches.match(event.request);
      }
    })()
  );
});

(OPTIONAL) Then for further no cache setup you could use this meta tag in your public/index.html...

<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />



App Icon, Site Meta-Data, Manifest, Description, etc. Setup

1 - Create your Website/App Icons using https://icon.kitchen/ 

1A - If you can use photoshop to design a transparent background icon then use that for your favicon. Else duplicate and then change the 192x192 maskable to favicon.ico, then replace with default favicon.

Icon kitchen does not provide icon sizes for 256px and 384px so we manually resize the 512px icon provided to those sizes not provided.  

1B - Update your theme-color meta-tag.

1C - Update your description meta-tag.

1D - Update <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon/apple-touch-icon.png" />

1E - Add <meta name="mobile-web-app-capable" content="yes"> below the manifest meta-tag.

1F - Add <meta name="apple-mobile-web-app-capable" content="yes"> below manifest meta-tag.


2 - Create your Website/App Splash Screen using https://appsco.pe/developer/splash-screens/

2A - Upload your logo as your chosen image then click next.

2B - Click the download zip button and extract folder, which you will then upload to the public folder.

2C - Copy and paste the code below the download zip button ad place below the manifest meta-tag.


3 - For React Native Android / iOS Apps Splash and Icon Setup - 

3A - Use this article https://aboutreact.com/react-native-change-app-icon/


4 - Use the below setup for your robots.txt 

# https://www.robotstxt.org/robotstxt.html
User-agent: Googlebot
Crawl-delay: 300
Disallow: 

User-agent: Yandex
Allow: /index.html
Disallow: /

User-agent: bingbot
Allow: /tools
Disallow: /

User-agent: *
Disallow: /


5 - Use the below setup for your manifest.json 

{
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": ".",
  "name": "My App",
  "short_name": "My App",
  "description": "My App Description here.",
  "icons": [
      {
        "src": "/icon/icon-192-maskable.png",
        "sizes": "192x192",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/icon/icon-256-maskable.png",
        "sizes": "256x256",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/icon/icon-384-maskable.png",
        "sizes": "384x384",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/icon/icon-512-maskable.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "maskable"
      }
  ]
}




Environmental Variables File Setup

1 - Create .env file where your package.json is located
2 - Then go to .gitingnore file and add the following...

# api keys
.env

If there's a yarn.lock file

# yarn lock file
.yarn.lock



EditorConfig Setup  

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. 

For Visual Studio Code you need to also install the extension editorconfig.

Create the file on the project folder, where your package.json is located 

If you are using windows machine endOfLine can be "crlf" basing on your git config. Hers's my configuration below.

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false



JsConfig Setup 

Create jsconfig.json in the root directory of the project and paste the codes

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$libs": ["src/libs"],
      "$libs/*": ["src/libs/*"]
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
  "exclude": ["node_modules", "**/node_modules", "dist"]
}



StyleLint Setup 

1. Use npm to install stylelint and its standard configuration:


npm install --save-dev stylelint stylelint-config-standard


2. Create a .stylelintrc configuration file in the root of your project:

{
    "extends": "stylelint-config-standard",
    "rules": {
      "indentation": "tab",
      "number-leading-zero": null,
      "color-hex-case": ["lower", { "severity": "warning" }]
    }
}


Prettier Setup 

Prettier takes care of our code formatting. Run this command.

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

The command above installs the following packages...

Creating the prettier configuration file

Let's create the file .prettierrc at the root of our project and insert the following settings:

{
 "singleQuote": true,
 "endOfLine": "auto",
}

Create .prettierignore to add the ignored folder

node_modules/ 
public/
build/


ES Lint Setup 

ES Lint is primarily used for linting our code. That is, ensuring our code follows best practices regarding quality. Let's install it.

ES Lint should be installed as a dev dependency as it is not needed in production. Let's configure it.

npm install --save-dev eslint

On running this command, ES lint will ask us a few questions to determine what config packages to install.

npm --init @eslint/config  or npx eslint --init

1. How would you like to use ESlint? 

To check syntax, find problems, and enforce code style

2. What type of modules does your project use? 

JavaScript modules (import/export)

3. Which framework does your project use? 

React

4. Does your project use TypeScript? 

No

5. Where does your code run? 

Browser

6. How would you like to define a style for your project? 

Use a popular style guide

7. Which style guide do you want to follow? 

Airbnb: https://github.com/airbnb/javascript. 

You can choose any of the three. I'm more comfortable with Airbnb.

8. What format do you want your config file to be in? 

JSON

You'll be prompted to install some packages

Choose yes.

If you use yarn, choose yes and choose yarn. Then when the packages are installed, delete the package-lock.json and run yarn to reinstall the packages.

This config is necessary for the eslint-plugin-import package which is responsible for ensuring your import statements are resolved correctly. You can add more configuration using the rules object in the .eslintrc.json file.

Create a .eslintignore file and add the following

/*.js
** / *. js
node_modules
build
/src/react-app-env.d.js


You will notice a new file, .eslintrc.json has been created. It should look like this at the end...

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-console": "warn",
    "quotes": ["warn", "double"],
    "semi": ["warn", "always"],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "prettier/prettier": [
      "error",
      {
        "singleQuote": false,
        "parser": "flow"
      }
    ]
  }
}



Husky, Pretty-Quick and Lint-Staged Setup 

Husky enables us to tap into git hooks to run commands. A popular git hook is the pre-commit hook. Using this hook, we will prevent bad code from being committed to our codebase. Let's install some packages.

npm install --save-dev husky lint-staged pretty-quick

The command above installs husky, pretty-quick and lint-staged and configures them in the package.json Lint-stage runs ES lint on our files that are staged in git.

Add the code below to your scripts in package.json scripts.

"lint": "eslint ./",
"lint-fix": "eslint ./ --fix",
"format": "prettier --write \"**/*.{js,jsx,json,md}\""

Then also add the code below to your package.json, after the devDependencies object.

"lint-staged": {
    "*.js": "eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-fix lint-staged && pretty-quick --staged",
      "pre-push": "npm run test:all"
    }
  },
  "test:all": "set CI=true && react-scripts test && npm run lint"
}

Thus our code is prettified and linted before being committed.


Tailwind CSS Setup 

First we need to install the needed modules

npm install --save-dev tailwindcss postcss autoprefixer 

Next we need to create the config files which can easily be done via the following command:

npx tailwindcss init -p

Next open up the created "tailwind.config.js" file and replace with the following...

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class", // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        graphikBold: "'GraphikBold', serif",
        graphikLight: "'GraphikLight', serif",
        graphikMedium: "'GraphikMedium', serif",
        graphikRegular: "'GraphikRegular', serif",
        graphikSemibold: "'GraphikSemibold', serif",
      },
      spacing: {
        is01px: "1px",
        529: "529px",
      },
      colors: {
        "yourproject-red": "#ED2025",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};


Next we need to add the Tailwind directives to the "src/index.css" file, add the following to the top of the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Checking that it works

<h1 className="text-3xl font-bold underline text-red-600">
      Simple React Typescript Tailwind Sample
</h1>



Other React.Js Project Installations 

- npm i axios

npm i -S react-redux

- npm i history

- npm i redux @reduxjs/toolkit

- npm i react-router-dom


No comments:

Post a Comment