DEV Community: Yadhunandan S

Custom React Router Prompt

Yadhunandan S — Sun, 13 Jun 2021 09:29:38 +0000

How to implement the custom prompt on navigation using react-router

What’s the need for custom prompt ?

Most of the react projects follow the UI design system for their components. In order to achieve the same design consistency across the app, they reuse the components. However to block the navigation in case there are some unsaved user data, default browser prompt is the most common and easy way to block the user from navigating to different routes. But the popup does not match your library component.

There is no official docs explicitly mentioning how to use the custom modal instead of the default react-router Prompt.

Solution

There are few simple steps to be followed in order to get the required result. Each step contains 100% working code snippets. You can use it in your projects.

Step 1

We need to disable or block the default browser prompt. This can be done by passing an empty callback to the getUserConfirmation function prop of the BrowserRouter.

Step 2

Now let’s create a custom RouterPrompt component using the useHistory hook from the react-router-dom and ant design component library for the Modal component.

Step 3

Let’s create two sample components for navigating between pages. For example, let the first component be Dashboard.jsx and the second component be Home.jsx.

The home component contains our custom RouterPrompt component. The prompt is triggered on the page change and also based on the when prop. The when prop is used to conditionally trigger the prompt. For instance, if the when prop is set to true , the prompt will be shown every time page navigates (from home route to other routes or navigate forward / back).

The onOK and onCancel callback props must return boolean value in order to proceed with the route.

Result

Conclusion

You can use any component library’s modal, even your own custom modal or default browser prompt. But just be careful when implementing the history.block.

By following the above steps you can achieve the desired solution. The code is 100% working. You can copy the code snippets to your applications to save time.

References

What is Output — Webpack 5

Yadhunandan S — Sun, 02 May 2021 15:27:20 +0000

Before continuing the article, please refer to the below link if you have missed the introduction to webpack 5

https://dev.to/yadhus/introduction-to-webpack-5-5fhm

https://dev.to/yadhus/what-is-entry-webpack-5-1cb5

What is Output

Output is a property that tells webpack where to emit / save the bundles it creates and how to name these bundled files. By default the main output file gets stored in ./dist/main.js and other generated files are stored in ./dist.

module.exports = {
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}

Single or Multi-main entry points

Though the entry property can have one or multi paths, there can be only one output configuration specified.

Example:

module.exports = {
 mode: "development",
 entry: "./src/home.js"
}

Output:

dist /
 - main.js

Note:

The webpack’s default configuration for the output property looks something like this

module.exports = {
 mode: "development",
 entry: "./src/home.js"

 // default output configuration
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}

The [name] resolves to the dynamic name of the bundle. Here it resolves to main.js.

If you want the default configuration, it is not required to mention the output property. Webpack understands and apply it implicitly.

Object entry points

While webpack can have multiple different entry points, only one output configuration can be specified.

Example:

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },

 // default output configuration 
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}

Output:

dist /
 - adminApp.js
 - homeApp.js

Advanced

Apart from path and filename sub properties of the Output property. There are few other sub properties that are used often in the build process (like CRA etc.). Some of them are listed below.

PathInfo

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true
 }
}

This tells webpack to include comments in bundles with information about the contained modules (filename comments). It also adds some info about tree shaking to the generated bundle.

ChunkFilename

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js
 }
}

contenthash:8 generates a dynamic hash value based on the contents of the files and the ‘:8’ represents the length of the hash value. If the contents of the files are not changed, then the same hash value is generated.

The chunkFilename determines the name of the non-initial chunk files (like lazy loaded or dynamically imported modules). These filenames need to be generated at runtime to send request for the chunks.

Because of this, placeholders like [name] and [contenthash] need to add a mapping from chunk id ([id]) to placeholder value ([name].[contenthash:8].chunk.js) to the output bundle with the webpack runtime. This increases the size and may invalidate the bundle when placeholder value for any chunk changes.

PublicPath

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js, 
  publicPath: 'https://server.com/assets/' 
 }
}

The publicPath is where you have uploaded the bundled files. This is an important option when using on-demand-loading or loading external resources like images, files, etc.

This option specifies the public URL of the output directory when referenced in a browser. A relative URL is resolved relative to the HTML page (or <base> tag). Server-relative URLs, protocol-relative URLs or absolute URLs are also possible and sometimes required, i.e. when hosting assets on a CDN.

In the above code snippet, the request to the chunk file will look something like this https://server.com/assets/1.a345ersd.chunk.js.

The webpack-dev-server also takes a hint from publicPath, using it to determine where to serve the output files from.

