Typescript Release Mode and Debug Mode Configuration - asp.net

Question

I'm using Typescript such that there are many differences in Release Mode and Debug Mode.in the Debug Mode i use http://localhost:port/ basic URL. However, in Release Mode I have to use https://www.example.com/
Main problem
it makes me change URLs in Release Mode and Debug Mode Repeatedly. Indeed, There are other parameters that I have to change in Release Mode and Debug Mode manually which may Cause errors to misconfiguring.
What I am looking for
avoiding manually configuration in Release Mode and Debug Mode
Clues and assumptions
there may be a way using Macros in Typescript likewise something that we would use in MsBuild or WebConfig like $(ConfigurationName) And $(ProjectDir)
Best desired solution that I'm looking for
Easiest Solution in which doesn't need to learn Extra and doesn't change project Architecture.IF I have to use webpack, please put complete details around it.
Project framework
Asp.net .Net Framework or Asp.Net Core
Minimal reproduce able code
Consider you ONLY want to change this URL
const URL = http://localhost:port/
To
const URL = https://www.example.com/
in the Release Mode
Possible hard solutions
as #Kaca992 suggested webpack can resolve the issue by using
mode: 'development' and mode: 'production' like:
module.exports = {
mode: 'development'
};
production and development mode extra information
But the above solution has these Cons:
Takes time to learn webpack
Needs to be familiar with the basics concepts of npm
Needs to be familiar with concepts of bundling and minification
Needs working with modules (Import/Export)

Answer 1

You would have to use a environment variable and do checks based on that. You could create a helper method like this:
export function isProduction() {
return process && process.env && process.env.NODE_ENV === 'production';
}
Just be careful that most bundlers cant remove this code (it needs to be an inline check for it to be removed in compile time). If you are using something like webpack you can easily include the NODE_ENV variable using https://webpack.js.org/plugins/define-plugin/ .
This is also an excelent read into the topic: https://overreacted.io/how-does-the-development-mode-work/
Also a good way of dealing with this if you have alot of different setups would be to group all of the different values in a helper module:
debug.config.ts
release.config.ts
and then in your code you use config.ts wich just re-exports based on your configuration:
import * as debug from debug.config.ts;
import * as release from release.config.ts;
const config = isProduction() ? release : debug;
export default config;