DEV Community: Ankit Kumar

Full stack monorepo boilerplate

Ankit Kumar — Sun, 17 Apr 2022 03:42:27 +0000

We often struggle to built a repo with frontend and backend codes in the same repository. Many questions comes to our mind like is it a good practice to have both in the same repository? Is it maintainable? etc.

There is already a solution for maintaining multiple features/modules/repositories which is called monorepo. Many companies like Microsoft, Meta and Twitter follows it.

There are many ways to achieve mono repo structure like Lerna, Rush, Nx

I have created a boiler plate for maintaining full stack applications. Here is the Github link - https://github.com/knowankit/fullstack-monorepo-boilerplate

I am using Nx for mono repo. For front end I am using React with typescript and for backend I am using NestJS, GraphQL server with mongoDB

There is a working todo-app added in the repo which makes it easy to understand the flow.

Clone the repo and run npm install and after the npm run dev.

This single command will start both the front end and the back end application.

Do give a ⭐️ to the monorepo-fullstack-boilerplate if you liked it.

Do you know all the popular NPM commands?

Ankit Kumar — Tue, 28 Sep 2021 13:47:45 +0000

We all have setup our node package manager application at least once. We hardly give importance to the npm because it is not a core part of our development. We perceive npm as a file which is just a dependency holder. But npm is much more than that, it is not difficult to have an average grip on npm.

Let's begin with all the popular commands 🛣

`npm init`

This is the first command which you will use when you are setting up your project.

This command asks for general information about the project name, description, version, author, github-link, homepage etc. It will generate a package.json file in your root folder.
You can edit the information anytime.

If you don't want to enter the information and want to go for defaults then run this npm init --yes

This will pick the data from your config setup.

`npm config`

You can update your config with this.

For example:

npm config set init-author-name "Ankit Kumar"

Fetch the value

npm config get init-author-name

`npm install`

Install the dependencies present in the package.json. Shorthand

npm i

To install a package use:

npm i package-name

To save in dependencies:

npm i package-name --save

To save in dev dependencies:

npm i package-name --save-dev or npm i package-name -D

Install a package globally:

npm i package-name --global

npm i package-name -g

`npm uninstall`

Shorthand

npm un

To uninstall a package do:

npm un package-name -g or -D or --save

-g - remove package from global list
--save - remove package from dependency list
-D - remove package from dev dependency list

`npm ci`

This command is similar to npm install except it is used in automated environment like test platforms, continuous integration and deployments.

To run npm ci, package-lock.json must be present
If there is any version mismatch between package.json and package-lock.json then it will exit with errors.
It is used to install entire projects and not individual package
It will never write to package.json or any of the package-locks: installs are essentially frozen.
If a node_modules is already present, it will be automatically removed before npm ci begins its install.

`npm audit`

Scan your project for vulnerabilities and automatically install any compatible updates to vulnerable dependencies:

npm audit fix

`npm cache`

Add the specified package to the local cache. This command is primarily intended to be used internally by NPM, but it can provide a way to add data to the local installation cache explicitly.

npm cache add <tarball file>
npm cache add <folder>
npm cache add <tarball url>
npm cache add <name>@<version>

Whenever we install any package it does not caches so to make it available offline, we can use this command.

Fortunately, yarn caches all the packages you install and is available offline.

`npm ls`

This command will print to stdout all the versions of packages that are installed, as well as their dependencies, in a tree-structure.

`npm link`

This is very common for dev who wants to test their component locally before publishing it on the npm registry. It will create a symbolic link in the global folder. {prefix}/lib/node_modules/<package> that links to the package where the npm link command was executed.

Next, in some other location, npm link package-name will create a symbolic link from globally-installed package-name to node_modules/ of the current folder. Now you can import your created component and it should be present in the node_modules

Note that package-name is taken from package.json, not from directory name.

`npm publish`

Publishes a package to the registry so that it can be installed by name. All files in the package directory are included if no local .gitignore or .npmignore file exists.

By default npm will publish to the public registry. This can be overridden by specifying a different default registry or using a scope in the name (see package.json).

`npm pack`

It creates a installable file with .tgz extension called tarball. This is a package file which can be install in any app.

For example :
example-component.tgz is tarball file. I will copy this in any node app. I will add this in my package.json like below

"dependency": {
 "example-component: "file: ./example-component.tgz"
}

and run

npm i/install

`npm help`

If supplied a topic, then show the appropriate documentation page.

If the topic does not exist, or if multiple terms are provided, then run the help-search command to find a match.

`npm whoami`

Print the username config to standard output.

`npm login/logout`

It just logins and logout

Please go through the full NPM docs as I have mentioned only those commands which I have seen others and used myself commonly.

Thanks for dropping by 🌟
Add a ❤️ if you liked it. Checkout my GitHub profile for cool projects. I have published many NPM packages.
Support me by following me on twitter

Setup ESLINT and PRETTIER in React app

Ankit Kumar — Sun, 26 Sep 2021 02:28:39 +0000

Setting up ESlint and Prettier is tedious for beginners, I know this because I have faced this issue too. You will find many articles about setting up the linting on the internet. Some of them will work for you, some will not but most of them will be outdated because of the continuous growing of the library.

So, instead of picking our brain too much, we should try to understand few things.

What is ESLint?

ESLint statically analyses our code and find the problems. It is present in most of the editors.ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.

Write your own rules that work alongside ESLint's built-in rules. You can customise ESLint to work exactly the way you need it for your project.

What is Prettier?

Prettier is an opinionated code formatter which is compatible with most of the languages. It saves a lot of time. It quickly indents our code on save (depends on VSCode/editor settings).

How to make them work together?

ESLint has also formatting rules which could conflict with prettier. So we should configure it carefully (sounds tough but it is very simple 😅)

Let's begin

Step 1 : -



npm install eslint --save-dev
 or
yarn add eslint --dev

Step 2 : -

Create .eslintrc.json by running



npx eslint --init
 or
yarn run eslint --init

Step 3 : -

In React - 17.0.0, importing react to a file is optional,
To fix this, we will add a rule to our .eslintrc file. So open your .eslintrc file and add this line "react/react-in-jsx-scope": "off" inside the rules.



  "rules": {
    "react/react-in-jsx-scope": "off"
  }

Step 4 : -

If you are using jest then you will find that eslint is giving us an error that test or expect is not defined . To fix this we need to add "jest": true inside env.



  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  }

Step 5 : -

Now, add esling plugins to make it work with react, and make proper configuration for eslint and prettier so that they don't collide with each other

Install



npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
or 
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

Please check each of their git repositories.
eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.

eslint-plugin-prettier - Runs Prettier as an ESLint rule

After installing above, make changes to .eslintrc file.



 "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]

We can run prettier separately but we want eslint to run it for us so that it does not conflict with the eslint rules.

Step 6: -

Create .prettierrc and paste the below code




{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

Now, eslint and prettier is setup lets add the script to the package.json



"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

This should work but before you test it, it is better to restart your VSCode.

You are all setup to write your awesome code.

Thanks for dropping by 🌟
Add a ❤️ if you liked it. Checkout my GitHub profile for cool projects. GitHub
Support me by following me on twitter