DEV Community: B.M. Fahad-ul-Amin

How to use index.js file(Properly)

B.M. Fahad-ul-Amin — Tue, 29 Mar 2022 19:32:28 +0000

Index.js file is just like index.html file, if no specification is provided a directory points to it's index file. Index files are equivalent doesn't matter if it's javascript or typescript.
For convenience we'll use index.js as example in this article.
that means if you have a directory

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

if you point to demo directory , it'll point to demo/index.js

Seems pretty neat,
if used propery it can help to keep codebase clean,
but if used carelessly everywhere it will hamper both readability and accessibility .

"Too much of a good thing can be a bad thing,"
- William Dudley

These are some common bad implementation of index.js files and their solutions,

#### If your directory has only index file

 ┣ 📂demo  
 ┃ ┗ 📜index.js  
 ┣ 📂demo1  
 ┃ ┗ 📜index.js  
 ┣ 📂demo2  
 ┃ ┗ 📜index.js  
 ┗ 📂demo3  
 ┃ ┗ 📜index.js

demo/index.js

export const num = 100;

You want to access content of index.js file by pointing to the demo directory, that will work.

import num from './demo';

this is the worst implementation of index.js files.
What is the issue with it?

Multiple same name files
by looking at the name of index.js file it's difficult to say what index.js file does what
can not access file directly, because demo is a directory and demo/index.js and demo points to the same destination, one may search demo file throughout the project and it won't show up because the logic is in demo/index.js file

If a folder contains only one file, then no need to use a directory, use the file alone.
The solution in this case is.

 ┣ 📜demo.js  
 ┣ 📜demo1.js  
 ┣ 📜demo2.js  
 ┗ 📜demo3.js

demo.js

export const num = 100;

the above import will still work and now you can directly search the files.

#### writing component in a index file is another bad usecase,

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo/index.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

now as the component is a default export , I can import the component by any name, in this component I'll import it as Demo.

Now, I can import the component like this.

import Demo from './demo';

The Demo component is a valid componet, but If I search for the Demo Component in my Project I won't find any, if I search for demo file won't find any Demo file as well.

this can be solved by using the index.js file only to export.
Eg:

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo/Demo.jsx

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

PS: This is given for example purpose only, keep the file name and component name same to avoid confusion.

now the above import will still work

import Demo from './demo';

In this case search by Component name will still won't work, but We can search by the fileName at least.

you can do both export and default exports using index.js files.

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo/file1.js

export const str1 = 'file1';

demo/file2.js

export const str2 = 'file2';

demo/file3.js

export const str3 = 'file3';

demo/Demo.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

finally the index.js file

index.js

export { str1 } from './file1';
export { str2 } from './file2';
export { str3 as customExport } from './file3';
export { default } from './Demo';

first three examples are doing exports
third one is aliasing an export while exporting
fourth one exporting default export as Demo component and it's also defult for this index.js file

you can also export default exports of other files as normal files like this

export { default as NormalExport } from './Demo';

you can also do default export like this

export default str = 'inexFileName';

now we can import all these exports from './demo' location

import str, { str1, str2, customExport, NormalExport } from './demo';

# Setup React app from scratch - Part-1(Get your project running)

B.M. Fahad-ul-Amin — Tue, 22 Mar 2022 14:03:06 +0000

Part1.01 : Isn't create-react-app good enough?

Create-react-app is a great tool, it gets the project running in minutes. But it binds our hands with a lot of abstractions, according to the official react docs it is meant to be a tool to get anyone started with a good dev environment.
It comes out of the box with a lot of good defaults(many of which we may never need) but it's very difficult to extend or bend it according to our needs. So in this series of articles we'll learn how to build our react setup from scratch.

Part1.02: What is a module bundler

The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser.
there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once.
create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.

Part1.03: Project directory.

at the end of the project we'll end up with a folder structure like this.

📦my-app
 ┣ 📂public
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📜App.jsx
 ┃ ┣ 📜app.module.css
 ┃ ┣ 📜index.js
 ┃ ┗ 📜logo.png
 ┣ 📜.babelrc.json
 ┣ 📜.browserslistrc
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜webpack.config.js

Part1.04: Initialize Project

first thing first create a repository.

mkdir my-app
cd my-app

initialize the project

npm init --y

at this time you should have a package.json file available in the directory

part1.05: Run javascript ! Run!

run

npm i -D webpack webpack-cli

if you check the node_modules/.bin directory you will find a file named webpack. that is a binary file, that will run our webpack commands.
now if you run

./node_modules/.bin/webpack

you should get a promp saying

Can't resolve './src' ...

create src folder , by default webpack looks for a index.js file.
crate a index.js file inside src folder

src/index.js

console.log('hello world');

now if you run

./node_modules/.bin/webpack

a dist folder will be created. however you'll be prompted with this error

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

to get rid of the error modify the command to

./node_modules/.bin/webpack --mode development

now no errors will be prompted and and one dist folder will be created.

