DEV Community

Pavan K Jadda for This is Angular

Posted on • Updated on

Angular SSR with Angular Universal and Deploy with Docker

This blog post explains the process to enable Angular Server Side Rendering(SSR) with Angular Universal and the process to deploy it in Docker container

The source code of the application demonstrated in this post present in Github https://github.com/pavankjadda/angular-ssr-docker


Setup Angular Application

If you already have an existing Angular application, you can skip this step

  • Create new application ```

ng new angular-ssr-docker

* Add Angular material and 
Enter fullscreen mode Exit fullscreen mode

ng add @angular/material

* Import indigo-pink theme to application. Add following line to styles.scss
Enter fullscreen mode Exit fullscreen mode

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

* Create two components, Login and Home.
 - When user logs in, it redirects him to home page
 - 


## Add Angular Universal
Based on instructions from Angular docs,
* Add Angular Universal to the project
Enter fullscreen mode Exit fullscreen mode

ng add @nguniversal/express-engine

and it will create the following folder structure
Enter fullscreen mode Exit fullscreen mode

src/
index.html app web page
main.ts bootstrapper for client app
main.server.ts * bootstrapper for server app
style.css styles for the app
app/ ... application code
app.server.module.ts * server-side application module
server.ts * express web server
tsconfig.json TypeScript base configuration
tsconfig.app.json TypeScript browser application configuration
tsconfig.server.json TypeScript server application configuration
tsconfig.spec.json TypeScript tests configuration

* By default when you add Angular Universal to project Angular CLI creates **projects/angular-ssr-docker/architect/serve-ssr** section in **angular.json** with 2 configurations `development` and `production`

* The `development` configuration will be used when run `npm run dev:ssr` and `production` configuration will be user when you build application in production mode

* See below snapshot of typical configuration. For some reason, if you can not start an application make change development section as below
Enter fullscreen mode Exit fullscreen mode

"configurations": {
"development": {
"browserTarget": "pdts:build",
"serverTarget": "pdts:server",
"proxyConfig": "src/proxy.conf.json"
},

![Screen Shot 2021-10-11 at 10.13.45 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scsjhmib5onk4exhrvu6.png)


* If you are like me, you can define additional configurations like dev, test as shown above
* Now, open terminal in the project and start JSON server (mocks backend)
Enter fullscreen mode Exit fullscreen mode

json-server - watch db.json

* Open another terminal in same project and run the application
Enter fullscreen mode Exit fullscreen mode

npm run dev:ssr

* Go to http://localhost:4200 to see the application in action

## Build Docker image
Before building docker image, you need to build the application
1. Build the application with following command. Make sure to replace `--configuration=dev` with appropriate profile name like `test` or `production` when you build the application for different environment
Enter fullscreen mode Exit fullscreen mode

sudo ng build --configuration=dev && sudo ng run pdts:server

2. Add following **Dockerfile** to build the docker image
Enter fullscreen mode Exit fullscreen mode

Use Node Slim image

FROM node:14-slim

Copy source code

COPY . .

Start the application

CMD ["node", "dist/angular-ssr-docker/server/main.js"]


3. Build Docker image with following command
Enter fullscreen mode Exit fullscreen mode

docker build -t angular_ssr_docker .

4. Run the image on port 4000(default). You can change to different by changing port flag -p 5001:4000
Enter fullscreen mode Exit fullscreen mode

docker run -p 4000:4000 angular_ssr_docker

5. Go to http://localhost:4000 to see the application in action

---

The source code of the application can be found in [Github](https://github.com/pavankjadda/angular-ssr-docker). Happy Coding :)

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen
Collapse
 
pavankjadda profile image
Pavan K Jadda

Thanks. Updated post with Github link