DEV Community: Haris Shaikh

A Comprehensive Guide: Installing Apache CouchDB on Ubuntu & Debian Servers 2024

Haris Shaikh — Tue, 05 Mar 2024 18:11:02 +0000

Apache CouchDB is a popular open-source NoSQL database system known for its flexibility, scalability, and ease of use. With its document-oriented approach and distributed architecture, CouchDB has become a favored choice for developers and organizations handling large volumes of data. If you’re considering deploying CouchDB on your Ubuntu or Debian server, you’re in the right place. In this guide, we’ll walk you through the step-by-step process of installing CouchDB on both Ubuntu and Debian systems.

Step 1: Update Your System

Before we begin, it’s essential to ensure that your system is up-to-date. Open a terminal window and execute the following commands:

Step 2: Enable CouchDB Repository

CouchDB is not available in the default Ubuntu or Debian repositories, so we have to add its repository manually.

First, we need to install some dependencies to add a new repository over HTTPS:

Now we add the CouchDB GPG key:

After adding the GPG key, you need to add the CouchDB repository:

Now, update the system again:

Step 3: Install CouchDB

After adding the repository, it’s time to install CouchDB:

During the installation, you’ll be asked a series of questions. First, it will ask you to choose the type of CouchDB installation. You can select either “standalone” or “clustered”. For a basic, single-server setup, you’ll choose “standalone”.

Next, you’ll be asked to confirm the network interface for CouchDB to bind on. If you’re just using this server for development and not making it available to the network, enter 127.0.0.1. If you are making it available to the network, enter 0.0.0.0.

Then, you’ll need to set up the admin username and password. Make sure to pick a secure password.

After running installation command if it did not display above mentioned options then we can manually bind our server IP and set the password for admin user by adding following line in /opt/couchdb/etc/local.ini and /opt/couchdb/etc/local.d/10-admins.ini files respectively.

Do not forget to restart your CouchDB server:

Step 4: Verify the Installation

Once CouchDB is installed, you can check if it’s running with the following command:

If CouchDB is running correctly, you’ll see a response like this:

You can also have a look at the status of running CouchDB server:

Step 5: CouchDB web Interface

You can access the CouchDB web interface by opening a web browser and visiting http://127.0.0.1:5984/_utils/ (replace local IP with you server IP if your are running it in production environment).

Conclusion:

Installing Apache CouchDB on Ubuntu and Debian servers is a simple yet essential process for developers and system administrators looking to leverage the capabilities of this NoSQL database system. By following the steps outlined in this guide, you can quickly set up CouchDB and start building innovative applications with confidence.

Don’t forget to follow me on social media platforms for more insightful content.
https://www.linkedin.com/in/compilerharris/
https://github.com/compilerharris
https://medium.com/@compilerharris

Mastering Full-Stack Deployment: A Guide to Hosting React and Nest Apps on Linux (Ubuntu 20) Server in 2024

Haris Shaikh — Fri, 23 Feb 2024 15:26:12 +0000

In the dynamic landscape of web development, deploying a full-stack application with separate frontend and backend components is a common scenario. As we step into 2024, the need for efficient deployment strategies remains paramount. In this blog post, we will explore the process of deploying React and Nest apps together on a Linux (Ubuntu 20) server. By following these steps, you can seamlessly host your frontend and backend applications, ensuring smooth operation and enhanced performance.

Note: As of writing this blog, I am using Node.js version 18. Please ensure compatibility with your environment or adjust accordingly. Additionally, while Node.js version 21 has been launched, it’s essential to verify compatibility and consider upgrading for optimal performance and security.

Step 1: Install Apache2

Apache2 serves as the web server for hosting our applications. Install it using the following command:

Step 2: Allow UFW Apache2

Ensure that the firewall allows Apache2 traffic by running:

Step 3: Create and Configure sites-available Conf File

Navigate to the /etc/apache2/sites-available directory and create configuration files for both the React and Nest apps. Configure the VirtualHost settings accordingly.

Sample React App Configuration (react-app.conf):

Sample Nest App Configuration (nest-app.conf):

Step 4: Enable Both the Sites

Enable the sites by creating symbolic links in the /etc/apache2/sites-enabled directory:

Do not forget to restart Apache2 Services via service apache2 restart command on terminal.

Step 5: Install Node.js and npm

Node.js and npm are essential for building and running our applications. Install them using:

Step 6: Build React App

