When starting a React Js project it is advisable to make it a Progressive Web App (PWA), instead of the regular create-react-app which doesn't have loads of features.
To install a React PWA project on your terminal or git bash, run the following script...
npx create-react-app my-app-name --template cra-template-pwa
After that, we can start off with the project setups for our React PWA project
1. Configuring Editor Config
The first configuration we will do is the file .editorconfig, which is used to store settings between several editors. To create it in Visual Studio Code, we need to add the proper extension for this.
In the VSCode extensions tab, search for Editorconfig and install the extension.
After installing the extension, we need to right-click on the root of our project (src folder) and select the option Generate .editorconfig, as in the image below:
A .editorconfig file will appear in your project structure.
Replace the file with the settings 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
All set! Our .editorconfig file is ready.
2. Configuring ES Lint
ESLint is one of the well-known code linters, and they serve for all files to maintain a writing code pattern, indentation, and spacing, forcing that your project does not have disparity between file formatting, which occurs mainly when several developers working on the same project.
Let's install eslint with the command below:
npm install eslint --save-dev
With the installation done, enter the following command:
npx eslint --init
After it runs we will need to select these answers in our terminal for the configuration to be correct and complete.
> Configuring the eslint function:
The first option is the configuration of the eslint function, we will select the last option:
- To check syntax, find problems, and enforce style code.
> Importing modules
The selection of the type of import that we will use will be the default of react, the import/export, therefore, we select the first option:
- Javascript modules
> Selecting the framework used
In this step, we’ll select
- React
> Use of typescript
Select the option
- No
> Code targeting
Here we can select between browser (front-end) and Node (back-end).
- The browser option is already selected, so just hit enter.
> Style Guide
There are several code patterns used by several companies, and many of them create style patterns. This option is free for you to choose from.
The option that I use the most is the - airbnb standard which standardizes the use of single quotes, file imports below packages, among other things. It can be selected below:
- airbnb standard
> File format configs
Finally, we select the type of configuration file. We will use JSON, as it becomes easier to edit throughout the production of the project
- JSON
> ESLint asks if you would like to install the dependencies using npm.
we select the option
- YES.
Installing dependencies with NPM
Open your ESLint config file, likely called .eslintrc.
Your file name may vary, depending on the config format you chose.
I recommend the JSON format.
There are few customizations we need to make in the .eslintrc file
In the “env”: section, add jest. Not adding jest will make ESLint error out on Jest-specific functions like describe and it:
"env": {
"browser": true,
"es2021": true,
"jest": true
},
In the “extends”: section, add “plugin:react/recommended”:
"extends": [
"plugin:react/recommended",
"airbnb",
]
And now you are all set. If you try to run ESLint now, it will pass without errors.
If you don’t really want to always run the linter manually from the terminal, add the npm scripts that’ll run the linter:
Open the package.json file. In the “scripts” section, add the new ESLint scripts.
“scripts”: {
... (Previous script )
// Add the below script below the previous script.
"lint": "eslint ./",
"lint-fix": "eslint ./ --fix",
},
You can run these scripts with npm by calling:
npm run lint
npm run lint:fix
You should be all set on ESLint at this point. Right now it’s really easy to set up Git hooks using Husky.
3. Configuring ES Lint Ignore
Let's create a file called .eslintignore and add the settings below. It will prevent eslint from forcing styles in the /node_modules files, javascript files at the project root, and in the javascript react .env file.
/*.js
** / *. js
node_modules
build
/src/react-app-env.d.js
4. Configuring ES Lint RC
Let's open the .eslintrc file and add the following settings
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
}
}
4. Configuring Prettier
Prettier is a code formatter and serves to make your code as beautiful and readable as possible.
To install it, just use the command:
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
Creating the prettier configuration file
Let's create the file .prettierrc at the root of our project and insert the following settings:
{
"singleQuote": false
}
Let's create the file .prettierignore to add the ignored folder
node_modules/
public/
build/
Try setting the
"endOfLine":"auto"
in your .prettierrc file (inside the object)
If you are using a windows machine endOfLine can be "crlf" basing on your git configuration.
Or set
'prettier/prettier': [
'error',
{
'endOfLine': 'auto',
}
]
Inside the rules object of the .eslintrc file.
4. Configuring .env File
Create a file .env where you will store and setup api keys or any environment based settings
After creating .env file
Then go to .gitingnore file and add this
# api keys
.env
and if you have a yarn.lock file
# yarn lock file
.yarn.lock
5. Adding Scripts in Package.json
Add the following scripts in your project to run the eslint and prettier to lint and format your code.
Add these to the scripts in package.json
"lint": "eslint ./",
"lint-fix": "eslint ./ --fix",
"format": "prettier --write \"**/*.{js,jsx,json,md}\""
6. Configuring JS Config
Create s file names jsconfig.json in the root directory of the project and paste the following code
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
7. Configuring Style Lint
On adding StyleLint to your project
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" }]
}
}
8. Configuring Pre-Commit and Pre-Push
This is a pretty important step. This will ensure that before any developer in your team commits any code, the changes made by him are validated with ESLint, and the code is properly formatted.
We will need to configure some packages
1. The First package we need is husky which will make adding these hooks very easy.
2. We also need a package called lint-staged that will let us check only the pages which are changed. So, only the staged files are checked and the rest of the code remains untouched.
3. Pretty quick will check for any unformatted files and format them using Prettier.
npm install --save-dev husky lint-staged pretty-quick
After installing these packages we need to add configuration for these in our package.json file
"devDependencies": {
...
},
"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"
}
Most of the errors (90%) can be fixed by ESLint itself, so run ESLint with a fix flag:
npm run lint-fix
You should only have a handful of errors left, they should look like this:
1:8 error ‘React’ is defined but never used no-unused-vars
3:8 error ‘App’ is defined but never used no-unused-vars
5:1 error ‘it’ is not defined no-undefined
Go to those files and fix them manually by hovering over the error and selecting quick fix, and then disable for entire file
To fix these errors, we have to tell ESLint to take into account that our app is running on Create React App and that we are using Jest as a test runner.
Now we have Git hooks for commit and push actions.
Every time you run a Git commit, Husky will run a pre-commit script (“npm run lint-fix”) and will only let you commit your changes if validation passes. This functions in a similar fashion for Git pushes.
What if we want to run both test and lint scripts pre-commit and pre-push (or any other more complex script)?
Congratulations! Now you have Git hooks that will run your tests and lint your code automatically each time you commit your code.
Pretty handy, huh?
9. Other Useful or Necessary Packages a Modern Frontend Project Needs
## https://create-react-app.dev/docs/making-a-progressive-web-app/
- A link to the official react PWA documentation.
## https://tailwindcss.com/docs/guides/create-react-app
- A link to the official Tailwind CSS documentation.
## npm i axios
- To Install Axios.
## npm i react-redux
- To Install React-Redux.
## npm i @reduxjs/toolkit
- ...
## npm i react-router-dom
- ...
And so on and so forth..... 😜
No comments:
Post a Comment