Testing an angular build with base-href locally

#angular #build #production #serve

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 😇

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More