How can I serve an Angular 5 app without using ng serve?

Question

I can build and serve an Angular 5 project with ng serve and view it in my browser. I'd like to move the files onto a docker container because my final app needs to have a php backend.

When I move the same file system that runs with ng serve to a docker build and try to navigate to it, I receive a server error.

I know the container works properly because I can serve PHP files to the browser at the respective localhost port without any issues. So it needs to be something with Angular that is causing the error.

I've noticed that the ng new angular-tour-of-heroes project doesn't have an index.html in the root project directory. When I move the one in the src/ folder to the root, I still get nothing in the browser.

How can I serve an Angular app using Docker instead of ng serve?

Answer 1

This answer will be two parts since it sounds like you may not be familiar with the build process.

Building

This is more general to most JavaScript frameworks. There is usually a "build" process that will produce the static web application in some way that it can be served by a web server.

In the case of Angular, it is ng build. You can learn more about the command at https://github.com/angular/angular-cli/wiki/build. The ng build command would create a dist directory in your project where the built HTML, CSS< and JavaScript lives. The files in this directory are what you would push to your web server to serve.

Docker

Now that we understand how to get the source of the web application to serve, we want to run it as a container. Based on your question, I am assuming that you already have a Docker image with a web server. In this case, you could copy the dist folder to the same location as the existing Dockerfile that builds your web server and add a line to your Dockerfile such as:

COPY dist/* /my/webserver/root

If you can provide more information about your existing image, Dockerfile, and environment I could provide a better example of building and producing the Angular application to the final web server image.

Though, you don't necessarily need to serve the Angular application from your PHP application. If your Angular application is connecting to the PHP application they could still be separate Docker images and containers that are linked together.