DEV Community: Shivam Pawar

How I Deployed a Vite React App to Azure Static Web App (SWA) Using Azure DevOps CI/CD

Shivam Pawar — Sat, 12 Apr 2025 14:32:26 +0000

Most deployment tutorials for React apps focus on GitHub Actions—but what if you’re using Azure DevOps CI/CD instead?

That was the case for me while deploying a Vite + React app to Azure Static Web Apps, so I documented the full process in a step-by-step guide on my blog.

Here’s a quick overview of what you’ll learn:

💡 What You'll Learn

✔ Push Your Code to Azure Repos.
✔ Create a Static Web App on Azure.
✔ Set Up Azure Pipeline for CI/CD.
✔ Add Deployment Token to Pipeline.

🛠 Tech Stack

➡ React + Vite frontend
➡ Azure
➡ Azure Static Web Apps (SWA)
➡ Azure DevOps Pipelines
➡ YAML

Read the Full Guide

I guide you through every step—from setting up the automated pipeline to achieving a seamless production deployment.

Read the full post here: How to Publish Your React App on Azure Static Web App Using Azure CI/CD

Got Questions?

If you run into issues or want to share your deployment setup, feel free to drop a comment here — always curious to learn better ways!

Manual deployments are cool... said no one ever.
Automate it, deploy it, sip your coffee like a DevOps boss.

Happy coding!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

Agentforce

Shivam Pawar — Thu, 28 Nov 2024 14:54:03 +0000

Optimizing Your React App: A Guide to Production-Ready Setup with Webpack, TypeScript, ESLint, and Prettier - 2024

Shivam Pawar — Sun, 30 Jun 2024 15:08:11 +0000

In this blog post, we'll cover everything you need to know to set up a React app that's ready for deployment.

GitHub Repo: https://github.com/shivam-pawar/sample-react-app

Prerequisites

Before we begin, make sure you have Node.js and npm (or yarn) installed on your machine.

Initialize a new project

Use your Command Line and navigate to the root folder of your project and enter



npm init

This will ask you some basic information like package name, author name, description, and license. With this info it will create a file called package.json

Install React and TypeScript

Install React and ReactDOM as dependencies:



npm install react react-dom

Install TypeScript and its types as dev dependencies:



npm install --save-dev typescript @types/react @types/react-dom

Set up Webpack

Install the necessary Webpack dependencies:



npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin webpack-merge ts-loader terser-webpack-plugin uglify-js

Your package.json will look like this:

Create a webpack folder at root/project level and inside that add these 3 config files.
1. webpack.common.js
2. webpack.config.js
3. webpack.dev.js
4. webpack.prod.js
Create a src folder at root/project level and inside that add these 2 files.
1. index.tsx
2. index.html
Copy paste below code in index.tsx



import React from "react";
import { createRoot } from "react-dom/client";

const App = () => {
  return <div>Hello, React!</div>;
};

const rootElement = document.getElementById("root") as Element;
const root = createRoot(rootElement);

root.render(<App />);

Copy paste below code in index.html



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Now lets update the webpack config files.

webpack.common.js



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

module.exports = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  output: {
    path: path.resolve(__dirname, "..", "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "..", "./src/index.html"),
    }),
  ],
  devServer: {
    static: "./dist",
  },
};

webpack.config.js



const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");

module.exports = (envVars) => {
  const { env } = envVars;
  const envConfig = require(`./webpack.${env}.js`);
  const config = merge(commonConfig, envConfig);
  return config;
};

webpack.dev.js



const webpack = require("webpack");

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
  devServer: {
    hot: true,
    open: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.name": JSON.stringify("development"),
    }),
  ],
};

webpack.prod.js



