DEV Community: Kumar Prince

Getting started with Monorepo using NX

Kumar Prince — Sun, 07 May 2023 17:43:17 +0000

In this Blog, I'm gonna talk about Monorepo, including its benefits and drawbacks, and how you can get started with this. I've been working on Monorepo for last one year and thought of sharing my knowledge with everyone of you.
Not so many developers are familiar with Monorepo or they might never got a chance to work with it.

Currently, Lot of companies are using monorepo for building the products and getting to know about this could be an advantage for you.

So, let's get started with this.

What's Monorepo?

In traditional development workflows, each project has its own repository. This approach can lead to many problems, such as duplication of code, inconsistent dependencies, and poor communication between teams.
Monorepo addresses these problems by storing all the projects in a single repository.
This approach can make it easier to manage and scale a large codebase, as it allows for better organization, collaboration, and reuse of code. Overall, monorepo can be a useful tool for developers who want to simplify their development workflows and improve their productivity.

Pros

Monorepo provides so many benefits such as:

Easier code sharing
Better collaboration between teams
Easier to maintain external packages/dependencies
Single store for code styles, formatting and linting across solutions
Test can be run across platform when a change is made to a shared service/feature/package

Cons

It may not be the best approach for all development workflows and has it's own set of cons, such as:

More complex for smaller projects
Longer build times (possible)
Repository Size
Managing dependency
Restricting access to apps/libs for certain teams/outsourcers

There are several tools available to help manage Monorepos, including:

NX
Lerna
Yarn Workspaces

I am gonna talk about NX and how can you get started with it as I have some expertise in that.😎

What is NX?

NX is a set of powerful tools and best practices for building and maintaining complex applications. NX provides a number of benefits:

A set of powerful command-line tools: NX provides a set of powerful command-line tools for building, testing, and deploying your applications.
A set of best practices: NX provides a set of best practices for developing applications in a Monorepo. These best practices help you to write better code, faster.
An extensible plugin system: NX provides an extensible plugin system that allows you to add new features and capabilities to your applications.

Getting Started with NX Monorepo

1️⃣ Install NX: To get started with NX, you'll need to install the NX CLI. You can do this by running the following command:



npm install -g nx

2️⃣ Create a new workspace: Once you have NX installed, you can create a new workspace by running the following command:



npx create-nx-workspace@latest my-app

This will create a new NX workspace with the name "my-app". You'll be prompted to choose a preset for your new workspace, such as "empty", "react", "next.js", "react-native", "nest" or "angular" and stylesheet format such as "CSS", "SCSS", "styled-components" etc.
I selected next.js monorepo.
After it's done you can see the below folders and files in your workspace.

3️⃣ Start the development server: To start the development server and view your next.js application, run the following command:



nx serve my-app

This will start the development server and launch your application in your default web browser.

4️⃣ Add additional projects: Once you have your next.js application up and running, you can add additional projects to your NX workspace. For example, you could add a backend API project, a shared library of components, or additional front-end applications.

By following these steps, you can quickly get started with NX using Next.JS and begin building scalable, maintainable applications using Monorepo architecture.

🚀That was it for today. Hope you got the idea about Monorepo now. Still have any doubt, comment down below or checkout the NX documentation.

Thanks for reading it. You can follow me here for more blogs. Or can follow me on social media about the dev tips I keep sharing.
Twitter
Linkedin

Updating favicon in Fullstack(React + Django) Application

Kumar Prince — Tue, 14 Dec 2021 09:15:21 +0000

Hello everyone,

This blog is about how to change your favicon in React while deploying your full-stack application on cloud server.

I actually struggled a bit on fixing this issue in my full-stack (React+Django) application while deploying on Azure and Heroku. The tab was not displaying any icon after the deployment but was showing using local server. Looked for answers on the internet, none was helpful.

Well I tried so many methods which didn't work, first one was copying the favicon into public folder of React app and changing the path simply. No luck.😥
Then moved the favicon in /assets folder under src and then took the reference path of that in index.html file under public folder. Still no luck.

Googled the issue, read blogs, nothing worked.

Now what anyone can do in this situation?

Yeah, you're right, taking help from someone. So, I talked to a friend and he suggested something and I applied. Voila, worked now. Feeling awesome.😄

So what was the thing I had to do to make this work?

It's no rocket science. All I had to do was to write a useEffect hook with empty array dependency and in that pick the id using document.getElementById('<>'), yeah you can use querySelector too and then pass the same id in index.html file in element related to favicon. So now you just need to import the favicon in App.js file and set the attribute and you're done.
See, how easy this was.✌️

