CODEWITHSUNDEEP
asp.nettypescriptwebpack
A Farmanbar
A Farmanbar

Reputation: 4788

Typescript Release Mode and Debug Mode Configuration

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:

Upvotes: 1

Views: 1407

Answers (1)

Kaca992
Kaca992

Reputation: 2267

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;

Upvotes: 2

Related Questions