const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: "production",
  devtool: false,
  plugins: [
    new webpack.DefinePlugin({
      "process.env.name": JSON.stringify("production"),
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: TerserPlugin.uglifyJsMinify,
        extractComments: true,
        parallel: true,
        test: /\.(ts|js)x?$/,
        terserOptions: {
          compress: {
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
};

Update/replace the scripts section in your package.json file:



"scripts": {
    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
    "build": "webpack --config webpack/webpack.config.js --env env=prod"
  }

Setup TypeScript

At root/project level add tsconfig.json file and paste below config in it.



{
  "compilerOptions": {
    "target": "ES6",                                  
    "lib": [
      "DOM",
      "ESNext"
    ],                                        
    "jsx": "react-jsx",                               
    "module": "ESNext",                               
    "moduleResolution": "Node",                     
    "types": ["react", "react-dom", "@types/react", "@types/react-dom"],                                      
    "resolveJsonModule": true,                       
    "isolatedModules": true,                          
    "esModuleInterop": true,                            
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true                                
  }
}

Now your project folder and file structure will look like this:

Run the development server

In terminal/command prompt run below command to run your development server:



npm start

Your React app should now be running at http://localhost:8080.

Set up ESLint and Prettier

Install ESLint, Prettier, and the necessary plugins:



npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react

Create an .eslintrc.json file in the root of your project with the following configuration:



{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

Create a .prettierrc file in the root of your project with the following configuration:



{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": false,
  "printWidth": 100,
  "tabWidth": 2
}

Update the scripts section in your package.json file:



"scripts": {
    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
    "build": "webpack --config webpack/webpack.config.js --env env=prod",
    "lint": "eslint . --ext .ts,.tsx --fix"
  }

Run ESLint to check for any linting issues:



npm run lint

Your final package.json will look like this:

Your final folder structure will look like this:

Conclusion

By following this guide, you now have a production-ready React application setup with Webpack, TypeScript, ESLint and Prettier. This setup provides a solid foundation for building scalable and maintainable React applications with best practices in place.
Remember to keep your dependencies up-to-date and continue learning about these tools to optimize your development workflow further.
Happy coding!❤️

If you found this article useful, please share it with your friends and colleagues!

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

Configure PurgeCSS with Parcel

Shivam Pawar — Wed, 06 Mar 2024 16:28:49 +0000

Introduction

When building modern web applications, optimizing performance is paramount. One crucial aspect is minimizing the size of our CSS files to enhance loading times. Parcel, a blazing-fast web application bundler, offers an inbuilt feature to remove unused CSS. However, in certain scenarios, this feature might not suffice. In this guide, we'll delve into configuring PurgeCSS with Parcel to achieve even greater CSS optimization.

Why Avoid Parcel's Inbuilt Unused CSS Remover:

While Parcel's inbuilt unused CSS remover is convenient, it operates effectively when styles are imported as modules. In scenarios where styles are dynamically generated or loaded, such as with dynamic class names or third-party libraries, Parcel's remover might fall short.

Configuring PurgeCSS with Parcel:

To harness the power of PurgeCSS alongside Parcel, we need to integrate it into our build process. Let's walk through the steps using a React.js application as an example.

Step 1: Install PurgeCSS and Parcel Plugin:

Ensure you have Parcel and PurgeCSS installed in your project:

npm install parcel-bundler @fullhuman/postcss-purgecss

Step 2: Configure Parcel to Use PurgeCSS:

Create a postcss.config.js file in the root directory of your project if you haven't already. Configure it to use PurgeCSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.jsx'], // Adjust according to your project structure
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

Step 3: Build Your Application:

Run Parcel to bundle your application for production:

parcel build index.html

Parcel will now leverage PurgeCSS to remove any unused CSS styles, resulting in a more optimized build.

My Personal Story:

In one of my projects, I encountered a significant challenge with bloated CSS files. Despite Parcel's built-in remover, the CSS file remained excessively large. Upon integrating PurgeCSS, the file size reduced dramatically, shaving off kilobytes and enhancing the application's loading speed noticeably.

In conclusion, while Parcel offers an inbuilt solution for removing unused CSS, integrating PurgeCSS enhances optimization, especially in scenarios where dynamic styles are prevalent.

Please do share your feedback and experiences with PostCSS in your web App. I’d love to see what you come up with!

If you found this article useful, please share it with your friends and colleagues ❤️

Read more articles on:
Dev.To ➡️ Shivam Pawar
Follow me on ⤵️
🌐 LinkedIn
🌐 Github

Happy coding!

Efficiently Managing Timers in a React Native App: Overcoming Background-Foreground Timer State Issues

Shivam Pawar — Thu, 27 Jul 2023 14:01:33 +0000

Introduction

Developing a React Native app often involves the use of timers, particularly setInterval, to trigger certain functions at regular intervals. While using timers might seem straightforward, managing them efficiently can become challenging, especially when dealing with background and foreground transitions in the app. In many mobile applications, especially productivity and task-oriented apps, session timers play a crucial role in managing user sessions effectively. Additionally, handling app state changes, such as going to the background or returning to the foreground, is essential for providing a seamless user experience.
This article aims to explore the common difficulties developers face when managing timers in React Native and provide solutions for effectively handling the timer state during background and foreground transitions. We will also dive into the implementation of the TimeTriggeredScheduler component, which handles session timers, background events, and more, using popular libraries such as Redux and AsyncStorage.

The Challenges

I faced the challenge of managing timers and ensuring they functioned correctly when the app transitioned between background and foreground states. Additionally, I needed a robust solution to clear timers from any screen to prevent memory leaks and optimize app performance.

Timer State Loss during Background Transition:
When a React Native app goes into the background, the JavaScript thread may be paused or even terminated by the operating system to save resources. As a result, any active timers, including setInterval, are lost. When the app returns to the foreground, the timer state must be restored appropriately to ensure the smooth functioning of the app.
Inaccurate Timer Execution:
React Native app developers might encounter situations where the setInterval timer execution becomes inconsistent or inaccurate, leading to unpredictable behaviour. This issue can arise due to various factors, including app lifecycle events, garbage collection, and asynchronous tasks.
Manage timers from any screen of the app:
Timers are commonly used to trigger specific actions, track session durations, or schedule periodic updates. However, ensuring timers are properly cleared and managed when navigating between screens can be challenging.

Efficient Timer Management Solutions

Utilize React Native AppState API: The AppState API in React Native provides information about the current state of the app, whether it is in the active, inactive, background, or foreground state. By subscribing to the AppState changes, you can implement logic to handle different app behaviours based on these state transitions. To start using the AppState API, you need to import it from the react-native library. The AppState module exposes three states: active, background, and inactive. By registering a listener with the AppState module, you can receive updates whenever the app transitions between these states.

import { useEffect, useRef } from "react";
import { AppState } from "react-native";
import moment from "moment";


function TimeTriggeredScheduler({ children }) {

  // Ref to store the current app state
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    // Load the timer when the component mounts and register the event listener for app state changes

  const subscription = AppState.addEventListener("change", (nextAppState) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === "active"
      ) {
        // Load the timer when the app returns to the foreground
        loadTimer();
      } 
      else if (nextAppState === "background" || nextAppState === "inactive") {
        // Save the timer value when the app goes to the background
        saveTimerValue();
      }

      // Update the current app state
      appState.current = nextAppState;
    });


    // Clean up the event listener on component unmount
    return () => {
      subscription.remove();
    };
  }, []);


  // Function to save the timer value to AsyncStorage when the app goes to the background

  const saveTimerValue = async () => {
    // Code to save the timer value to AsyncStorage
  };

  // Function to load the timer value from AsyncStorage when the app returns to the foreground

  const loadTimer = async () => {
    // Code to load the timer value from AsyncStorage
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Current App State: {appState}</Text>
    </View>
  );
}


