Angular 5 one production build deployment on multiple sites

Viewed 465

Angular 5 one production build deployment on multiple sites

want to generate an angular build that should work on any locations/domains. is this possible with a single build generation .?

I am generating build using below command

ng build --prod --base-href="www.site1.com/app-name/web"

similarly for other sites

ng build --prod --base-href="www.site2.com/app-name/web"
ng build --prod --base-href="www.site3.com/app-name/web"

I want to generate build once so that I can deploy in multiple locations.

any one come across.?

4 Answers

Don't specify the whole URL in the base-href. Just use /app-name/web

--base-href flag helps adding <base href="/"> tag to your html file. This helps in resolving the relative urls for the resources (REST API, Images, JS etc.) in your applications.

I am not clear what "www.site1.com" is in your base href? is it a directory or server name?

Usually for any web application url, you have following important parts:

[protocol]://[HostName]:[port]/[AppName]

If port is not provided it will use default port depending on the protocol (http uses 80 as default port)

Few Examples:-

http://www.site1.com/app-name/web

http://www.site1.com/my-app/web

http://www.site2.com:8080/app-name/web

https://www.site3.com/my-app

The important thing to notice is that your web server exposes an end point(protocol+host+port) where your web application can be hosted. Your application can then have further sub applications accessible under different path (see the example url #1 and #2).

Now if you are trying to run same application on different web servers then just provide the application directory to the base-href parameter.

And if you are trying to run multiple sub applications under same web server then you have to generate different builds providing different values to --base-href parameter.

you could change the your package.json to look like

"scripts": {
    ...
    "build_site1": "ng build --prod --base-href='www.site1.com/app-name/web'--output-path=dist/site1",
    "build_site2": "ng build --prod --base-href='www.site2.com/app-name/web'--output-path=dist/site2",
    "build_site3": "ng build --prod --base-href='www.site3.com/app-name/web'--output-path=dist/site3",
    "build_all": "npm run build_site1 && npm run build_site2 && npm run build_site3"
 }

and then run

npm run build-all

you will have all your built projects in different subfolders or dist

Single Command that generates Build for App Builds

ng build --prod --base-href="/cms-dev/" --output-hashing=all

If you are getting any Build issues to want to ignore you can add below option to command. --aot=false

Related