Run dist folder in angular 17

When angular code is compiled, it generates javascript bundles and places them into a dist folder as shown below.

Suppose you want to provide someone your application UI but not the source code, then you can give them this dist folder.
But, the question is how will they run it on their machine.
In this article, we will look at running this dist folder and serving index.html from it.

http-server

For running dist folder, install http-server package using below command

-g flag will install the package globally. That is, it will be accessible from anywhere in the system.

Next, open command prompt or terminal and navigate to dist folder.

Finally, type http-server and hit enter.

This will start a server at port 8080(default) as shown in below image.

You can access index.html using URL http://localhost:8080

Running dist on port

Be default, http-server runs at port 8080. This can be configured using -p option followed by the port number as shown below

This will start http-server at port 8181 and dist folder will be running on same port.

Running dist with proxy

It might happen that you want to run dist folder and send http requests to backend using a proxy.

That is, suppose your backend is running at port 9999 while http-server is running as port 8080.
In this case, we need to run dist with a proxy so that all backend requests are sent to port 9999.

For this, run http-server with a proxy URL using below command

where flag -P stands for proxy followed by proxy URL.

Now, all the requests from angular frontend will be send to URL http://localhost:9999

http-server has many additional features and configuration options such as enabling CORS, suppressing log messages, automatically open browser on startup etc.
These options can be explored here.