Clone the React app at /var/www/your-react-app/ from Git and navigate into its directory.
Run npm run build to generate the production build.

As I already set the path to the build folder in Apache2 configuration file.
Additionally, .htaccess file that you can use to configure Apache to handle routing for a React application, ensuring that requests to inner pages are correctly routed to your React app's entry point (index.html):

Save this file as .htaccess in the root directory of your React application. This configuration instructs Apache to rewrite requests that do not match an existing file or directory to index.html, allowing React Router to handle the routing internally.

With this .htaccess file and Apache configuration, your React application should handle internal routing correctly, allowing users to access inner pages directly or refresh them without encountering 404 errors.

Step 7: Build Nest App

Clone the Nest app at /var/www/your-nest-app/ from Git and navigate into its directory.
Run the build command as specified in your project’s configuration. Here I am using nest build basic command to build my nest app.
Install PM2 to manage the Node.js process:

Start the Nest app using PM2 and specify a name:

Save the process list to ensure persistence across reboots:

Monitor the logs for debugging purposes:

Step 8: Use sudo if You are not an Admin
When executing commands that require administrative privileges, prepend them with sudo.

Step 9: Install SSL Certificate

Securing your applications with SSL certificates is crucial for data privacy and security. Install SSL certificates using Let’s Encrypt or any other trusted certificate authority.

Conclusion

Deploying React and Nest apps together on a Linux server provides a robust foundation for building modern web applications. By following the outlined steps, you can effectively host both frontend and backend components, ensuring scalability, reliability, and enhanced user experience. Embrace the power of full-stack development and elevate your projects to new heights in 2024 and beyond.

Don’t forget to follow me on social media platforms for more insightful content.
https://www.linkedin.com/in/compilerharris/
https://github.com/compilerharris
https://medium.com/@compilerharris

Empower Your Nest Project: Bringing it Online in Your Local Network

Haris Shaikh — Thu, 15 Feb 2024 09:44:44 +0000

In the ever-evolving landscape of web development, Node.js has emerged as a powerhouse for building scalable and efficient server-side applications. Among the plethora of frameworks available for Node.js, Nest.js stands out for its modularity, flexibility, and TypeScript support. If you’re venturing into the world of Nest.js and want to run your project on a local network for testing or demonstration purposes, you’re in the right place. In this guide, we’ll walk you through the steps to run a Nest project on your local network.

Step 1: Set Up Your Nest Project

Before diving into networking configurations, ensure you have a Nest.js project set up on your local machine. If you haven’t already, you can create a new Nest.js project using the Nest CLI (Command Line Interface) by running:

Step 2: Configure the Network Settings

By default, a Nest.js application binds to localhost (127.0.0.1), which means it’s only accessible from the local machine. To make it accessible on your local network, you need to configure the server to listen on your machine’s IP address.

Open the main.ts file in your Nest project's src directory. Look for the app.listen() method call. By default, it might look something like this:

Modify the app.listen() method to specify the IP address and port you want your Nest application to listen on. For example:

Here, '0.0.0.0' tells the application to listen on all available network interfaces.

Step 3: Run Your Nest Project

Once you’ve made the necessary changes, save the main.ts file and start your Nest.js application by running:

Your Nest project is now running and accessible on your local network.

Step 4: Access Your Nest Application

To access your Nest application from another device on the same local network, you’ll need to know the IP address of the machine running the Nest project. You can find this by running ipconfig (Windows) or ifconfig (Unix-based systems) in your terminal.

Once you have the IP address, open a web browser on another device connected to the same network and enter the IP address followed by the port number your Nest application is running on. For example:

Replace your-ip-address and port-no with the actual IP address of your machine and the port number on which the project is running, respectively.

Congratulations! You’ve successfully run your Nest.js project on your local network. Now you can test your application across different devices or showcase it to others within your local network environment.

Conclusion

Running a Nest project on your local network is a fundamental skill for any developer working with Node.js and Nest.js. By following the steps outlined in this guide, you can easily configure your Nest application to be accessible across devices within your local network, facilitating testing, collaboration, and demonstration of your projects. So go ahead, experiment, and build amazing applications with Nest.js!

Don’t forget to follow me on social media platforms for more insightful content.
https://www.linkedin.com/in/compilerharris/
https://github.com/compilerharris
https://medium.com/@compilerharris

Frontend Trailblazers: A Complete Roadmap for Frontend Developers in 2024

Haris Shaikh — Sun, 28 Jan 2024 14:18:11 +0000

Introduction:

In the fast-paced world of web development, staying current with the latest tools, technologies, and best practices is essential for frontend developers. As we embark on the journey into 2024, the roadmap for frontend developers continues to evolve, presenting new challenges and exciting opportunities. In this blog post, we’ll explore the comprehensive roadmap that awaits frontend developers in 2024, covering key skills, emerging technologies, and industry trends that will shape the landscape.

Learn the basics — HTML

Basics:

HTML (Hypertext Markup Language) serves as the foundation for creating web pages, providing a structured and semantic markup that browsers interpret to render content.

Here, I am listing some fundamental concepts of HTML:

Document Structure
Tags and Elements
Attributes
Text Content
Lists
Links and Anchors
Images
Forms
Headings and Semantic Elements
Comments

Emmet:

Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist.

SEO:

HTML plays a crucial role in optimizing a website for search engines.

Here are some fundamental HTML SEO basics to consider:

Title Tags
Meta Descriptions
Header Tags (H1, H2, H3, etc.)
URL Structure
Image Alt Attributes
Canonical Tags
Structured Data Markup (Schema.org)
Mobile-Friendly (Responsive) Design
HTML Sitemap
Robots Meta Tag

Learn the basics — CSS

Cascading Style Sheets (CSS) is a fundamental technology used in web development to control the presentation and styling of HTML documents. CSS enables developers to define the layout, colors, fonts, and other visual aspects of a webpage, ensuring a consistent and aesthetically pleasing user experience.

Here are some basic concepts of CSS:

Selectors and Declarations
Box Model
Color and Typography
Flexbox and Grid Layouts
Responsive Design
Transitions and Animations
Positioning
Selectors and Specificity
Vendor Prefixes and Browser Compatibility
Media Queries
Pseudo Elements
Pseudo Classess
Animations

Learn the basics — JS

Frontend Trailblazers: A Complete Roadmap for Frontend Developers in 2024

Haris Shaikh — Sun, 28 Jan 2024 14:18:08 +0000

Introduction:

Learn the basics — HTML

Basics:

HTML (Hypertext Markup Language) serves as the foundation for creating web pages, providing a structured and semantic markup that browsers interpret to render content.

Here, I am listing some fundamental concepts of HTML:

Document Structure
Tags and Elements
Attributes
Text Content
Lists
Links and Anchors
Images
Forms
Headings and Semantic Elements
Comments

Emmet:

Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist.

SEO:

HTML plays a crucial role in optimizing a website for search engines.

Here are some fundamental HTML SEO basics to consider:

Title Tags
Meta Descriptions
Header Tags (H1, H2, H3, etc.)
URL Structure
Image Alt Attributes
Canonical Tags
Structured Data Markup (Schema.org)
Mobile-Friendly (Responsive) Design
HTML Sitemap
Robots Meta Tag

Learn the basics — CSS

Here are some basic concepts of CSS:

Selectors and Declarations
Box Model
Color and Typography
Flexbox and Grid Layouts
Responsive Design
Transitions and Animations
Positioning
Selectors and Specificity
Vendor Prefixes and Browser Compatibility
Media Queries
Pseudo Elements
Pseudo Classess
Animations

Learn the basics — JS

JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.

Here, I am making a list of primary elements of JS:

Basic syntax
DOM Manipulation
Fetch API/Ajax
Async Await
Event Listeners
ES6 + JavaScript
Promises
Classes
Array Methods
Scoping
Hoisting
Closures

I would recommend to learn the basics of TypeScript as well.

Learn Any CSS Framework

These are the most popular ones:

Tailwind CSS

Tailwind CSS takes a different approach compared to traditional CSS frameworks. It provides low-level utility classes that you can use directly in your HTML markup. This utility-first approach allows for more flexibility and customization. Tailwind CSS has gained popularity for its simplicity and efficiency in creating modern, design-system-driven interfaces.

Bootstrap

Bootstrap is perhaps the most well-known and widely used CSS framework. Developed by X, Bootstrap provides a responsive grid system, pre-designed components, and a set of styles for creating modern and mobile-friendly web applications. It’s highly customizable and has a large and active community, making it a go-to choice for many developers.

Materialize

