How to serve an Angular 2 dist folder index.html

Question

I'm using this angular 4 seed app: https://github.com/2sic/app-tutorial-angular4-hello-dnn

It uses webpack and works fine.

It only seems to serve the dev files and not the dist/ folder.

I want to ng serve the dist folder.

Not sure the command to do this or if I need to install a lite server or something.

I run this command to create the dist folder (which works fine):

g build --prod --aot --output-hashing=none

Now I want to run this build in the browser.

@SoumyaGangamwar if you want to build for an environment, which should be deployed and accessible from outside localhost, you can put your compiled sources into a dist (distribution) folder - which is then served by a http-server and propagated to the "outside" world. and dist is just a default name widely used for that purpose... — Guntram
– Guntram, Commented Sep 14, 2017 at 9:02
Below stack url can be helpful stackoverflow.com/a/53300931/7165958 — Shridhar Sagari
– Shridhar Sagari, Commented Nov 14, 2018 at 14:27
@Guntram: That's exactly what I would like to do (making it accessible outside localhost). How would I specify IP and port? — Cleb
– Cleb, Commented Feb 10, 2019 at 18:14
node_modules\.bin\ng serve --port 4200 --base-href /my-app/ --host 0.0.0.0 does a standard serve, and host 0000 makes the served app accessible to the network from another computer. (the ip is the ip of your computer) — Guntram
– Guntram, Commented Feb 11, 2019 at 10:37

Noor Ahmed · Accepted Answer · 2017-04-13 10:26:05Z

80

You can use http-server for doing so. First of all generate a build using the command ng build --prod --aot --output-hashing=none. This will create a dist folder in your directory structure.

After this, run http-server ./dist, which will start serving your project from dist folder.

Make sure you have installed http-server globally using

npm install http-server -g

For reference, see https://www.npmjs.com/package/http-server

answered Apr 13, 2017 at 10:26

Noor Ahmed

1,61710 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Madmenyo Over a year ago

Thanks, been looking to test my application build. I knew I probably needed to run the build on a server but could not find info on this anywhere. This needs to be pushed higher up google ranking.

rsenna · Accepted Answer · 2020-06-08 07:18:48Z

36

At least for Angular apps, angular-http-server seems to be a nicer option.

First install it with your prefered package manager, say

npm install angular-http-server -g

or

yarn global add angular-http-server

Then execute it:

angular-http-server --path path/to/dist/folder

Look at the repo for more information about usage.

PS: According the author, it should also work with other SPA frameworks (React, Vue and so forth).

PPS: Do not use angular-http-server for production, use this solution for testing purposes only.

edited Jun 8, 2020 at 7:18

answered Mar 12, 2018 at 13:35

rsenna

12.1k1 gold badge58 silver badges62 bronze badges

5 Comments

Stephane Over a year ago

Using the angular-http-server server solved the issue I had which I described at

https://stackoverflow.com/questions/52786539/all-requests-are-not-found-404-when-the-application-runs-on-an-external-server/52786726

rsenna Over a year ago

@Stephane I'm glad it helped!

Cleb Over a year ago

How would I specify the IP address, e.g. http://0.0.0.0; port can be done via the -p flag.

JohnLBevan Over a year ago

Note: I wondered what the angular-http-server vs http-server rule was. npmjs.com/package/angular-http-server says that angular-http-server should not be used as a production server; only for development; whilst npmjs.com/package/http-server claims http-server can be used for production. nginx can also be used (see medium.com/bb-tutorials-and-thoughts/…)

rsenna Over a year ago

@JohnLBevan Good point. When I posted this answer I assumed OP wanted a solution for development only - as a comment to another answer below OP says "I want to test the dist folder". Like you said, the procedure I describe here should not be used for production.

Deepak Kumar · Accepted Answer · 2017-06-06 14:54:02Z

19

You need a server to serve your generated build.

I am using http-server. Install http-server using:

npm install -g http-server

now go inside your dist folder and run this command

http-server

as shown here:

Check http://localhost:8080 in your browser

answered Jun 6, 2017 at 14:54