in the project we need to run webpack multiple times, writing the command each time can be tiresome , create a script in package.json to overcome this.

PS: Package.json by default points to ./node_modules/.bin so we'll
just write webpack instead of ./node_modules/.bin/webpack

package.json

  "scripts": {
     ...,
    "start": "webpack --mode development",
    "build": "webpack --mode production",
    ...,
  }

run

  npm start

the output should be same as

./node_modules/.bin/webpack --mode development

now we have a dist directory.
inside of dist we have main.js file, to execute the file in browser we need to add it as a script in a html file.
Instead of doing it manually, we'll take the help of html-webpack-plugin.

npm i -D html-webpack-plugin

create webpack.config.js in root directory

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, args) => {
  return {
    plugins: [new HtmlWebpackPlugin()],
  };
};

npm start

now dist will contain a index.html file as well, which points to the main.js file.
if you open the index.html with browser and check console you'll see hello world in the console

P.S: env and args in the snippet can be used to receive environment variables and detect mode, we'll discuss them in details in some other chapter.

Part 1.06: Setup the dev server

current setup doesn't provide us a developer friendly environment, we need to check the index.html file every time we make a change,
to resolve this we'll use webpack-dev-server.

npm i -D webpack-dev-serve

package.json

"scripts": {
...
~~"start": "webpack --mode development",~~
"start": "webpack serve --mode development"
...
},

npm start

open browser , go to http://localhost:8081 and open console, you'll see "hello world" .
To mock the behaviour of create-react-app and to run it on port 3000, make this changes
webpack.config.js

module.exports = (env, args) => {
  return {
    devServer: {
      port: 3000,
      open: true,
    },
    plugins: [new HtmlWebpackPlugin()],
  };
};

npm start

the project will open browser and start on http://localhost:3000.

Part 1.07: Set up HTML

create a public folder in root directory, create index.html

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

instead of using default index.html in the dist folder we want to use the html file from public folder.
why? because it has the id root and we will render all our react element using this root element .
To use the public/index.html modify the HtmlWebpackPlugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = (env, args) => {
  return {
    devServer: {
      port: 3000,
      open: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, 'public', 'index.html'),
      }),
    ],
  };
};

npm run build

check dist/index.html, the file should contain a div containing id root.

Part 1.8: Setup react

npm i react react-dom

src/App.jsx

import React from 'react';
const App = () => {
  return <div>App</div>;
};
export default App;

src/index.js

import reactDom from 'react-dom';
import App from './App';
const root = document.getElementById('root');
reactDom.render(<App />, root);

npm start

you'll get an error

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

from the error we get the idea that we need a loader to load jsx syntax

Part 1.09: Enter babel

npm i -D babel-loader @babel/core

modify webpack.config.js to load js and jsx files with babel
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = (env, args) => {
  return {
    devServer: {
    ...,
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          use: [{ loader: 'babel-loader' }],
        },
      ],
    },
    plugins: [...],
  };
};

npm start

you'll get an error

SyntaxError: /Users/fahadamin/workspace/test/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled

though we are loading our js and jsx with babel, babel isn't configured yet to handle jsx files.
we'll use @babel/preset-react to load jsx and @babel/preset-env to transpile modern js to es5 js for browser support.

create a .babelrc.json file in the root directory
.babelrc.json