export default TimeTriggeredScheduler;

Leveraging Redux to Manage Timers As the app's complexity grows, managing multiple timers across different screens becomes cumbersome. Having a centralized mechanism to clear timers from anywhere in the app is crucial to avoid memory leaks and ensure accurate time management. When the timer starts, we save the IntervalId of setInterval in the Redux store using the redux action. This allows us to access and clear the interval from anywhere in the app by retrieving the 'IntervalId' from the Redux store. Here is the code for your reference, you can change as per your requirement. The idea is only here to store IntervalId in store and fetch anywhere we want and finally clear the interval based on fetched IntervalId.

// Redux Action
const SET_CURRENT_INTERVAL_ID = "SET_CURRENT_INTERVAL_ID";


// Redux Reducer
const initialState = {
  currentIntervalId: null,
};


function timerReducer(state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_INTERVAL_ID:
      return { ...state, currentIntervalId: action.payload };
    default:
      return state;
  }
}


// Action Creator to set the currentIntervalId in Redux
const setCurrentIntervalID = (intervalId) => ({
  type: SET_CURRENT_INTERVAL_ID,
  payload: intervalId,
});


// Timer Component
import { useDispatch, useSelector } from "react-redux";


function TimerComponent() {
  const dispatch = useDispatch();
  const currentIntervalId = useSelector(
    (state) => state.timer.currentIntervalId
  );


  useEffect(() => {
    const intervalId = setInterval(() => {
      // Timer logic here
      console.log("Timer tick...");
    }, 1000);


    // Store the Interval ID in Redux
    dispatch(setCurrentIntervalID(intervalId));


    // Clear the Interval when the component unmounts
    return () => {
      clearInterval(intervalId);
      // Clear the Interval ID from Redux
      dispatch(setCurrentIntervalID(null));
    };
  }, []);


  // Other component logic here
  return <div>Timer Component</div>;
}

Conclusion

Efficiently managing setInterval in a React Native app requires careful consideration of background and foreground transitions. By using the AppState API and third-party background timer libraries, developers can ensure their timers function reliably and consistently. Understanding these techniques will lead to a smoother and more responsive user experience in React Native apps that involve timers. Remember to test your timer implementations thoroughly to account for various scenarios and edge cases that might arise during real-world usage.

Please do share your feedback and experiences with handling Timers in a React Native App. I’d love to see what you come up with!

If you found this article useful, please share it with your friends and colleagues ❤️

Read more articles on:
Dev.To ➡️ Shivam Pawar
Follow me on ⤵️
🌐 LinkedIn
🌐 Github

Happy coding!

Calculating Days in a Month with Timezones in JavaScript

Shivam Pawar — Thu, 22 Jun 2023 12:23:21 +0000

Intro

In today's world, accurately calculating dates and times in different timezones is crucial for developers. When it comes to figuring out the number of days in a month while considering timezones, things can get a little tricky. Luckily, JavaScript, a powerful programming language, provides us with handy tools and libraries to tackle these calculations effectively.

In this post I'll help you to determine the exact number of days in a month, while taking into account different timezones. Whether you're working on a global event scheduling system, building a calendar app, or need precise date calculations, understanding how to handle timezones in JavaScript is essential.

So, let's dive into the world of timezones and unravel the secrets of calculating days in a month using JavaScript in simple and easy-to-understand terms!

Understanding the Code

function getDaysInMonth(utcDate) {
  var date = new Date(utcDate);
  var month = date.getUTCMonth();
  var year = date.getUTCFullYear();
  var calculatedDate = new Date(Date.UTC(year, month + 1, 0));
  return calculatedDate.getUTCDate();
}

In this code snippet, the getDaysInMonth function takes a parameter utcDate, which represents a date in UTC format. It performs the following steps:

The provided utcDate is converted to a local timezone date object using new Date(utcDate).
The getUTCMonth() method is used to extract the month component (0-11) of the local timezone's date object.
Similarly, the getUTCFullYear() method retrieves the year component of the local timezone's date object.
The Date.UTC() method is invoked to create a new date object called calculatedDate. It takes the year, month (incremented by 1 to account for JavaScript's zero-based indexing, i.e., 0 - (January), and third 0 as parameters. By setting the day to 0, we retrieve the last day of the previous month.
Finally, the getUTCDate() method is used to extract the day component (1-31) of the calculatedDate object, representing the number of days in the specified month.

Example and Output

Let's consider an example to see the code in action. We'll use the following UTC date: "2023-04-01T00:00:00Z". By invoking the getDaysInMonth function with this date, we aim to determine the number of days in April 2023.

var utcDate = "2023-04-01T00:00:00Z";
var daysInMonth = getDaysInMonth(utcDate);
console.log(daysInMonth);

When we run this code, the output will be 30, indicating that April 2023 has 30 days.

Conclusion

Date calculations considering timezones are vital for developing global applications. JavaScript provides us with robust tools to tackle such challenges effectively. In this blog post, we explored a JavaScript code snippet that calculates the number of days in a month while accounting for timezones. By understanding the code's functionality, you can ensure accurate month calculations in your JavaScript applications, considering users across different regions.

Please do share your feedback and experiences with Dates in JavaScript in the comments section below. I’d love to see what you come up with!

If you found this article useful, please share it with your friends and colleagues! ❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

My personal portfolio website using Next.Js (Responsive)

Shivam Pawar — Sat, 23 Jul 2022 13:11:18 +0000

📢 Finally, after days of restless work, I am super excited to showcase the initial version of my personal portfolio website, learned so much and had so much fun while developing it.

It's made from scratch using the following Tools & Technologies:

✔ Design - Reactstrap / Bootstrap

✔ Framework - Next JS

✔ Libraries: reactjs, typescript, react-slick, remixicon

✔ CICD Platform - Vercel

✔ Hosting - Vercel

📱 The site is Mobile-friendly too!

Don't forget to check out "dark" 🌚 mode and "light" 🌞 mode.

📝Don't hesitate and don't forget to give me your feedback. It's important to me. ❤

🌐 Shivam Pawar

portfoliowebsite #websitedesign #websitedevelopment #nextjs #reactjs #css3 #html5 #bootstrap5 #vercel #devto #developercommunity

Setup Micro Frontend Application with React Js

Shivam Pawar — Sun, 24 Apr 2022 17:41:59 +0000

In this article we are going to setup a micro frontend application with well known CLI tool "create-mf-app" which is a bootstrap tool to setup Module Federation.

What is Micro Frontend?🤨

Micro-frontend designs break down a front-end application into little, semi-independent "microapps" that work together loosely. This can aid in the management of complex projects.

Setting up project

Now we are going to setup a project which contains two micro frontends and one container app which will hold the all micro frontend apps.
In this article we are focusing on only setting up project in React js only but we can have multiple framework.

Open a cmd/terminal where you are going to setup project and enter below command.



npx create-mf-app

If create-mf-app is already installed then it will directly prompt for application name and if not then it will ask to install it just simply enter 'y' and it will install it for you.

Once create-mf-app is installed, it will ask for the following info.

I created a Shell app and given port 3000 to run the application.

Lets create another micro app with name 'common-components-lib'
We will follow same step as above but just different port and name.

I created a Shell app and given port 3000 to run the application.

Now you need to move inside of each app and enter below command to build and run the app.
npm install && npm start

I recommend to open these 2 apps in two different cmd/terminal.

I created a common-components-lib app and given port 3001 to run the application.

Our basic idea behind creating these 2 app is that Shell will be our container for all the micro apps and common-components-lib will contains common components like Header, Footer, etc.

We will now open Folder in a Code editor. Mine Favorite editor is Visual Studio Code❤ but you can use code editor of your choice.

After opening it, your folder structure will look like this.

Note: make sure both apps are up and running on different ports.

Creating Components inside micro app

Now lets add one Header and Footer Component inside the common-components-lib app.

Create a Header Component and paste below code.



import React from 'react';
import './header.css';

function Header() {
  return (
    <div class="header">
      <a href="#default" class="logo">
        Header Component
      </a>
      <div class="header-right">
        <a class="active" href="#home">
          Home
        </a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
    </div>
  );
}

export default Header;

Also add one header.css file for styling the component.



.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

.header a.logo {
    font-size: 25px;
    font-weight: bold;
}

.header a:hover {
    background-color: #ddd;
    color: black;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

.header-right {
    float: right;
}

@media screen and (max-width: 500px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

Add Footer Component and header.css



import React from 'react';
import './footer.css';

function Footer() {
  return (
    <div class="footer">
      <p>Footer Component</p>
    </div>
  );
}

export default Footer;

add footer.css



.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    color: black;
    text-align: center;
}

Import Header and Footer Component in App Component.



import React from 'react';
import ReactDOM from 'react-dom';
import Footer from './Footer';
import Header from './Header';

import './index.css';

const App = () => (
  <>
    <Header />
    <Footer />
  </>
);
ReactDOM.render(<App />, document.getElementById('app'));

Our app will look like this after adding Header and Footer.

Exposing Components to remotes

Now lets expose these two components so that we can use it in Shell app.

Open webpack.config.js of common-components-lib and update code inside plugin like this:



new ModuleFederationPlugin({
      name: 'common_components_lib',
      filename: 'remoteEntry.js',
      remotes: {},
      exposes: {
        './Header': './src/Header.jsx',
        './Footer': './src/Footer.jsx',
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),

Note: We updated only "exposes".

Consume components in Shell app.

Now open webpack.config.js of Shell app and update code inside plugin.



const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

const deps = require('./package.json').dependencies;
module.exports = {
  output: {
    publicPath: 'http://localhost:3000/',
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      filename: 'remoteEntry.js',
      remotes: {
        common_components_lib:
          'common_components_lib@http://localhost:3001/remoteEntry.js',
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: './src/index.html',
    }),
  ],
};

Note: We updated only remote.

Make sure you use same name as the app name inside the plugin.
In our case app name is "common_components_lib" and "shell"

Render remote(Components from micro apps) in Shell App

Now its time to test our application by actually importing remote components in Shell application.

Inside App.jsx, import our Header and Footer components from common-components-lib app.



import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

const Header = React.lazy(() => import('common_components_lib/Header'));
const Footer = React.lazy(() => import('common_components_lib/Footer'));

import './index.css';

const App = () => (
  <>
    <Suspense fallback={<>Loading...</>}>
      <Header />
      <Footer />
    </Suspense>
  </>
);
ReactDOM.render(<App />, document.getElementById('app'));

Note: We used Lazy Loading to import the remote components. To know more about the lazy loading read the official documentation from here.

Time to run the Shell App.

Restart both the application, as we made changes in webpack.config.js.

Once both apps restarted check if Header and Footer is visible on Shell app.

Yeah!!😍

Conclusion

This article is focused on the setup of the micro frontend application and we successfully configured it.

Please do share your feedback and experiences with Micro Frontend in the comments section below. I’d love to see what you come up with!

If you found this article useful, please share it with your friends and colleagues!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

How do I rename multiple files at once using Python

Shivam Pawar — Sat, 16 Apr 2022 15:52:09 +0000

Background story

In this blog we will learn how you can rename multiple files on a single click using Python programming. Usually doing this task take too many time and bit frustrating work, same thing I faced while I have to rename 315 files in a day ! not only rename but I need to change the content of these files with the same keyword (encoding like stuff ) which is going to renamed in file name. Yes, I need to check each and every files content, check whether the keyword which I’m gonna rename is present in that file, if yes, replace that keyword also by same word as file have. Really this was very tedious task for me but I decided to do smart work by renaming file and replacing keyword inside file using python programming.

Lets see how I chosen Python programming to do this task and you won’t believe if I say I had completed that task within 30 min (20 minute for programming logic + 10 minute for resolving errors and practising ).

Before that we need to understand few things so that it would help you to understand code effectively.

os.listdir()

listdir is the function which return the names of the files and directories/folders present inside particular path provided as a argument for this function. Definitely you already have idea how to install Python and run Python program so I’ll directly move to coding part and syntax.

Here is the syntax to use listdir() method:



import os 
path = "/path/to/your/directory"
os.listdir(path)

In this syntax path would be the path to your directory. If you are using Windows operating system, your path would be something like this:



path = "C:\something\like\this"

Or else, If you are using any Linux distribution, your path would look like this:



path = "/something/like/this"

os.listdir(path) will return an array containing names of files and folders present at that path or location. For your reference I had some snapshots of output window (Terminal).

Regular expression module in python

Regular expression would help you to match the exact keyword from your file names/directory or from the content of your files using special character format. In python we have re module which will help us to perform various functions based upon regular expression. It provide too many built in method few of them which are widely used :

Few methods of re.
Also, there are too many other methods available. If you are curious and want to learn more about re and its method, I would suggest you to read official documentation of re module.

re.split()

As discussed in regular expression in python module split() method is used to split the string by the occurrences of pattern and return list object containing split strings.

Lets see how to split string into words by matching _ ( underscore ) pattern and see how it works:



import re
text = "The_Sky_Is_Blue"
split_words = re.split("_+", text) 
print(split_words)

os.rename()

One more and last method, rename (), I would like to introduce which will help us to finally rename the filename or directory name present at the path which we have provided as a argument to this method.

rename() method take two arguments:



os.rename(src, dst) 

#src: source path as original name to file or directory 
#dst: destination path as new name to file or directory

Bit confusing!!😵‍💫 Lets have a look with actual example:

We want to rename a file present inside /example/old.txt by new name new.txt



import os

os.rename("/home/username/example/old.txt","/home/username/example/new.txt")

print "Renamed successfully"

# If you don't believe, check file name at that location :)

Rename / encode multiple file names using python

Now finally we are at the place where you have basic concepts and we are going to write actual code to rename multiple files at once!

Here is code for your reference:🎉



import os
import re

#rename file name
def main():
    path = "/home/username/example/"
    for filename in os.listdir(path):
        keyword = re.split('_+', filename)
        print(keyword)
        if keyword[1] == "one.txt":
            keyword[1] = "1.txt"

        elif keyword[1] == "two.txt":
            keyword[1] = "2.txt"

        elif keyword[1] == "three.txt":
            keyword[1] = "3.txt"

        elif keyword[1] == "four.txt":
            keyword[1] = "4.txt"

        elif keyword[1] == "five.txt":
            keyword[1] = "5.txt"


        renamedFile = '_'.join(map(str, keyword))
        source = path + filename
        destination = path + renamedFile
        os.rename(source, destination)
        print("Renamed Successfully")

if __name__ == '__main__':
    main()

In this example we have did something called encoding. I have a keyword which is going to be repeat in various file names and I had to encode that keyword with some other keyword so that keyword might occur 2 times, 3 times or may be 100 times ! but we encode these many files with single click.

Replace / encode keyword inside multiple files in a directory

Till now we have just encoded the file names but now we have to change content of these files too with that specific keyword. We will add one more function which will work for renaming file content or say encoding keyword with specific word.

Lets see how that function will look like:



oldKeyword = ["one", "two", "three", "four", "five"]
newKeyword = ["1", "2", "3", "4", "5"]

#replace or encode content of file
def modifyFileContent(destination):
    with open(destination, 'r+') as f:
        for i in range(len(oldKeyword)):
            if newKeyword[i] in destination:
                text = f.read()
                text = re.sub(oldKeyword[i], newKeyword[i], text)
                f.seek(0)
                f.write(text)
                f.truncate()

In above code, destination will be the path to the file or path o the renamed files which we renamed in previous code.

Complete code with some fancy stuff

In our code lets add progress bar so that we can see the progress of renaming files and its content otherwise you will assume that screen is frizzed.

Before this we need to install progress package using pip.



pip install progress

Here is our complete code:



import os
import re
from progress.bar import Bar

bar = Bar('Processing', max=5)

#rename file name
def main():
    path = "/home/username/example/"
    for filename in os.listdir(path):
        keyword = re.split('_+', filename)
        print(keyword)
        if keyword[1] == "one.txt":
            keyword[1] = "1.txt"

        elif keyword[1] == "two.txt":
            keyword[1] = "2.txt"

        elif keyword[1] == "three.txt":
            keyword[1] = "3.txt"

        elif keyword[1] == "four.txt":
            keyword[1] = "4.txt"

        elif keyword[1] == "five.txt":
            keyword[1] = "5.txt"


        renamedFile = '_'.join(map(str, keyword))
        source = path + filename
        destination = path + renamedFile
        os.rename(source, destination)
        print("Renamed Successfully")
        modifyFileContent(destination)

oldKeyword = ["one", "two", "three", "four", "five"]
newKeyword = ["1", "2", "3", "4", "5"]

#replace or encode content of file
def modifyFileContent(destination):
    with open(destination, 'r+') as f:
        for i in range(len(oldKeyword)):
            if newKeyword[i] in destination:
                bar.next()
                text = f.read()
                text = re.sub(oldKeyword[i], newKeyword[i], text)
                f.seek(0)
                f.write(text)
                f.truncate()

if __name__ == '__main__':
    main()
    bar.finish()

Conclusion

In this post we have learned how to rename or encode file names of files present inside a directory and also we learned how we could encode the content of files with specific keyword.

Thanks for reading this post and hope this would definitely help you reduce manual efforts to rename multiple files and encode the content of the files.

Please reach out to me for suggestions and post your feedback in comment section and tell me your story about the problem solving trick you applied in your work. If you have any suggestion for the next article please post that in comment box.

If you found this article useful, please share it with your friends and colleagues!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

Syntaxerror: unexpected reserved word => prettier/third-party.Js

Shivam Pawar — Sat, 16 Apr 2022 15:22:05 +0000

Overview

This type of error are most likely to occur while working with webpack, prettier plugin, node and framework of JavaScript. There are few hacks to resolve this type of error but before that you need to check few things mentioned in this article.

Webpack is module bundler for frameworks and library of JavaScript which uses plugin called prettier plugin to read all files dependency graph. Whenever file is found with a matching extension, the file is processed by this plugin and overwritten.

Check version of node

If you encounter with this type of error you need to first check the version of node which you are currently using in your system. To check the version of node you need to run following command in your command prompt:



node -v

If you have node version 8 or older version than 8, you need to upgrade your node version to node v10 or above to resolve this type of error.

I’m lucky enough to have node v10.19.0 which is above v8😄

Don’t worry If you don’t want to upgrade you node version. There is an alternative to resolve this error.

If you are free to upgrade node version, download executable file from here and install it. Make sure you uninstall previously installed node version before installing new version of node.

Check version of prettier

Now next thing is to check which version of prettier you are using along with webpack. You can verify it by looking at your package.json at root level of your project directory where you will see the version of this plugin under devdependencies. Make sure you are using webpack of version 4 or above and Prettier version 1.13.7 or above. To upgrade your webpack version and Prettier plugin use this command.



npm install -D webpack
npm i -D prettier

If you don’t want to upgrade your node version due to other dependencies of package and resolve this error, you can downgrade version of prettier to v1.13.7



npm i -D prettier@1.13.7

Reason🤔

As described in official documentation JavaScript for await…of statement is available in node version 10 or above. That’s why this type of error might be occur due to your node version.

In prettier v1.13.7 this type of statement is not there, that’s why this version is compatible with node v8 or below 10.

Conclusion

There are two ways to fix or resolve this type of error:

Upgrade node version to v10 or above, or
Downgrade prettier version to v1.13.7

Thanks for reading this blog post. Hope it’s been useful for you. Please post comment and your questions in comment box. I would be happy to fix your problems.

If you found this article useful, please share it with your friends and colleagues!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

ERROR: non-interactive elements should not be assigned mouse or keyboard event jsx-a11y/no-noninteractive-elements-interactions

Shivam Pawar — Sat, 16 Apr 2022 14:50:45 +0000

Background

While working with Webpack and react js, I had configured eslint linter tool for identifying and reporting on patterns in JavaScript. At some point I need to use onClick event on div element which is not appropriate as it is non interactive element and only used to show content and containers in user interface.

There are few non interactive elements other than <div> like <main>, <area>, all heading tags like h1, h2 etc., <p>, <img>, <ul>, <li> and <ol> which does not support or say is not appropriate to use events on it.

Examples of interactive elements are button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, textbox.

Why this error occur🤔

Whenever we were trying to give mouse or keyboard event to non-interactive element this type of error occur during building our application which is coming from eslint library as it is enforcing us to use these events only on interactive elements as per standards.
For example:



//working with react js

<div onClick={handleClick}>
    <h2>Somethings...</h2>
    <p>Somethings....</p>
</div>

In above example we were using onClick event on <div> which comes under non-interactive element category and only used for showing content and container in user interface.

Hence we are getting error or warning like this:

How to fix it?

It is really simple to fix this type of error. Either you can use interactive element in place of non interactive element or else you can enforce an non-interactive element to behave like interactive. There is small hack to do that🤫

Apply a role attribute and tabindex to non-interactive element like this:



//working with react js

<div role="button" 
     tabindex={0}
     onClick={handleClick}
>
    <h2>Somethings...</h2>
    <p>Somethings....</p>
</div>

Now our <div> element will behave like interactive element <button> and congratulations, we fixed this error😍

Bonus tip

As we have changed behavior of <div> element from non interactive to interactive, whenever we click on <div> element it will show a black outline around the <div>. To fix this problem you need to apply a css style like this:



.divClass:focus{

    outline: none !important;

}

.divClass:focus-within{

    outline: none !important;

}

Conclusion

It is advised to use mouse and keyboard events only on interactive elements but in some case we need to violet the rule and standard to get work done and we change the behavior of that element to behave like interactive element. Just simple hack we used to fix this issue like use role and tabindex to that element.

Thanks for reading. If some how I helped you to fix your issue or still facing same error, please post your issue or feedback to comment box.

If you found this article useful, please share it with your friends and colleagues!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github

Popular React Webpack Plugins for 2022

Shivam Pawar — Sat, 16 Apr 2022 14:05:57 +0000

Use the right tool, for the right job, in the right way

If we have right tools available, development become a easier. In this post I’ll discuss some popular webpack plugins which are mostly used for production ready React.js application build process.

This article is extended part of my previous blog post.

If you want to know about Webpack and it’s configuration with react application in simple steps, you can read Setup Webpack and Babel for a React.Js Application.

Here are the plugins which I personally use for my React Application:

Webpack Dashboard

Default webpack build process output looks like this:

Above output is difficult to read and understand. Also information is not well formatted and presented.

Here webpack dashboard come in picture to have a better visual of output. Install it by typing command in cmd.

npm install --save-dev webpack-dashboard

Note: webpack-dashboard@^3.0.0 requires Node 8 or above. Previous versions support down to Node 6.

Now, We need to import this plugin in webpack.config.js and add in plugins array.

//webpack.config.js

const path = require('path');
const webpackDashboard = require('webpack-dashboard/plugin');
module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
      ]
   },
   plugins:[
       new webpackDashboard()
   ]
}