By default, the publicPath value is set to ‘/’.

GlobalObject

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js,

  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js, 
  publicPath: 'https://server.com/assets/',
  globalObject: 'this'
 }
}

When targeting a library, especially when libraryTarget is 'umd', this option indicates what global object will be used to mount the library.

To make UMD build available on both browsers and Node.js, set globalObject option to 'this'.

Defaults to self / window for Web-like targets.

The webpack configuration file specifically to highlight output property:

GitHub Repo Link

https://github.com/yadhus/What-is-Output-Webpack-5

References

https://webpack.js.org/configuration/output/
https://webpack.js.org/concepts/#output

What is Entry — Webpack 5

Yadhunandan S — Sat, 09 Jan 2021 19:38:24 +0000

Before continuing the article, please refer to the below link if you have missed the introduction to webpack 5

https://dev.to/yadhus/introduction-to-webpack-5-5fhm

What is entry

Entry is a property that indicates webpack which module(s) / file(s) it should use to begin building out the internal dependency graph(s) of the project / application.

Three syntax of entry

Single entry
Multi-main entry
Object entry

Single entry

The single entry syntax points to one file path to start building the dependency graph of the project / application. It is a great choice when you are looking to quickly setup a webpack configuration for an application or tool with one entry point (i.e. a library)

Usage

entry: String

module.exports = {
  entry: "./src/index.js"
}

Multi-main entry

The multi-main entry syntax points to multiple file paths. Its creates separate dependency graphs based on these paths and finally get combined or merged into a single file.

Usage

entry: [String]

module.exports = {
  entry: [
   "./src/index_1.js",
   "./src/index_2.js"
  ]
};

Object entry

The object entry syntax creates separate files for each key value pair in the entry object. It allows you to customize the chunk / bundled file name (key name). This is the most scalable way of defining entry / entries in your application.

This is a popular technique used to separate concerns by environment, build target, and runtime.

Usage

entry: { [entryChunkName] : String }

Usage

entry: { [entryChunkName] : [String] }

module.exports = {
  entry: {
   adminApp: "./src/admin.js",
   homeApp: ["./src/home_1.js", "./src/home_2.js"]
  }
};

The webpack configuration file specifically to highlight entry property:

Note

You can pass empty object to entry when you have only entry points generated by plugins (will see more about this in detail in the upcoming articles).

module.exports = {
  entry: {}
};

GitHub Repo Link

https://github.com/yadhus/What-is-Entry-Webpack-5

https://dev.to/yadhus/what-is-output-webpack-5-cho

References

https://webpack.js.org/guides/entry-advanced/
https://webpack.js.org/concepts/#entry
https://webpack.js.org/api/
https://webpack.js.org/configuration/

Introduction to Webpack 5

Yadhunandan S — Tue, 05 Jan 2021 07:05:01 +0000

What is webpack

Webpack is a static module bundler for modern JavaScript applications. When webpack processes the application, it internally builds a dependency graph which maps every module (like node_modules, images, CSS, etc.) your project needs and generates one or more bundles.

Module Bundler — A tool that takes JavaScript & its dependencies and bundles them into a single / multiple files (to use in browser).

Dependency Graph — A graph that maps all the dependencies between files based on the order / hierarchy in which it is used or referenced.

Webpack builds and loads modules synchronously. It converts dependencies into modules and pulls the dependencies and modules at the right time in the right scope. Finally, it loads all these modules and dependencies into one or few files and downloads it in the browser (when requested).

webpack requires a configuration file to bundle your project. Webpack, by default has a default configuration once you install it (using NPM). But webpack allows you to incredibly configure it based on your project needs and requirements.

The basic webpack configuration file looks something like this:

To understand the webpack configuration and to get started, First you need to know the core concepts of webpack:

Entry
Output
Loaders
Plugins
Mode

Mode

This parameter enables webpack to identify and add built-in optimizations for the corresponding environment. The default value for the mode parameter is ‘production’.

There are three modes:

production
development
none - does not add any default / built-in optimizations

module.exports = {
  mode: 'development'
}

Entry

An entry is a starting / initial point for webpack to start building out its internal dependency graph. Based on this webpack will figure out other modules, libraries and assets that the entry point depends on.

module.exports = {
  mode: 'development',
  entry: "./path/to/my/entry/file.js"
}

Output

The output property tells webpack where to save the bundles it creates and how to name the bundled files. This property only applies to JavaScript files not on other files like HTML, CSS etc.