Materialize CSS is a modern and responsive CSS framework based on Google’s Material Design guidelines. Designed to facilitate the development of clean and visually appealing user interfaces, Materialize CSS provides a comprehensive set of pre-styled components, including buttons, cards, navigation bars, and modals, to name a few. It incorporates the principles of Material Design, featuring smooth animations, vibrant colors, and a cohesive design language. With a straightforward and intuitive syntax, developers can easily implement Materialize CSS into their projects, ensuring a consistent and polished look across various devices. The framework’s grid system and responsive utilities make it suitable for building mobile-friendly and responsive web applications, and it continues to be a popular choice for developers seeking a visually appealing and feature-rich CSS framework.

Learn any CSS preprocessor

What is a CSS preprocessor? CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.

Here are some most popular CSS preprocessors:

SCSS/ SASS (Syntactically Awesome Stylesheets):

Sass is a powerful CSS preprocessor that extends the capabilities of standard CSS. It introduces features like variables, nesting, and mixins, allowing developers to write cleaner and more maintainable stylesheets. Sass supports both the original Sass syntax (with indentation) and SCSS, a syntax closer to CSS. The ability to modularize code and reuse styles across different elements makes Sass a popular choice for large-scale projects.

PostCSS:

While not a preprocessor in the traditional sense, PostCSS is a tool that transforms CSS using plugins. Developers can leverage PostCSS to enhance their stylesheets with various features like autoprefixing, linting, and minification. It acts as a versatile and modular toolset, allowing developers to tailor their CSS processing pipeline based on project requirements. PostCSS complements existing preprocessors and provides a flexible approach to extending and optimizing stylesheets.

Less (Leaner Style Sheets):

Less is another CSS preprocessor that simplifies and enhances the authoring of stylesheets. With features such as variables, nesting, and mixins, Less provides a more dynamic and organized approach to styling. It is compatible with existing CSS code, allowing developers to gradually introduce Less features into their projects. Less also facilitates the creation of maintainable and efficient stylesheets, making it a valuable tool in the web development toolbox.

Stylus:

Stylus is a lightweight and expressive CSS preprocessor that embraces a minimalist syntax. Its flexibility allows developers to choose their preferred indentation style and omit certain syntax conventions. Stylus supports powerful features like variables, functions, and conditional statements, offering a concise and readable way to write styles. Its emphasis on simplicity and extensibility makes Stylus an attractive option for those seeking a customizable and efficient styling solution.

Learn Basic use of Version Control System

Git:

Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers who are collaboratively developing source code during software development.

Github:

Github is an AI-powered developer platform that allows developers to create, store, manage and share their code in the form of repositories.

Learn the basics of Package Managers

npm:

Npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js and is included as a recommended feature in the Node.js installer.

Yarn

Yarn is one of the main JavaScript package managers, developed in 2016 by Sebastian McKenzie of Meta for the Node.js JavaScript runtime environment.

Pick a JavaScript Framework / Library

The most popular ones are:

React:

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.

Vue:

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Angular:

Angular is a TypeScript-based, free and open-source single-page web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Svelte:

Svelte is a free and open-source front-end component framework and language created by Rich Harris and maintained by the Svelte core team members.

Meteor:

Meteor, or MeteorJS, is a partly proprietary, mostly free and open-source isomorphic JavaScript web framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform code.

I am choosing React as a JavaScript library to continue with

Learn Basics of React

Components
JSX
Props
State
Events
Hooks
Conditional Rendering
UseState
UseEffect
UseRef
UseContext
UseReducer
UseMemo
UseCallback

Learn some of the React UI Framework

Material UI
Ant Design
Chakra UI
React Bootstrap
Rebass
Blueprint
Semantic UI React

I would recommend Material UI, Ant Design and Chakra UI.

Learn to use popular React Packages

React Router
React Query
Axios
React Hook Form
Styled Components
Storybook
Framer Motion

Learn how to manage state in React with state management tools

Redux
MobX
Hookstate
Recoil
Akita

I would recommend Redux.

Things to learn after learning React

Next JS

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

Gatsby

Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX, images, and numerous Content Management Systems such as WordPress, Drupal and more.

React Native

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.

Electron

Electron is a free and open-source software framework developed and maintained by OpenJS Foundation. The framework is designed to create desktop applications using web technologies that are rendered using a version of the Chromium browser engine and a back end using the Node.js runtime environment.

I am selecting Next JS

Important things to learn:

Static Site Generation
Server Side Rendering
Incremental Static Generation
Dynamic Pages
CSS/SASS Modules
Lazy Loading Modules
API Routes

Learn to test you apps with some of these Libraries / Frameworks

Jest

Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase

Testing Library

The Testing Library family of libraries is a very light-weight solution for testing without all the implementation details.