Below are the steps mentioned with code.

Step 1 - Import icon and write useEffect in App.js

// App.js
import icon from './images/favicon.ico';

useEffect(() => {
    const favicon = document.getElementById('favicon');
    favicon.setAttribute('href', icon);
}, []);

Step 2 - Add an id to favicon element in index.html file under public folder.

<link rel="shortcut icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />

So this solution worked🎉but if you have any other tricks/solution, Let me know in the comment.

React in a Nutshell

Kumar Prince — Wed, 04 Aug 2021 06:39:33 +0000

Hello👋 Everyone,

This blog is about getting started with ReactJS which is indeed a very popular library for creating UI. React is developed by Jordan Walke ex-employee of Facebook company. React allows developers to create large applications which can change the data without reloading the webpage. It is fast, scalable and simple. It's a view library and can be integrated with different applications as Angular.

I started learning React last year and faced lot of difficulties. TBH, coming from a Testing background I faced so many challenges while learning development but now I love it. I've really come very far from where I began. So without wasting any more minute I'll start with how anyone should get started learning React.

JSX (JavaScript XML)

Anyone who wants to learn React should be familiar with HTML as they would be spending more time creating layouts. React uses JSX which is similar to HTML but JSX is a mixture of HTML and JavaScript which forms a component. JSX gets translated into JavaScript at runtime with the help of Babel.

// Normal HTML
<div>
    <p>This is a React Blog</p>
</div>

// JSX
<>
    <Hello />
    <p>This is a React Blog</p>
</>

Hello is a component, it would've been made you confused that when this type of HTML element have been created but trust me that's not the case here. This is a React Component which needs to be imported in App.js file to be rendered on UI. <></> is a React Fragment which is used to wrap the components when we don't require an extra node in DOM tree. You can search more on this later.

After getting transpiled with the help of Babel, JSX gets converted as-

// JSX code
<h1>This is a React Blog</h1>

// Transpiled code into JS
React.createElement('h1', {}, 'This is a React Blog');

FYI, we can write the JavaScript code directly in our file rather than writing JSX but that would take enormous amount of time, that's why JSX code is there for our facility. So, use that kindly 👨‍💻.

Hooks vs Class Component

I would recommend everyone to learn Hooks instead of Class Component as Facebook says😜.
But IMO, Hooks has made React easier to learn. When I started learning React I learned class component first and got messed up while learning so many lifecycle methods and few got deprecated till I finished and then I started learning Hooks. Hooks is just as amazing, you can get your work done just with useEffect in the place of componentDidMount(), componentDidUpdate(), componentWillUnmount() methods. useState hook can be used for mutating state. No need of using this keyword every time while mutating state or calling any functions unlike class components.
Example-

// Hooks
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// Class Component
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

JavaScript

Not to mention, without knowing JavaScript learning React would be a very bad idea as React is based on JavaScript only. One has to use the same way of variable declaration and method writing. But as this is a library, certain rules needs to be followed, Camel notation is used everywhere in React when calling event listener. E.g. onclick is used in vanilla JS but in React the same event would be called as onClick. Other examples are onChange, onDrag, onDrop etc.
For more info related to React events you can visit here

State and Props

State plays a very vital role in UI development. In React also it's used to handle the behavior of UI. In fact, whenever any state change happens, react only updates the changed attributes rather than rebuilding the new DOM tree which increases the efficiency. This process is called Reconciliation.

Props is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

Eg.

// Parent Component
import React, { useState, useEffect } from 'react';
import Child from './child';

function Parent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <Child counter={count} />
    </div>
  );
}

// Child Component
import React from 'react';

export default const Child = (props) => {

  return (
  <>
    <p>{props.counter}</p>
  </>
  )
}

You can see in the code, Parent component has state called count which mutates when Click Me button gets clicked. And the Child component is imported inside the Parent component, has the counter value which is accessible in Child component via props.

CSS Modules

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Normally, CSS is imported as

import './style.css';

<Button className="main-btn"></Button>

but when using CSS modules then

import styles from './style.module.css';

<Button className={styles.mainBtn}></Button>

SPA

SPA stands for Single Page Application. You do know how our mobile application is fast, on a single click it navigates to different pages. The same way Web application also works nowadays and React is one of the widely used library to create SPA.

Libraries and Framework support

Several libraries and frameworks are out there which can be easily integrated into React application. Few like React Router, Redux, MaterialUI you should learn. It'll make your life easier.

1. React Router

React is well known for its declarative programming model. If you are creating an application with React, it will be great to have some components that you can compose declaratively in your app. React router is a collection of such components. Suppose you want to add some URLs which you can bookmark. Or, what if you want a composable way to navigate in React native? We have a React Router for the solution.