module.exports = {
  mode: 'development',
  entry: "./path/to/my/entry/file.js",
  output: {
   path: path.resolve(__dirname, 'dist'),
   filename: [name].js,
 }
}

Loaders

Loaders are used to preprocess the files as you import or load them and allows you to bundle any other static resources (like .png, .img, .css, .sass, etc.).

Loaders are like tasks in other build tools and provide a powerful way to handle front-end build steps. It can transform files from a different language to JavaScript or load inline images as data URLs. It even allows you to directly import CSS files from your JavaScript modules.

module.exports = {
  mode: 'development',
  entry: "./path/to/my/entry/file.js",
  output: {
   path: path.resolve(__dirname, 'dist'),
   filename: [name].js,
 },
 module: {
  rules: [
   { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  ],
 }
}

‘module’ — property is used to denote the loaders and its configuration.

‘rules’ — property is a list of objects that contain the different types of loaders. Each item (object) of the rules property contains ‘test’ and ‘use’.

‘test’ — property takes a regex and executes the specified loader for the file types that match.

‘use’ — property takes the loader type value that will be used for executing / transforming the specified file type(s).

In the above code snippet, the rules checks for the CSS file types and transforms it (to use in browser) using the css-loader and style-loader. The css-loader interprets the ‘@import’ and ‘url()’ and resolves them. The style-loader injects the CSS into the DOM. (takes the styles and creates a style tag in the HTML)

Plugins

Plugins provide a powerful way to tap / injects custom build into webpack’s compilation process. A plugin is able to hook into key events that are fired throughout each compilation.
Plugins are the backbone of the webpack. Webpack itself is built on the same plugin system that you use in your webpack configuration.

module.exports = {
  mode: 'development'
  entry: "./path/to/my/entry/file.js",
  output: {
   path: path.resolve(__dirname, 'dist'),
   filename: [name].js,
 },
 module: {
  rules: [
   { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: "./src/index.html"
  })
 ]
}

‘plugins’ — property is a list of new instances of plugins. Each plugin instance takes arguments / options which you need to pass in the new instance.

In the above code snippet, plugins contain the HtmlWebpackPlugin instance which creates a new HTML file based on the template HTML file (./src/index.html) and puts it inside the output folder (./dist).

Difference between loaders and plugins

Loaders do pre-processing transformation of any file types that we specify. Loaders work at the individual level during or before the bundle is generated. Loaders are not able to influence the actual build process.

Plugins are executed after the end of the bundle generation process. Plugins can modify how bundles are created and have more control than loaders.

Why webpack

First and most important reason for using webpack is that it gives complete control over the frontend build process and helps to build boiler plates or ready-made app for developers to start coding using the major frameworks like React, Angular and Vue.

Using webpack loaders, we can use modern JavaScript syntax like arrow functions, spread operators, etc. which are then later transformed (during the bundle generation) into common JavaScript that are compatible with all the modern and old browsers.

In development mode, webpack also provides ‘Hot Module Replacement’ which updates the modules without fully reloading the entire page. This saves the development time by only updating what’s changed.

It is used to optimize and minimize the code, so that it loads and downloads the bundled files / chunks faster in the browser. All these process and transformations are executed in a single build process in a very short time.

There are many more features and advantages of webpack which I will cover in detail in the upcoming articles.

GitHub Repo Link

https://github.com/yadhus/Introduction-to-Webpack-5

https://dev.to/yadhus/what-is-entry-webpack-5-1cb5

References

https://webpack.js.org/concepts/
https://webpack.js.org/api/
https://webpack.js.org/configuration/
https://stackoverflow.com/questions/37452402/webpack-loaders-vs-plugins-whats-the-difference

DEV Community: Yadhunandan S

Custom React Router Prompt

What’s the need for custom prompt ?

Solution

Step 1

Step 2

Step 3

Result

Conclusion

References

What is Output — Webpack 5

What is Output

Single or Multi-main entry points

Example:

Output:

Note:

Object entry points

Example:

Output:

Advanced

PathInfo

ChunkFilename

PublicPath

GlobalObject

The webpack configuration file specifically to highlight output property:

GitHub Repo Link

References

What is Entry — Webpack 5

What is entry

Three syntax of entry

Single entry

Usage

Multi-main entry

Usage

Object entry

Usage

Usage

The webpack configuration file specifically to highlight entry property:

Note

GitHub Repo Link

Next article

References

Introduction to Webpack 5

What is webpack

Mode

Entry

Output

Loaders

Plugins

Difference between loaders and plugins

Why webpack

GitHub Repo Link

Next article

References