Also need to modify your script in package.json. Just need to append webpack-dashboard — before every script. And its all done!

"scripts": {
    "start": "webpack-dashboard -- webpack serve --mode development --open --hot",
    "build": "webpack-dashboard -- webpack --mode production"
  }

Run your application and you will see a fantastic build process output.😍

Terser Webpack Plugin

The terser webpack plugin is used to compress the size of your JavaScript bundle for production use. Also this plugin support ES6+ modern JavaScript syntax.

Note: Terser webpack plugin by default comes with webpack 5. This plugin will only needed when your webpack version is lower than 5.

Install this plugin using below command:

npm install --save-dev terser-webpack-plugin

Then import and add this plugin to your webpack.config.js.

//webpack.config.js

const path = require('path');
const webpackDashboard = require('webpack-dashboard/plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin()],
    },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
      ]
   },
   plugins:[
       new webpackDashboard()
   ]
}

There are lots of options available with this plugin which you can check here.

Optimize CSS Assets Webpack Plugin

This plugin will search for all CSS files in your project and optimize / minify the CSS.

Install this plugin using:

npm install --save-dev optimize-css-assets-webpack-plugin mini-css-extract-plugin css-loader

Import and add this plugin in webpack.config.js.

//webpack.config.js

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require('webpack-dashboard/plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
    },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
         }, 
      ]
   },
   plugins:[
       new webpackDashboard(),
       new MiniCssExtractPlugin(),
       new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.optimize\.css$/g,
         cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: {
           preset: ['default', { discardComments: { removeAll: true } }],
         },
         canPrint: true
       })
   ]
}