React Router is one of the best component libraries that makes it effortless for the developer to handle navigation in a single-page app. Not only that, but the library also offers smooth screen-to-screen transition, server-side rendering and vivid support for nesting.

2. Redux

When it comes to state management libraries, the one that comes to our mind is Redux. Redux also comes under the category of best component libraries with 20.9k GitHub stars and 3k forks. Although it is meant to be used with the library components of React UI, you can also use it with Vue, Angular, Ember, and other JS frameworks.

Redux helps to connect React components to pieces of state by decreasing the need for props or callbacks. The library is often termed as a developer’s best friend. It helps you to write consistent codes and is environment-friendly. You can also edit the code while your app is live.

3. Material UI

If you are not much of a designer, no issues. Material UI gives you a collection of themes that you can choose for your site. There is extensive documentation so that you can find whatever you need whenever you feel stuck.

When you're done learning these things, get ready to dirty your hands with Creating Custom Hooks, Unit Testing, Server Side Rendering using NextJS, etc. which will help you to evolve as a great developer.

Last but not least, by learning React you can develop Web Applications, Mobile Applications and Desktop Applications as well. There are hell lot of demand for React developers. So, start learning it today.

So that was it from this article😇. Please share your thoughts/comments/feedback.

Connect me @ Twitter, Linkedin

Basic git commands every developer should know

Kumar Prince — Tue, 01 Jun 2021 20:15:07 +0000

