Gain insights into building Reactive Web Applications with Spring Boot 2 and Spring WebFlux, from database integration to front-end. Explore Reactive vs MVC, performance, and deployment with Docker.   


Full Reactive Stack with Spring Boot 2 and Spring WebFlux.png

tarball.tar.gz

initialzr

spring-mongo-only

Lesson-playing-with-reactive-endpoints

angular-app-with spring-mongo

angular-app-with spring-mongo-copy

spring-mongo-only-copy

initialzr-copy

This course is your guide to using Spring Boot 2 and Spring WebFlux to create Reactive Web Applications. 

You will learn how to build a full-reactive system from the database (MongoDB reactive) to the front-end (Angular), using a Reactive programming strategy leveraged by Spring WebFlux, with the simplicity offered by Spring Boot 2. 

Beyond that though, you will be able to compare the Spring WebFlux with the standard MVC approach as well, covering the main aspects such as simplicity, performance, user experience, and more.

The last part of the course ties it all up by teaching you to run the application using Docker compose. By the end of this course, you will have a great new skill for your resume and you’ll be able to build your own projects using the full Reactive stack.

Full Reactive Stack: Spring Boot 2 & Spring WebFlux

We'll build these images and run the whole application via a Docker Compose file that is located in the docker folder [in the GitHub repository](https://github.com/mechero/full-reactive-stack/tree/master/docker).

> These instructions are for locally running the application with Docker Compose.


version: "2"

services:
  mongo:
    image: mongo:3.4
    hostname: mongo
    ports:
      - "27017:27017"
    volumes:
      - mongodata:/data/db
    networks:
      - network-reactive

  spring-boot-reactive:
    build:
      context: ../spring-boot-reactive-web
    image: spring-boot-reactive-web-tpd
    environment:
      # Overrides the host in the Spring Boot application to use the Docker's hostname
      - SPRING_DATA_MONGODB_HOST=mongo
    ports:
      - "8080:8080"
    networks:
      - network-reactive

  angular-reactive:
    build:
      context: ../angular-reactive
    image: angular-reactive-tpd
    ports:
      - "4200:1827"
    networks:
      - network-reactive

volumes:
  mongodata:

networks:
  network-reactive:


This file is all we need for Docker to find out how to build the corresponding images and how to run the containers together. Let's describe its main features:

1. The build context for the backend and frontend images point to the corresponding folders where we have the required *Dockerfile* files. Therefore, when we use `docker-compose build`, Docker builds the images using the instructions included in each folder.

2. The `mongo` service directly uses the official image. Note that we override the hostname for Spring Boot to easily locate the MongoDB engine in the Docker network using the URL `http://mongo:27017`. As you can see, the three services are connected to the same network, declared at the bottom of the file (`network-reactive`). The MongoDB service also uses a Docker volume, which gives us persistence between container restarts.

3. The backend service exposes the port, `8080`, and declares an environment variable, `SPRING_DATA_MONGODB_HOST=mongo`. By doing this, we replace the default's Spring Boot configuration for the database host, and we set it to the name of the host that we configured for the MongoDB engine.

4. The Docker image we use as a base for the frontend, Nginx, runs the web server on port `1827`. Since we already configured CORS to allow the origin located at port `4200`, we can expose this one instead, and redirect it to the container's port. You could also configure Nginx to run on a different port.

To build our images, navigate to the `docker` folder and run this command:

```bash
$ docker-compose build
```

When we're ready to run the complete system, we can execute this command:

```bash
$ docker-compose up
```

If you want to stop them, you can run `docker-compose stop` from a different terminal or press Ctrl-C from the one that is running the containers. You can also run Docker Compose in daemon mode if you prefer (with the `-d` flag).


Learn how to run the whole full reactive stack application with Docker Compose.

Reactive Web

Full Reactive Stack Backend

Connecting Angular With the WebFlux Backend

Conclusion

Appendix

Putting Everything Together With Docker Compose