Deepak Kumar

1,6993 gold badges18 silver badges37 bronze badges

Comments

Whisher · Accepted Answer · 2018-02-27 18:49:26Z

6

A little tips

so you avoid to install globally

install in your root

npm i http-server

in your package.json

"scripts": {
    "pwa": "http-server ./dist"
  }

than

npm run pwa

answered Feb 27, 2018 at 18:49

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Comments

FirstVertex · Accepted Answer · 2020-02-20 20:00:55Z

5

I use the VS Code extension Live Server.

Run your ng build which will output the dist/ folder with index.html
Open separate instance of VS Code onto the dist/ folder
Press "Go Live" button in bottom right of VS Code status bar which you will see after installing the Live Server extension.

answered Feb 20, 2020 at 20:00

FirstVertex

3,8241 gold badge40 silver badges34 bronze badges

Comments

Bill · Accepted Answer · 2019-01-08 00:13:31Z

4

I serve the dist folder with the Angular CLI...

ng serve --prod=true

When true, sets the build configuration to the production target. All builds make use of bundling and limited tree-shaking. A production build also runs limited dead code elimination.

https://angular.io/cli/serve

edited Jan 8, 2019 at 0:13

answered Jan 8, 2019 at 0:01

Bill

5194 silver badges7 bronze badges

1 Comment

Biruel Rick Over a year ago

The --prod option will compile the files and run it from streaming and not from folder /dist

UniCoder · Accepted Answer · 2019-09-13 09:52:26Z

3

I tried with http-server by installing it globally

npm install -g http-server

then moved to the dist/project-folder and tried with

http-server -o

output in console

[Fri Sep 13 2019 15:19:57 GMT+0530 (India Standard Time)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132
Safari/537.36"

Then this solution worked with all the steps same but instead of using http-server try angular-http-server

It worked for me.

answered Sep 13, 2019 at 9:52

UniCoder

3,2531 gold badge33 silver badges29 bronze badges

Comments

Kalmuraee · Accepted Answer · 2021-08-29 02:18:56Z

3

You don't need to install anything, Just use the following command.

npx lite-server --baseDir="dist/"

answered Aug 29, 2021 at 2:18

Kalmuraee

591 silver badge6 bronze badges

1 Comment

Community Over a year ago

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution.

Tatsuyuki Ishi · Accepted Answer · 2017-04-13 10:19:23Z

1

ng serve will work as normal, and it doesn't require a prior build. It generates files in memory, and has some additional features like auto reload.

answered Apr 13, 2017 at 10:19

Tatsuyuki Ishi

4,0714 gold badges31 silver badges42 bronze badges

5 Comments

AngularM Over a year ago

Hi, I have ng serve working but its serving the dev files and not that dist folder. I want to test the dist folder using serve. whats the command for that?

Tatsuyuki Ishi Over a year ago

angular-cli can't do that. You want an instant or production grade static server instead.

AngularM Over a year ago

do you know any I could install?

Tatsuyuki Ishi Over a year ago

stackoverflow.com/questions/16333790/…

rsenna Over a year ago

The question is clear, and this answer doesn't answer it. Should have been a comment.

tottomotto · Accepted Answer · 2020-10-17 15:58:25Z

1

Install this globally (or locally)

npm i -g lite-server

Run this command (replace project-name)

lite-server --baseDir="dist/project-name"

answered Oct 17, 2020 at 15:58

tottomotto

2,3803 gold badges24 silver badges29 bronze badges

Comments

dman · Accepted Answer · 2023-04-21 19:07:26Z

0

I would recommend web dev server. I found it to be light and easy to use. It also has a nice watch option

From inside the dist/ folder I run this command

% wds -p 8080 --watch   
Web Dev Server started...

edited Apr 21, 2023 at 19:07

answered Apr 21, 2023 at 18:53

dman

11.1k25 gold badges118 silver badges217 bronze badges

Collectives™ on Stack Overflow

How to serve an Angular 2 dist folder index.html

11 Answers 11

1 Comment

5 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

1 Comment

5 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related