Hi everyone,
This is my second blog. And in this I will be sharing my knowledge of Git, which is a distributed version control system. Git is an important part of our daily programming (especially if we're working with a team) and is widely used in the software industry.

Mastering git takes time and trust me, I've switched from SVN to git. So, I know the hurdles a beginner would face. I've seen many people who are not comfortable using git or doesn't use git properly.

There are so many commands we can use, but some commands are used more frequently(some daily). So in this post, I will share and explain the commands which every developer should know.

1. Git Clone ➿

Git clone is a command for downloading existing source code from a remote repository (like GitHub, for example). In other words, Git clone basically makes an identical copy of the latest version of a project in a repository and saves it to our computer.

There are a couple of ways to download the source code, but mostly I prefer the clone with https way:

git clone <https://name-of-the-repository-link>

For example, if we want to download a project from GitHub, all we need to do is click on the green button (clone or download), copy the URL in the box and paste it after the git clone command that I've shown right above.

One of my repo's source code example.

This will make a copy of the project to your local workspace so you can start working with it.

2. Git Branch 🌿

Branches are highly important in the git universe. With the help of branches, several developers are able to work in parallel on the same project simultaneously. We can use the git branch for listing, creating and deleting branches.

Let's see first, how to create branch:

git branch <branch-name>

This command will create a new branch in local. To push this new branch to remote repo, we need to use the following command:

git push -u <remote> <branch-name>

To view the branches

git branch or git branch --list

To delete a branch

git branch -d <branch-name>

3. Git Checkout ✅

This command is also used very much. To work in a branch, we need to switch to it first. We use this command mostly for switching from one branch to another. We can use this branch also for checking out files and commits.

git checkout <branch-name>

Actually there are few steps which we need to follow for successfully switching between branches.

The changes in our current branch must be committed or stashed.
The branch we want to checkout must be in our local.

There is also a shortcut command that allows us to create and switch to a branch at the same time:

git checkout -b <branch-name>

This command creates a new branch in our local and switch to it after creating.

4. Git status 🗽

The status command we can run when we want to check the status of our current branch, like what all files have been modified, created or deleted or if there are files which are staged, unstaged or untracked or whether there is anything to commit, push or pull.

git status

5. Git add ➕

Whenever we create, modify or delete a file, these changes will be there in our local but won't reflect in the remote repository and it won't be included in next commit unless we modify the configurations.
We need to execute this command to include the changes of a file into our next commit.

git add <file>

The above command is used to add a single file.

git add .

The above command we can used to add all the altered files at once.

6. Git commit 💞

This command is also highly used in development. Suppose, you're working on some task and after some times you think that this changes should be saved. So, Git commit is like setting a checkpoint in the development process which you can go back to later if needed.
We also need to write a short message to explain what we have changed in the source code or what we have developed.

git commit -m "any commit message"

7. Git push ⬆

After committing the changes, the next process we need to do is send our changes to the remote server. Git push uploads our commits to the remote repository.

git push <remote> <branch-name>

However, if our branch is newly created, then we also need to upload the branch with the following command:

git push -u origin <branch-name>

8. Git pull ⬇

The git pull command is used to get the latest changes from the remote repo. This command is a combination of git fetch and git merge which means that, when we use git pull, it gets the updates from remote repository (git fetch) and immediately applies the latest changes in your local (git merge).

git pull <remote>

Note:- This command can create conflict which we need to solve manually.

9. Git reset hard 🔙

When working on a team project, it is quite common for developers to create branches, add files and stage them for commits when they are ready.
However, in some cases, you might realize that the changes that you made were not that good.
You modified some files, added and deleted a lot of lines from your files, but you want to go back.
In short, you want to revert the changes that you just made and go back to the files that you had.
This technique is called “reset to HEAD” and it is quite a powerful tool for developers to use.

git reset --hard

10. Git rebase ⏸

The primary reason for rebasing a branch is to maintain a linear project history. For example, consider a situation where the master branch has progressed since you started working on a feature branch. You want to get the latest updates to the master branch in your feature branch, but you want to keep your branch's history clean so it appears as if you've been working off the latest master branch. This gives the later benefit of a clean merge of your feature branch back into the master branch.

To perform this command, we first need to checkout to the branch we want to rebase with our main branch.

git checkout <branch name we want to rebase>
git fetch origin
git rebase origin/<branch we want to rebase with>

Thanks for reading this blog 🙇‍♂️. See you in next ✨.

Spread operator, Rest Operator & Destructuring in JS

Kumar Prince — Sat, 08 May 2021 18:51:22 +0000

Hi Everyone,

This is my first blog. And in this blog, I'm gonna talk about Spread Operator, Rest Operator and Destructuring in JavaScript, and as I have been working on JavaScript since 1 year, I used to think that spread operator is used for destructuring. While working on a project recently I found out that concept of destructuring is completely different and thought of sharing it here. So, Let's begin.

Spread Operator

The spread operator is used to split up array elements or object properties. It does deep cloning of the array elements or object, so it doesn't affect the original values.
Let's see the Example of Array first-

const arr1 = [1, 2, 3]
const arr2 = [...arr1, 4, 5]
console.log(arr1);              // [1, 2, 3]
console.log(arr2);              // [1, 2, 3, 4, 5]
arr1.push(6, 7);
console.log(arr1);              // [1, 2, 3, 6, 7]
console.log(arr2);              // [1, 2, 3, 4, 5]

You can see above that arr2 hasn't changed after adding more values to arr1.
But what if I hadn't provided the "..." operator in arr2. Let's find out below-

const arr1 = [1, 2, 3]
const arr2 = [arr1, 4, 5]
console.log(arr1);              // [1, 2, 3]
console.log(arr2);              // [[1, 2, 3], 4, 5]

Yes. It would create a nested array.

Same goes with the objects as well.

const obj1 = {
  name: "Prince",
  Sex: "Male"
}
console.log(obj1);        //{name: "Prince", sex: "male"}

const obj2 = {
  ...obj1,
age: 25              //{age: 25, name: "Prince", sex: "male}
}
console.log(obj2);

obj1["height"] = "5'8 ft";
console.log(obj1);//{height: "5'8 ft",name: "Prince", sex: "male"}
console.log(obj2);   //{age: 25, name: "Prince", sex: "male}

Rest Operator

Rest operator is used in a function whenever multiple arguments are expected.

const filter = (...args) => {
  return args.filter(val => val%5===0)
}

console.log(filter(5, 10, 2, 4, 20));    // [5, 10, 20]

You can see above that we are passing 5 arguments while calling filter function and it's printing the value according to the condition and even we can pass n number of argument and it'll work just fine.

Destructuring

It's also next gen javascript feature. Destructuring easily extract array elements or object properties and store them in variables.
By the above definition, you'd have been thinking that It works exactly as spread operator but It's work differently.
Let's find out below.-

// Array
const num = [11, 22, 33];
[x, y] = num;
console.log(x);                             // 11
console.log(y);                              // 22
[x, , y] = num;
console.log(x);                             // 11
console.log(y);                             // 33

When destructuring array, It'll return the value of the index as per left key indexing. And yes, we're not creating any array when writing like [x,y] on the left side. I know, it seems strange but even I was confused earlier.

// Object
{name} = {
    name: "Audi",
    model: "A8",
    price: "1.5 cr"
}

console.log(name);                          // "Audi"
console.log(age);                           // undefined
// Above output will be undefined as age is not destructured and aligned with the same key

You can see above that age is returning undefined as It's not destructured and aligned with the same key.

That's it for this article folks. 🙏Thanks For Reading !