81

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?

1
  • 1
    Generally, you can install locally any HTTP server which will serve your project distribution files, for example [XAMP, npm package "http-server", ....] Aug 8, 2020 at 22:23

5 Answers 5

179

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

13
  • 1
    Let me try & check in a moment Jul 2, 2018 at 4:40
  • 9
    If you have npm > 5.2 installed then you can do the same as above without the global install by using npx. E.g. npx http-server dist/. That will download and run the binary each time you execute, so for a once off or infrequent usage it's pretty good. Should you use the package a lot or need if offline then follow the steps in the answer.
    – Ash
    Jul 2, 2018 at 4:55
  • 3
    it does not work when i reload the browser after navigating to a route. Any suggestions ? Feb 25, 2019 at 11:36
  • 6
    I am using angular 7.x.x in my application, when i am trying to run in 192.168.2.36:8080 or localhost:8080 ports Application is not running. and it is showing 'This page is not working..'. Please let me know if you have any suggestions. thanks in advance
    – Santhosh
    May 22, 2019 at 7:59
  • 2
    Same problem of @Santhosh, http-server gives a series of addresses where to find the app but none of them work...
    – Usr
    May 22, 2019 at 8:13
25

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.

0
18

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.

6

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!

2

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.