Скачать или смотреть Easily Separate React Builds with Local Fonts Included

Need to create separate builds for your React project that include fonts without an internet connection? Discover how to do it seamlessly.
---
This video is based on the question https://stackoverflow.com/q/72684548/ asked by the user 'Alex Kogan' ( https://stackoverflow.com/u/3770223/ ) and on the answer https://stackoverflow.com/a/72866384/ provided by the user 'Alex Kogan' ( https://stackoverflow.com/u/3770223/ ) 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: Separate React build with fonts included

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: The Need for Local Builds in a React Project

In modern web development, leveraging the power of frameworks like React can be a game-changer. However, there are situations, such as deployment on standalone networks without internet access, where you need to modify your build process to ensure all assets—especially fonts—are included locally. A common requirement arises when using services like Google Fonts, which rely on an active internet connection for access.

In this guide, we're going to address the challenge of creating separate builds for your React project: one that includes Google Fonts over the internet and another that utilizes local files for standalone networks. Through this guide, you’ll learn how to separate these builds using environment variables, without having to eject your React app or customize Webpack configurations.

Problem Overview

You have a React JS project that utilizes Google Fonts through URL imports in your SASS files. The challenge is to create a version of the project that works offline, where fonts are stored locally. Ideally, you would like to achieve this without significant changes to your project structure or configuration, and using .env files to manage different build environments.

Solution Breakdown

Let’s dive into a simple yet effective approach to resolve this issue!

1. Setup Environment Variables

To distinguish between the two builds, use environment variables. Create two separate .env files:

.env: For the online build (using Google Fonts).

.env.local: For the offline build (using local fonts).

2. Using env-cmd for Configuration

To easily switch between these environment configurations during build time, you can leverage the env-cmd package. Install env-cmd via npm:

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

You can now set up your build scripts in the package.json:

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

3. Modify the App Component

In your main App.js, you can dynamically load different stylesheets based on the specified environment variable. Here’s a detailed breakdown of the necessary code:

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

4. Understanding the Code

Dynamic Stylesheet Loading: The component dynamically adds stylesheets based on the REACT_APP_INCLUDE_FONTS environment variable.

If REACT_APP_INCLUDE_FONTS is set to false (for online), it loads fonts from Google.

If it's set to true (for local use), it loads a local CSS file.

Reusable Logic: The addStylesheet method abstracts the logic for adding a CSS file, making it easy to modify or extend in the future.

Conclusion

By following the steps outlined in this guide, you can successfully create separate builds of your React app that cater to both online and offline environments. This approach not only helps maintain a clean project structure but also optimizes your application for different deployment scenarios without unnecessary complexity.

Feel free to implement this method and tailor it to your specific needs, and don't hesitate to share your experiences or ask for further guidance in the comments!