Member-only story
How To Have Angular Environment Structure in React Applications Without CRA
If you have an experience with Angular you are familiar with the environment structure in this project I think it’s so cool to have a different environment value in development and production mode in React applications so I decide to use this structure in React applications. Let’s start to implement it :
👋 Initial Step
to achieve this task we need to access to Webpack files to change and add new tasks so if you use CRA (Create React App) you have to find a way to change Webpack tasks or You Can Make Your Webpack Tasks By Yourself Own.
🤔 What Should We Do
First We Need To Add environment folder to the root of our projects, after that we have to create a separate file for each mode of production and development with a name like this environment.prod.ts and environment.ts . we use environment.ts in development mode.
after creating files we have to add a new task to webpack build files and handle the switching between these two files.
💻 Coding Time
now as first step to adding this task we have to install file-replace-loader this package will help us to replace import path during the build, after install this package with this command:
