How to run the Dist Folder on Local Machine in Angular 6+?

AngularTypescriptAngular6

Angular Problem Overview


I am building the application in Angular6+, now I ran the command ng build --prod which gave me a dist folder. How do I check or serve that folder on Localhost?

Angular Solutions


Solution 1 - Angular

You can do that using http-server package.

First install the package globally

npm install http-server -g

Then inside your project directory(in the terminal) just run

>http-server dist/

And if you are using Angular 6+ or above (Working with Angular 10), You have to run

>http-server dist/your-project-name

Now you can visit http://localhost:8080 to view your application

Solution 2 - Angular

In my case I did next:

Install http-server globally

npm install http-server -g

Then inside the project directory (in the terminal), I run

http-server dist/[your-project-name]

Now you can visit http://localhost:8080/index.html to view your application. But when I restart the browser page I have to add again /index.html into URL.


It works in Angular 7.x.x version.

Solution 3 - Angular

Edit: Angular 12+: ng serve --configuration production

Since Angular 7 you can just do ng serve --prod=true. Documentation: https://angular.io/cli/serve

I know the question asks about Angular 6 but Google got me here, so just for future reference.

Solution 4 - Angular

From Terminal:
$ npm install http-server -g

From Angular Project Dir. Lets say your Angular project name is ngx.
$ ng build
$ http-server dist/ngx
Starting up http-server, serving dist/ngx
Available on:
http://127.0.0.1:8080
http://192.168.43.54:8080
Hit CTRL-C to stop the server

Enjoy!

Solution 5 - Angular

windows platform

 - Install wamp server --> 
   https://wampserver.en.softonic.com/ and start.
 - your dist folder files copy to c:/wamp/www/(your project name)/
 - And create .htaccess file redirect your index.html.
   (http://www.htaccesstools.com/htaccess-faq/)
 - Next run browser http://localhost/(your project name)

ubuntu platform

 - Install lamp server --> 
   https://www.linode.com/docs/web-servers/lamp/install-lamp-stack-on-ubuntu-16-04/ and start.
 - your dist folder files copy to /opt/lampp/htdocs/(your project name)/
 - And create .htaccess file redirect your index.html.
   (http://www.htaccesstools.com/htaccess-faq/)
 - Next run browser http://localhost/(your project name)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJignesh MistryView Question on Stackoverflow
Solution 1 - AngularAnuradha GunasekaraView Answer on Stackoverflow
Solution 2 - AngularСергій КозюкView Answer on Stackoverflow
Solution 3 - AngularmikeView Answer on Stackoverflow
Solution 4 - AngularR M Shahidul Islam ShahedView Answer on Stackoverflow
Solution 5 - AngularJai KumareshView Answer on Stackoverflow