Testing an angular build with base-href locally

Edouard Penin — Tue, 18 Aug 2020 04:15:19 +0000

We ran into a deployment issues with my team, Angular wasn't able to fetch the translations files.

Being good developers (read lazy 😊) we tried to reproduce (and fix) the issue by running the production build locally rather than deploying again and again.

Well this turned out to be a bit of a hassle 😵.

Thankfully, the amazing angular-http-server package solves all this hassle with a single one liner.

So, let's do this.

First build (obviously)

Note that we specified a base href, this is where most suggested serve methods will fail.

ng build --prod --base-href /pancakesAreTheBest/

Run the production build

npx angular-http-server --path dist/{yourAngularAppName} --baseHref pancakesAreTheBest --open

Let's unpack

path simply tells where the build files are
baseHref matches the --base-href you used during the build process. (Note, no trailing/starting "/" in the baseHref)
open will nicely open the browser for you once ready

You can find the docs here, but as a quick overview, angular-http-server also provides a ways to deal with cors, https and custom certificates.

Hope this helps 😇

Typing process.env and dealing with NODE_ENV

Edouard Penin — Fri, 01 Nov 2019 06:45:35 +0000

I don't know about you but I hate using process.env, it's like drunk typescript: "process.env.blah.indeed().next().var ? Yeah dude, let's party 😛".

Well drunk typescript kinda sucks. Let's fix that 👨‍🍳

TLDR;

Install node typings

$ npm install --save @types/node

Extend node typings (.d.ts file version)

// someDefinitionFile.d.ts

// Target the module containing the `ProcessEnv` interface
// https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
declare namespace NodeJS
{

    // Merge the existing `ProcessEnv` definition with ours
    // https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
    export interface ProcessEnv
    {
        NODE_ENV: "development" | "production" | "test";
        MY_API_KEY: string
        DB_USER?: string
        // ...
    }
}

Extend node typings (.ts file version)

// someFile.ts

// Required when adding declarations inside a module (.ts, not .d.ts)
// If you have documentation about why this is required I would love to know 🤓
declare global
{
    // Target the module containing the `ProcessEnv` interface
    // https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
    namespace NodeJS
    {
        // Merge the existing `ProcessEnv` definition with ours
        // https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
        export interface ProcessEnv
        {
            NODE_ENV: "development" | "production" | "test";
            MY_API_KEY: string
            DB_USER?: string
            // ...
        }
    }
}

Done

Yup, that's it 🤗

Bonus tip, deal with `if( process.env.NODE_ENV === "something" )`

So now we've can define what values process.env.NODE_ENV can have (no more "is it dev or development..?" 😌).

Usually we use that to do stuff like if (process.env.NODE_ENV === "development") with type safety.

That totally works, but what we really want to express is usually: do that in dev only or unless in prod, do that.

Here's a simple way to make that more obvious in your codebase:

const isProd = () => process.env.NODE_ENV === "production" || process.env.NODE_ENV === "staging" // Production here is a concept, not a value, for you it might include staging 

const isDev = () => !isProd()

export const devOnly = (action: () => void) => 
        isDev()  ?          
        action() :
        null


export const prodOnly = (action: () => void) => 
        isProd() ?          
        action() :
        null

export const unlessProd = (action: () => void) => 
        !isProd() ?          
        action()  :
        null


export const unlessDev = (action: () => void) => 
        !isDev() ?          
        action() :
        null

devOnly(()=> console.log("We're in dev mode 🥳"))

Same thing for the 0 duplication guys 😉

type validator = () => boolean

type action    = () => void

const doIf = (condition: validator) =>
    (action: action) => 
        condition()  ?          
        action() :
        null

const not = (condition: validator) =>
 () => !condition()

const isProd = () => process.env.NODE_ENV === "production" || process.env.NODE_ENV === "staging" 

const isDev = not(isProd)

export const devOnly    = doIf(isDev)
export const prodOnly   = doIf(isProd)
export const unlessProd = doIf(not(isProd))
export const unlessDev  = doIf(not(isDev))
// ... testOnly, QA only, etc

devOnly(()=> console.log("We're in dev mode 🥳"))

Going further

Extending existing definitions is called declaration merging

What we've done is called Module augmentation

Keep In Touch

You disagree, you have questions, something doesn't feel right, let's chat! Leave a comment or reach me via Twitter or Linkedin

DEV Community: Edouard Penin

Testing an angular build with base-href locally

First build (obviously)

Run the production build

More

Typing process.env and dealing with NODE_ENV

TLDR;

Install node typings

Extend node typings (.d.ts file version)

Extend node typings (.ts file version)

Done

Bonus tip, deal with `if( process.env.NODE_ENV === "something" )`

Going further

Keep In Touch

DEV Community: Edouard Penin

Testing an angular build with base-href locally

First build (obviously)

Run the production build

More

Typing process.env and dealing with NODE_ENV

TLDR;

Install node typings

Extend node typings (.d.ts file version)

Extend node typings (.ts file version)

Done

Bonus tip, deal with if( process.env.NODE_ENV === "something" )

Going further

Keep In Touch

Bonus tip, deal with `if( process.env.NODE_ENV === "something" )`