{
  "presets": [
    ["@babel/preset-env"],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

create a .browserslistrc file for babel to transpile code for maximum brower support

.browserslistrc

1% # Browser usage over 1%
Last 2 versions # Or last two versions
IE 8 # Or IE 8

npm start

now your project can load jsx syntax

Part 1.10: Loading CSS

our project can run jsx but it can't load any css yet, css-loader and mini-css-extract-plugin to the resque.
we'll use css-loader to load css files and mini-css-extract-plugin to extract all the css in a single file.

npm i -D css-loader mini-css-extract-plugin

webpack.config.js

...,
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = (env, args) => {
  return {
      ...,
      module: {
      rules: [
         ...,
        {
          test: /\.(css)$/,
          use: [
            { loader: MiniCSSExtractPlugin.loader },
            { loader: 'css-loader', options: { modules: true } },
          ],
        },
      ],
    },
    plugins: [
      ...,
      new MiniCSSExtractPlugin(),
    ],
  };
};

ps: options: {modules: true} has been set for css-loader so that we can use module css files

src/app.module.css

.test {
  background-color: aquamarine;
}

src/App.jsx

import React from 'react';
import style from './app.module.css';

const App = () => {
  return <div className={style.test}>App</div>;
};

export default App;

now your app will be able to load css.

part 1.11: Loading assets

webpack 5 comes with asset handlers out of the box, we just need to treat some file type as assets.

webpack.config.js

module.exports = (env, args) => {
  return {
    ...,
    module: {
      rules: [
        ...,
        { test: /\.(png|jpg|jpeg)$/, type: 'asset' },
      ],
    },
    ...
  };
};

add a logo in src folder

src/App.jsx

import React from 'react';
import style from './app.module.css';
import logo from './logo.png';

const App = () => {
  return (
    <>
      <div className={style.test}>App</div>
      <img src={logo} alt='demo' />
    </>
  );
};

export default App;

now the project can load assets as well, our setup is ready for development.

Finishing up

This is a very basic setup, we can enhance it with typescript and also optimize our app for production build with plugins. I'll try to keep adding to the series , at the end of the day hopefully we'll end up with a production ready optimize build.

all the code of this article is available here.

How to setup your next react project(typescript + eslint + prettier + husky + lint-staged + cz-cli)

B.M. Fahad-ul-Amin — Sat, 22 Jan 2022 09:00:52 +0000

Who doesn't like auto code formatting, right?
But when it comes to Js/Ts it's comparatively difficult to configure it properly.
I spent may hours googling, finding our how to do it properly.
This is the compilation has worked out best for me. Hope it helps the restless souls who are looking for a good step by step guide to setup their next big projects.

Step 1: Basic Setup

We'll be using Create-react-app with typescript for our basic setup
run

npx create-react-app my-app --template typescript
cd my-app

Step 2: Eslint

Setup eslint in the repository

npm install eslint --save-dev
npm init @eslint/config

the cli will ask you some questions, you can answer them according to your needs to generate your specific eslint configuration.
In this project these answers are selected

Q. How would you like to use ESLint?
Ans. To check syntax, find problems, and enforce code style

Q. What type of modules does your project use?
Ans. JavaScript modules (import/export)

Q.Which framework does your project use?
Ans. React

Q. Does your project use Typescript?
Ans. Yes

Q. Where does your code Run?
Ans. Browser

Q. How would you like to define a style for your project?
Ans. Use a popular style guide

Q. Which style guide do you want to follow?
Ans. Airbnb: https://github.com/airbnb/javascript

Q. What format do you want your config file to be in?
Ans. JSON

Q. Would you like to install them now with npm?
Ans. Yes

at this point a .eslintrc.json file should be generated in your project root folder.
Navigate to App.tsx , you should notice eslint taking effect.
Hover over the error block, you should see some error message like this

JSX not allowed in files with extension '.tsx'eslintreact/jsx-filename-extension

allow JSX on tsx files by adding this rule to your .eslintrc.json rules

  "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ]

now eslint will allow Jsx on .ts and .tsx files as well.

add this rule to allow importing files without specifying extensions

 "import/extensions": "off"

For typescript project, you'll get import/no-unresolved error. We can disable this error in the rules. But a better way to solve this is to use eslint-plugin-import.

run

npm install eslint-plugin-import --save-dev

add the plugin in .eslintrc.json file

  "extends": [
     ...,
    "plugin:import/recommended",
    "plugin:import/typescript",
    ...
  ],

Now, the errors should be gone.

Step 3: Prettier

### installing prettier

npm install --save-dev --save-exact prettier

create a .prettierrc.json file in your project root repository, add your prettier configs there.

add rules in your .prettierrc.json. Eg:

{
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "es5",
    "useTabs": false
}

configuring prettier with eslint

eslint may conflict with prettier rules , eslint-plugin-prettier resolves this issue for us.
run

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

add the plugin in eslint

  "extends": [
     ...,
    "plugin:prettier/recommended",
    ...
  ],

at this point all the eslint conflicts with prettier should be resolved

Step 4: Husky

We'll be adding husky to add eslint fix and prettier formatting in our pre-commit hook.

install husky

npm install husky -D
npm set-script prepare "husky install"
npm run prepare

if the installation is successful a prepare script will be added to the package.json.

adding lint-staged

We'll be using int-staged to run eslint and prettier on our staged files.
Add .lintstagedrc.json in the project root repository.
populate the file with your commands

{
  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix", "git add"],
  "*.{html,css,less,ejs}": ["prettier --write", "git add"]
}

integrating lint-staged with husky

run

npx husky add .husky/pre-commit "npx lint-staged"
git add .husky/pre-commit

now husky pre-commit hook has been configured to run lint-staged.
and every time before committing the hook will run and fix eslint-errors and run prettier on staged files

Step 5: Commitizen

Commit messages are very important for maintaining a project.
It can get difficult to maintain a similar commit convention when you are working in a larger team.
cz-cli is here to help , we can enforce committing format by using the amazing tool.
We'll be using conventional-changelog. configuration to follow AngularJS's commit message convention.

run

npm i --save-dev commitizen 
npx commitizen init cz-conventional-changelog --save-dev --save-exact

add this commit script in your package.json

  "scripts": {
    ...,
    "commit": "cz"
    ...
  }

add the following confi
add the following configuration to the project's package.json file:

"husky": {
  "hooks": {
    "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
  }
}

now for committing , instead of using git commit use npm run commit/ yarn commit.
You'll get suggestions for commit messages.

That's all . Now your project is all ready to be linted, formatted and it'll be easier for your teammates to follow a similar code convention throughout the code base.

You can find all the code in this repo