You can read more about Optimize CSS assets Webpack Plugin here.

HTML Webpack Plugin

HTML webpack plugin is used to generate HTML file and inject a script tag with JavaScript code. This plugin is used for both development and production build.

Install this plugin using:

npm install --save-dev html-webpack-plugin

Import and add this plugin in webpack.config.js as:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require('webpack-dashboard/plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
    },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
       {
         test: /\.css$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
     }, 
      ]
   },
   plugins:[
       new HtmlWebpackPlugin(
         Object.assign(
           {},
           {
             inject: true,
             template: path.join(__dirname,'/src/index.html')
           },

           // Only for production
           process.env.NODE_ENV === "production" ? {
             minify: {
               removeComments: true,
               collapseWhitespace: true,
               removeRedundantAttributes: true,
               useShortDoctype: true,
               removeEmptyAttributes: true,
               removeStyleLinkTypeAttributes: true,
               keepClosingSlash: true,
               minifyJS: true,
               minifyCSS: true,
               minifyURLs: true
             }
           } : undefined
         )
       ),
       new webpackDashboard(),
       new MiniCssExtractPlugin(),
       new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.optimize\.css$/g,
         cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: {
           preset: ['default', { discardComments: { removeAll: true } }],
         },
         canPrint: true
       })
   ]
}

