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

Question

I am building the application in Angular, now I have run the command ng build --prod which gave me a dist folder. Now how to check or serve that folder on Localhost ?

Answer 1

You can do that using http-server.

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 your are using angular 6.x.x, You have to run

http-server dist/your-project-name

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

Answer 2

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.

Answer 3

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)