Cypress

Cypress is a frontend test automation tool for regression testing of web applications. Cypress runs on Windows, Linux, and macOS.

Enzyms

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output.

Jasmine

Jasmine is an open-source testing framework for JavaScript. It aims to run on any JavaScript-enabled platform, to not intrude on the application nor the IDE, and to have easy-to-read syntax.

Mocha

Mocha is a JavaScript test framework for Node.js programs, featuring browser support, asynchronous testing, test coverage reports, and use of any assertion library.

Learn to deploy your websites

Some free popular service

Netlify
Vercel
Firebase
Github Pages
Render

Conclusion:

The frontend developer roadmap in 2024 is multifaceted, encompassing a broad spectrum of technologies and best practices. By mastering core fundamentals, staying current with emerging technologies, and embracing a mindset of continuous learning, frontend developers can navigate the evolving landscape with confidence. As you embark on this roadmap, remember that adaptability, curiosity, and a commitment to excellence will be your greatest assets in shaping the future of frontend development.

Follow Me:
https://www.linkedin.com/in/compilerharris/
https://github.com/compilerharris
https://medium.com/@compilerharris

Future-Ready Frontend: Exploring Next.js in the Year 2024

Haris Shaikh — Thu, 25 Jan 2024 10:41:20 +0000

Introduction

As we step into 2024, the landscape of web development continues to evolve, and Next.js, the React framework for building web applications, stands at the forefront of this transformation. In this blog post, we will closely examine four of the top features of Next.js in 2024, delving into the latest advancements, features, and trends that solidify its position as a compelling choice for developers navigating the dynamic world of front-end development.

1. Server Rendering:

Server rendering, also known as server-side rendering (SSR), is a technique used in web development to improve the initial loading performance and search engine optimization (SEO) of web pages. It involves rendering the web page content on the server and sending the fully rendered HTML to the client’s browser, as opposed to the traditional approach of sending a bare-bones HTML document and relying on client-side JavaScript to render the content.

2. Turbopack:

Turbopack (beta) is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.

Usage:

Turbopack can be used in Next.js in both the pages and app directories for faster local development. To enable Turbopack, use the --turbo flag when running the Next.js development server.

{ "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint" } }

Supported Features

To learn more about the currently supported features for Turbopack, view the documentation.

Reference

3. Automatic Code Splitting

What is Automatic Code Splitting?

Automatic Code Splitting is a technique used in web development to improve performance. In the context of Next.js, it refers to the framework’s ability to automatically divide your application’s JavaScript code into smaller chunks or bundles. This process ensures that only the JavaScript necessary for the current view or page is loaded, significantly reducing load times.

Why is Code Splitting Essential?

In traditional web development, the entire JavaScript bundle is often loaded upfront, regardless of the user’s immediate need. This can lead to slower page load times, negatively impacting user experience and search engine rankings. Code splitting mitigates this by ensuring users download only what they need, when they need it.

Benefits of Automatic Code Splitting

Improved Load Times: By loading only the necessary code, code splitting significantly reduces the initial load time of your web application.
Enhanced User Experience: Faster load times lead to a smoother, more responsive user experience.
SEO Advantages: Page speed is a crucial factor in SEO rankings. Code splitting can contribute to better SEO performance.

Best Practices

Analyze Bundle Size: Regularly check the size of your JavaScript bundles and look for opportunities to optimize them.
Prioritize Content: Identify which components are essential for initial rendering and which can be loaded dynamically.

Reference

4. Fast Refresh

Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

How It Works

If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.
If you edit a file with exports that aren’t React components, Fast Refresh will re-run both that file, and the other files importing it. So if both Button.js and Modal.js import theme.js, editing theme.js will update both components.
Finally, if you edit a file that’s imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way.

Error Resilience

Syntax Errors

If you make a syntax error during development, you can fix it and save the file again. The error will disappear automatically, so you won’t need to reload the app. You will not lose component state.

Runtime Errors

If you make a mistake that leads to a runtime error inside your component, you’ll be greeted with a contextual overlay. Fixing the error will automatically dismiss the overlay, without reloading the app.

Component state will be retained if the error did not occur during rendering. If the error did occur during rendering, React will remount your application using the updated code.

If you have error boundaries in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a rendering error. This means having an error boundary can prevent you from always getting reset to the root app state. However, keep in mind that error boundaries shouldn’t be too granular. They are used by React in production, and should always be designed intentionally.

