Скачать или смотреть Modifying the assets path in Your React App's HTML with Webpack

Learn how to prepend a custom domain string to the asset paths in your generated HTML file when building a React application using Webpack.
---
This video is based on the question https://stackoverflow.com/q/74520102/ asked by the user 'Ergis' ( https://stackoverflow.com/u/13830075/ ) and on the answer https://stackoverflow.com/a/74532240/ provided by the user 'Ergis' ( https://stackoverflow.com/u/13830075/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: "webpack config" - modify assets path of the generated html file

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction: Understanding the Issue

When developing React applications, especially when using the popular tool create-react-app, we often encounter a scenario where the asset paths in the generated HTML file are not suitable for our deployment environment. This can lead to issues such as broken links or assets not being loaded correctly.

For instance, when you run the command react-scripts build, the generated index.html includes paths like:

[[See Video to Reveal this Text or Code Snippet]]

In many cases, especially in multi-domain setups or when behind certain proxies, you might need to prepend a domain string to these paths, transforming them to look like this:

[[See Video to Reveal this Text or Code Snippet]]

This guide will guide you through the steps to modify web pack configuration to achieve this result.

Solution: Updating the Webpack Config

To modify the asset paths in your generated HTML, we will use the HtmlWebpackPlugin. This plugin helps in generating the index.html file dynamically and can be configured to include custom paths.

Step 1: Locate Your Webpack Configuration File

Start by finding your webpack.config.js file. This file is usually found in the root of your React application, especially if you have ejected from create-react-app. If you haven't ejected, you'll need to use a workaround such as customizing scripts.

Step 2: Modify the publicPath Property

Within the webpack.config.js file, look for the output section. In this section, you will modify the publicPath property. The publicPath option defines the base path for all the assets within your application.

Old Configuration

[[See Video to Reveal this Text or Code Snippet]]

New Configuration

You'll want to modify this line to prepend your desired domain string. Here's an example modification:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Test Your Build

After making the changes above, save your webpack.config.js file and run the build command again:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Check the Generated index.html

Navigate to the build directory and open the index.html file. You should see that all asset paths now include your specified {{DOMAIN}} at the beginning.

For example, you should see entries like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Modifying the asset paths in your React application's generated HTML using Webpack may seem daunting at first, but with the power of the HtmlWebpackPlugin and a few lines of code, you can easily customize your configuration to suit your deployment needs. By setting the publicPath within the output section to prepend a domain string, you ensure your assets load correctly in diverse environments.

Now, you can ensure that your application's assets are loaded appropriately regardless of where it's hosted or how the final delivery environment is structured. Happy coding!