You can read more about options provided by html-webpack-plugin here.

Clean Webpack Plugin

Clean webpack plugin is used to clean / remove your build folder. It will also remove all unused webpack assets after every successful rebuild.

This plugin will help to reduce the bundle size by removing unwanted files and assets from production ready folder.

Install this plugin using:

npm install --save-dev clean-webpack-plugin

Import and add this plugin in your webpack.config.js as:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require("webpack-dashboard/plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
  },
  devServer: {
    port: 8080,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: path.join(__dirname, "/src/index.html"),
        },

        // Only for production
        process.env.NODE_ENV === "production"
          ? {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
          : undefined
      )
    ),
    new webpackDashboard(),
    new MiniCssExtractPlugin(),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    }),
    new CleanWebpackPlugin({
      // Use !negative patterns to exclude files
      // default: []
      cleanAfterEveryBuildPatterns: ["static*.*", "!static1.js"],

      // Write Logs to Console
      // (Always enabled when dry is true)
      // default: false
      verbose: true,
    }),
  ],
};

You can see after running npm run build, all files under dist folder get removed and after that only required files get emitted and temp.js is get removed as it has no reference in any files.

Thanks for reading this blog post. Feel free to comment in comment box if you face any problem while configuring these plugins with webpack.

If you found this article useful, please share it with your friends and colleagues!❤️

Read more articles on Dev.To ➡️ Shivam Pawar

Follow me on ⤵️
🌐 LinkedIn
🌐 Github