Demo to build a realtime Angular app with a Vert.x backend and distributed event bus
Branch: master
Clone or download
Latest commit 58f6001 Sep 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client Minor package update Sep 17, 2018
server Versions upgrade: Vertx upgraded from 3.3.0 to 3.5.0 Jan 1, 2018
.editorconfig Initial commit Apr 2, 2017
.gitignore Initial commit Apr 2, 2017
README.md Versions upgrade: Vertx upgraded from 3.3.0 to 3.5.0 Jan 1, 2018
ngrx-realtime-app.png Initial commit Apr 2, 2017
package-lock.json

README.md

Introduction

This is a proof of concept that demonstrates the ability to build a realtime app with an Angular web client (powered by a Ngrx data architecture) and a Vert.x server.

Please check the Medium article Building a realtime web app with Angular/Ngrx and Vert.x for more info.

Goals

  • share and synchronize a common (Ngrx-based) state between multiple connected clients,
  • distribute in realtime (Ngrx-based) actions across multiple connected clients (which impact local states/reducers).

Note: @ngrx/store is a RxJS powered state management inspired by Redux for Angular apps. It's currently the most popular way to structure complex business logic in Angular apps.

Demo

For the demo, the app uses a simple counter example, with increment, decrement and reset actions.

Demo

Running the apps locally

# Clone the repo
git clone https://github.com/benorama/ngrx-realtime-app.git

Prerequisites:

Vertx server app

First, compile and run Vertx app locally.

# Go into core module directory
cd ngrx-realtime-app/server

# Build project
./gradlew shadowJar
# Or gradle shadowJar if you have Gradle installed locally

# Run the server app locally
java -jar build/libs/server-1.0.1-fat.jar

Angular client app

# Go into Angular app directory
cd ../client

# Install dependencies (you can get a burger...)
npm install
# Or yarn

# Run the client app locally
ng serve

To test the app:

  • open the client app in two separate browser windows,
  • login with 2 different user names,
  • increment/decrement/reset counter

Bugs and feedback

If you have any questions or suggestions to improve the demo app, don't hesitate to submit an issue or a pull request!