78

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?

raaaay
  • 496
  • 7
  • 14
Jignesh Mistry
  • 2,221
  • 6
  • 25
  • 50
  • 1
    Generally, you can install locally any HTTP server which will serve your project distribution files, for example [XAMP, npm package "http-server", ....] – Ahmed Nabil Aug 08 '20 at 22:23

5 Answers5

176

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

RICHARD ABRAHAM
  • 2,218
  • 20
  • 26
Anuradha Gunasekara
  • 6,553
  • 2
  • 27
  • 37
  • 1
    Let me try & check in a moment – Jignesh Mistry Jul 02 '18 at 04: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 02 '18 at 04:55
  • 1
    This error is coming when i run http-serve dist/project-name 'http-server' is not recognized as an internal or external command, operable program or batch file. – Jignesh Mistry Jul 02 '18 at 04:58
  • 1
    did you install the package **globally**? – Anuradha Gunasekara Jul 02 '18 at 04:59
  • Thanks Brother. It worked I installed it again & now all works fine. – Jignesh Mistry Jul 02 '18 at 05:02
  • in a local machine without internet how to perform " npm install http-server -g " – Sajith Jan 29 '19 at 05:47
  • @Sajith read this. [https://stackoverflow.com/questions/11295050/how-to-install-npm-g-on-offline-server] – Anuradha Gunasekara Jan 30 '19 at 06:24
  • 3
    it does not work when i reload the browser after navigating to a route. Any suggestions ? – Franklin Pious Feb 25 '19 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 '19 at 07: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 '19 at 08:13
  • @Santhosh I'll look in to this and update you. I haven't tried this with angular 7. – Anuradha Gunasekara May 22 '19 at 08:38
  • can we use this `http-server` on production server? or is there any other (proper) way? – Najam Us Saqib Nov 02 '20 at 16:34
  • @FranklinPious **For fixing the issue on reloading after navigation** you can either 1) duplicate your `index.html` and rename it as `404`.html. 2) run `http-server --proxy http://localhost:8080?`, which proxies all requests which can't be resolved locally to the given URL. For further explanations check this thread https://github.com/http-party/http-server/pull/369 – Serene Abraham Mathew Feb 09 '22 at 13:17
22

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.

mike
  • 1,956
  • 16
  • 22
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.

Сергій Козюк
  • 1,877
  • 1
  • 8
  • 8
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!

R M Shahidul Islam Shahed
  • 1,178
  • 13
  • 13
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)
Jai Kumaresh
  • 715
  • 1
  • 7
  • 33