Limitations

Fast Refresh tries to preserve local React state in the component you’re editing, but only if it’s safe to do so. Here’s a few reasons why you might see local state being reset on every edit to a file:

Local state is not preserved for class components (only function components and Hooks preserve state).
The file you’re editing might have other exports in addition to a React component.
Sometimes, a file would export the result of calling a higher-order component like HOC(WrappedComponent). If the returned component is a class, its state will be reset.
Anonymous arrow functions like export default () => ; cause Fast Refresh to not preserve local component state. For large codebases you can use our name-default-component codemod.

As more of your codebase moves to function components and Hooks, you can expect state to be preserved in more cases.

Tips

Fast Refresh preserves React local state in function components (and Hooks) by default.
Sometimes you might want to force the state to be reset, and a component to be remounted. For example, this can be handy if you’re tweaking an animation that only happens on mount. To do this, you can add // @refresh reset anywhere in the file you're editing. This directive is local to the file, and instructs Fast Refresh to remount components defined in that file on every edit.
You can put console.log or debugger; into the components you edit during development.
Remember that imports are case sensitive. Both fast and full refresh can fail, when your import doesn’t match the actual filename. For example, './header' vs './Header'.

Fast Refresh and Hooks

When possible, Fast Refresh attempts to preserve the state of your component between edits. In particular, useState and useRef preserve their previous values as long as you don't change their arguments or the order of the Hook calls.

Hooks with dependencies — such as useEffect, useMemo, and useCallback—will always update during Fast Refresh. Their list of dependencies will be ignored while Fast Refresh is happening.

For example, when you edit useMemo(() => x * 2, [x]) to useMemo(() => x * 10, [x]), it will re-run even though x (the dependency) has not changed. If React didn't do that, your edit wouldn't reflect on the screen!

Sometimes, this can lead to unexpected results. For example, even a useEffect with an empty array of dependencies would still re-run once during Fast Refresh.

However, writing code resilient to occasional re-running of useEffect is a good practice even without Fast Refresh. It will make it easier for you to introduce new dependencies to it later on and it's enforced by React Strict Mode, which we highly recommend enabling.

Reference

Conclusion:

Next.js in 2024 is poised to be a robust and feature-rich framework, catering to the evolving needs of front-end developers. With a focus on performance, developer experience, and integration of emerging web technologies, Next.js continues to empower developers to build modern, scalable, and performant web applications. As you embark on your web development journey in 2024, exploring the capabilities of Next.js is sure to be an exciting and rewarding experience.

Follow Me:

LinkedIn
Github
Medium

Navigating the Depths: Demystifying the Request Lifecycle in NestJS

Haris Shaikh — Wed, 24 Jan 2024 08:26:26 +0000

Introduction:

NestJS, a powerful and modular Node.js framework, has gained widespread popularity for building scalable and maintainable server-side applications. At the core of NestJS lies a well-defined request lifecycle, orchestrating the flow of HTTP requests from initiation to response. In this blog post, we’ll embark on a journey to unravel the intricacies of the NestJS request lifecycle, exploring each stage and understanding how it contributes to the framework’s robustness.

Request lifecycle

Nest applications handle requests and produce responses in a sequence we refer to as the request lifecycle. With the use of middleware, pipes, guards, and interceptors, it can be challenging to track down where a particular piece of code executes during the request lifecycle, especially as global, controller level, and route level components come into play. In general, a request flows through middleware to guards, then to interceptors, then to pipes and finally back to interceptors on the return path (as the response is generated).

Middleware

Middleware is executed in a particular sequence. First, Nest runs globally bound middleware (such as middleware bound with app.use) and then it runs module bound middleware, which are determined on paths. Middleware are run sequentially in the order they are bound, similar to the way middleware in Express works. In the case of middleware bound across different modules, the middleware bound to the root module will run first, and then middleware will run in the order that the modules are added to the imports array.

Guards

Guard execution starts with global guards, then proceeds to controller guards, and finally to route guards. As with middleware, guards run in the order in which they are bound. For example:

@UseGuards(Guard1, Guard2)
@Controller('cats')
export class CatsController {
  constructor(private catsService: CatsService) {}

  @UseGuards(Guard3)
  @Get()
  getCats(): Cats[] {
    return this.catsService.getCats();
  }
}

Guard1 will execute before Guard2 and both will execute before Guard3.

