DEV Community

Edouard Penin
Edouard Penin

Posted on

Testing an angular build with base-href locally

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

More

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 ๐Ÿ˜‡

Top comments (1)

Collapse
 
stargator profile image
Stargator

Is pancakesAreTheBest the app name? I'm confused by it's meaning. Or is it just any generic folder name?