Code Monkey home page Code Monkey logo

springboot-react-rabbitmq-docker-redis's Introduction

Spring Boot CRUD Project with ReactJS Frontend in a Docker Container

A Sampe App for modern CRUD developed with Spring Boot on the backend with ReactJS Frontend.It also demonstrates how to get real time push back updates through rabbitmq,how to handle stale data with spring data rest and caching with redis. Everything running inside docker containers.

Tech Stack Used:Spring Data Rest, RabbitMQ,WebSocket, Caching, Redis Fabric8,Webpack

Quickstart -This Doc covers the docker branch, please switch to the docker branch before reading any further.

To run the app you just need to:

git clone https://github.com/kazi-imran/springboot-react-rabbitmq-docker-redis.git 
git checkout docker
mvn clean package docker:build
mvn docker:run

To check everything is running you can:

# Visit the homepage
http://localhost:8080

# Click on Customer Tab.
# Click on LoadCustomers.
# Reload the page or click on customers again 
# You can also create new customers by clicking add customer

Docker Conatiners

When the application starts, 3 docker containers pops up:

1. The application itself.(A spring boot application running on openjdk in a container)
2. A rabbitmq container 
3. A redis container

It's a maven project and the docker containers are configured using fabric8io plugin

RabbitMQ

When we are talking about updates in a crud app, we are talking about 3 scenarios.They are -

# Updating the list,when an entity is created
# Updating the list,when an entity is deleted
# Updating an entity,when an entity contains stale data, and another user updates that stale entity 

Push back messaging covers the first 2 scenarios, and in case of stale data update , a feature of spring data rest has been used. Spring data rest contains built in E-Tag conditional update . Basically, it acquires optimistic lock using javax.version. Combined with that, any PUT request with header 'If-Match' and entity versioning information, Spring data rest checks if the updated information is stale, if the data is stale spring data rest sends a 412. rejecting the updated entity. In that case, we have to fetch the updated information and try updaing it again,Pretty much everything to do with stale data update is happening inside the frontend part, cause spring data rest already provides that provision out of the box. The rabbitmq container is preconfigured(see rabbitmqdockerfile) with 3 plugins -rabbitmq_management,rabbitmq_stomp and rabbitmq_web_stomp.

Caching

For caching we are using redis. Here we have a redis docker container which acts as our caching storage. Through maven config we are conntecting our spring boot container with redis container. Other than that, data is cached through Spring caching.

Frontend-React.js

Most of the coding for this app is done inside the frontend part. It uses react , redux-form, react-router,websocket, webpack etc.

springboot-react-rabbitmq-docker-redis's People

Contributors

kazi-imran avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

springboot-react-rabbitmq-docker-redis's Issues

Help Regarding Rabbit MQ

Hi, Hope you will be having good time. I need your help regarding implementation of Rabbit MQ with my spring boot micro services project.
Basically my requirement is that I have a web app in spring boot and oracle and which is based on CRUD operations. I am using react for front end. Now i want to use rabbit mq in order to update my applications frontend (automatically without refreshing the page) whenever there is any change occurs in database.

Can you please provide me a detailed sample application? I ll be obliged please.

Regards,
Aamir
[email protected]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.