HINT: When speaking about globally bound vs controller or locally bound, the difference is where the guard (or other component is bound). If you are using app.useGlobalGuard() or providing the component via a module, it is globally bound. Otherwise, it is bound to a controller if the decorator precedes a controller class, or to a route if the decorator proceeds a route declaration.

Interceptors

Interceptors, for the most part, follow the same pattern as guards, with one catch: as interceptors return RxJS Observables, the observables will be resolved in a first in last out manner. So inbound requests will go through the standard global, controller, route level resolution, but the response side of the request (i.e., after returning from the controller method handler) will be resolved from route to controller to global. Also, any errors thrown by pipes, controllers, or services can be read in the catchError operator of an interceptor.

Pipes

Pipes follow the standard global to controller to route bound sequence, with the same first in first out in regards to the @UsePipes() parameters. However, at a route parameter level, if you have multiple pipes running, they will run in the order of the last parameter with a pipe to the first. This also applies to the route level and controller level pipes. For example, if we have the following controller:

@Controller('cats')
export class CatsController {
  constructor(private catsService: CatsService) {}

  @UsePipes(RouteSpecificPipe)
  @Patch(':id')
  updateCat(
    @Body() body: UpdateCatDTO,
    @Param() params: UpdateCatParams,
    @Query() query: UpdateCatQuery,
  ) {
    return this.catsService.updateCat(body, params, query);
  }
}

then the GeneralValidationPipe will run for the query, then the params, and then the body objects before moving on to the RouteSpecificPipe, which follows the same order. If any parameter-specific pipes were in place, they would run (again, from the last to first parameter) after the controller and route level pipes.

Filters

Filters are the only component that do not resolve global first. Instead, filters resolve from the lowest level possible, meaning execution starts with any route bound filters and proceeding next to controller level, and finally to global filters. Note that exceptions cannot be passed from filter to filter; if a route level filter catches the exception, a controller or global level filter cannot catch the same exception. The only way to achieve an effect like this is to use inheritance between the filters.

HINT: Filters are only executed if any uncaught exception occurs during the request process. Caught exceptions, such as those caught with a try/catch will not trigger Exception Filters to fire. As soon as an uncaught exception is encountered, the rest of the lifecycle is ignored and the request skips straight to the filter.

Conclusion:

Understanding the request lifecycle in NestJS is fundamental for building robust and efficient server-side applications. Each phase of the lifecycle contributes to the framework’s modular and extensible nature, allowing developers to implement complex features while maintaining code organization and readability. As you delve into the world of NestJS development, a solid grasp of the request lifecycle will empower you to build scalable and maintainable applications with confidence.

Reference: https://docs.nestjs.com/faq/request-lifecycle

Follow Me:

LinkedIn
GitHub
Medium

Unveiling the Role of a Backend Developer in 2024: Architecting the Digital Backbone

Haris Shaikh — Tue, 23 Jan 2024 13:24:19 +0000

Introduction:

In the ever-evolving landscape of web development, the role of a backend developer plays a crucial part in bringing digital experiences to life. Often working behind the scenes, these architects of the digital realm are responsible for crafting the backbone of applications, ensuring they run seamlessly, securely, and efficiently. In this blog post, we’ll delve into the world of backend development, exploring the skills, responsibilities, and the vital role these developers play in shaping the digital landscape.

Understanding the Backend:

Definition and Scope:

A backend developer is a professional responsible for building and maintaining the server-side of web applications. While frontend developers focus on the user interface and client-side interactions, backend developers work on the server-side logic, databases, and server infrastructure.

Languages and Technologies:

Backend developers work with a variety of programming languages, each suited for different tasks. Common backend languages include Javascript, Python, Java, Node.js, and PHP. They also interact with databases such as MySQL, PostgreSQL, MongoDB, CouchDB, and design server architecture using frameworks like Django, Flask, Spring, Nest, or Express.

The Responsibilities of a Backend Developer:

Server-Side Logic:
Backend developers design and implement the server-side logic that powers the application. This includes handling user requests, processing data, and managing the overall functionality of the software.

Database Management:

Managing and interacting with databases is a fundamental aspect of backend development. Developers design and optimize database schemas, write queries, and ensure efficient data storage and retrieval.

API Development:

Backend developers create Application Programming Interfaces (APIs) that allow different parts of a system to communicate with each other. This is crucial for enabling communication between the frontend and backend, as well as integrating third-party services.

Security:

Backend developers play a pivotal role in ensuring the security of an application. They implement authentication and authorization mechanisms, encrypt sensitive data, and protect against common web vulnerabilities like SQL injection and Cross-Site Scripting (XSS).

