4

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?

Knight
  • 576
  • 7
  • 19
  • 2
    If you run ng-build, it will create a `dist` directory. If you navigate to the `index.html` file from that directory it should work – user184994 Dec 21 '17 at 18:03

1 Answers1

8

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.

Andy Shinn
  • 26,561
  • 8
  • 75
  • 93
  • 1
    Excellent answer! I'd note that if you deploy to two separate containers you will have to set the [CORS header](https://stackoverflow.com/a/10636765/2033671) from your server-side app –  Dec 21 '17 at 18:10
  • Understanding the build process certainly helped as this was my first foray into JS frameworks. CORS was an issue at first for more complicated requests as Professor Allman said it would be. But that was outside the scope of this question. Your answer helped quite a bit! – Knight Apr 20 '18 at 17:10