Scalability and Performance:

Ensuring that an application can handle a growing number of users is a key responsibility of backend developers. They optimize code, use caching mechanisms, and design scalable architecture to enhance the performance of the system.

The Skill Set of a Backend Developer:

Programming Proficiency:

Backend developers must be proficient in one or more programming languages, depending on the requirements of the project. This includes understanding data structures, algorithms, and writing efficient code.

Database Management Skills:

Knowledge of database systems is crucial. Backend developers should be adept at designing database schemas, writing efficient queries, and ensuring data consistency.

Server and Infrastructure Knowledge:

Understanding server architecture, deployment, and infrastructure management is essential. Backend developers work with cloud platforms like AWS, Azure, or Google Cloud, ensuring the application is hosted securely and efficiently.

Version Control:

Proficiency with version control systems such as Git is vital for collaboration and code management. Backend developers need to work seamlessly with other team members and contribute to the overall codebase.

Conclusion:

In the dynamic world of web development, backend developers serve as the architects who lay the foundation for digital experiences. Their expertise in server-side logic, database management, security, and scalability ensures that applications not only function seamlessly but also deliver a robust and secure user experience. As technology continues to advance, the role of backend developers remains at the forefront, shaping the digital landscape and driving innovation in the world of software development.

Decoding the Enigma: A Full Stack Developer’s Guide to Understanding Existing Code

Haris Shaikh — Tue, 23 Jan 2024 10:24:09 +0000

Introduction:

As a full-stack developer, one of the key skills you need in your toolkit is the ability to understand and work with existing code. Whether you’re joining a new project, collaborating with other developers, or maintaining legacy systems, the ability to decipher and navigate through already written code is crucial. In this blog post, we will explore strategies and tips to help you effectively understand and make sense of code written by others.

Start with a High-Level Overview:

Before diving into the nitty-gritty details of the codebase, it’s essential to get a high-level understanding of the project. Read any available documentation, study the project architecture, and familiarize yourself with the overall structure. Identify the main components, modules, and their relationships to grasp the bigger picture.

Analyze Dependencies:

Examine the project’s dependencies, libraries, and frameworks. Understanding the tools and technologies used will provide insights into the project’s design philosophy and coding conventions. Check for external libraries, APIs, and how data is managed within the application.

Read the Documentation:

If the project includes documentation, make sure to read it thoroughly. Documentation often provides valuable information about the purpose of specific modules, functions, and classes. It may also include guidelines on coding standards, project architecture, and important considerations.

Follow the Data Flow:

Trace the flow of data through the code. Identify how data is collected, processed, and presented. Understanding the data flow is crucial for comprehending the logic of the application. Pay special attention to input validation, data manipulation, and the points where data is persisted.

Explore Entry Points:

Identify the entry points of the application, such as main functions or entry routes. These are the starting points of execution and can give you insights into how the different parts of the application interact. Understanding the entry points is key to unraveling the control flow of the code.

Use Version Control History:

Leverage the power of version control systems (e.g., Git) to explore the code’s history. Check commit messages, pull requests, and issues to understand the reasoning behind specific changes. This can provide context and help you comprehend the evolution of the codebase over time.

Divide and Conquer:

Break down the code into manageable sections. Focus on understanding one module or function at a time. This approach makes it less overwhelming and allows you to delve into the details without getting lost in the entire codebase.

Investigate Error Messages:

If the codebase has encountered and resolved issues in the past, error messages and their resolutions can be excellent sources of information. Use error messages as clues to identify potential pain points and areas that may require closer inspection.

Debugging Techniques:

Use debugging tools to step through the code and observe its behavior at runtime. This hands-on approach can provide valuable insights into variable values, conditional branches, and the overall execution flow. Debugging helps in understanding the code’s behavior in a dynamic environment.

Communicate with the Team:

Don’t hesitate to reach out to the development team or the original authors for clarification. Communication is a powerful tool, and discussing the code with those who wrote it can offer invaluable insights. Ask questions, seek guidance, and collaborate to enhance your understanding.

Conclusion:

Mastering the art of understanding existing code is a skill that sets apart a proficient full-stack developer. By approaching the codebase systematically, leveraging documentation and version control, and employing debugging techniques, you can unravel the complexities of any project. Remember, the journey to understanding code is continuous, and with practice, you’ll become more adept at deciphering even the most intricate of codebases.