• Stars
    star
    269
  • Rank 152,662 (Top 4 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created about 8 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

ReactJS (with TypeScript) and Spring Boot version of the Spring Petclinic sample application

React Frontend for Spring Boot PetClinic demo

Build Status

This project is a port of the Spring (Boot) PetClinic demo with a frontend built using ReactJS and TypeScript.

I have tried to make as few modifications to the backend code as necessary to the spring-boot branch of the original sample project. Mainly I've added the new package org.springframework.samples.petclinic.web.api that contains the REST Api that is used by the React frontend. In this package most of the classes are taken from the angularjs version of the demo.

Related projects

Note there is another Spring PetClinic example that uses React: spring-petclinic-graphql. Beside React that example uses GraphQL for API queries instead of the REST API.

Contribution

If you like to help and contribute (there's lot root for improvements! I've collected a list of ideas here: TODO.md) you're more than welcome! Please open an issue or contact me on Twitter so we can discuss together!

Install and run

Note: Spring Boot Server App must be running before starting the client!

To start the server, launch a Terminal and run from the project's root folder (spring-petclinic):

./mvnw spring-boot:run

When the server is running you can try to access the API for example to query all known pet types:

curl http://localhost:8080/api/pettypes

After starting the server you can install and run the client from the client folder:

  1. npm install (installs the node modules and the TypeScript definition files)
  2. PORT=4444 npm start
  3. Open http://localhost:4444

(Why not use the same server for backend and frontend? Because Webpack does a great job for serving JavaScript-based SPAs and I think it's not too uncommon to run this kind of apps using two dedicated server, one for backend, one for frontend)

Feedback

In case you have any comments, questions, bugs, enhancements feel free to open an issue in this repository. If you you want to follow me on twitter, my handle is @nilshartmann.


From the original sample README file:

Understanding the Spring Petclinic application with a few diagrams

See the presentation here

Running petclinic locally

	git clone https://github.com/spring-projects/spring-petclinic.git
	cd spring-petclinic
	git checkout springboot
	./mvnw spring-boot:run

You can then access petclinic here: http://localhost:8080/

In case you find a bug/suggested improvement for Spring Petclinic

Our issue tracker is available here: https://github.com/spring-projects/spring-petclinic/issues

Database configuration

In its default configuration, Petclinic uses an in-memory database (HSQLDB) which gets populated at startup with data. A similar setup is provided for MySql in case a persistent database configuration is needed. Note that whenever the database type is changed, the data-access.properties file needs to be updated and the mysql-connector-java artifact from the pom.xml needs to be uncommented.

You may start a MySql database with docker:

docker run -e MYSQL_ROOT_PASSWORD=petclinic -e MYSQL_DATABASE=petclinic -p 3306:3306 mysql:5.7.8

Working with Petclinic in Eclipse/STS

prerequisites

The following items should be installed in your system:

Note: when m2e is available, there is an m2 icon in Help -> About dialog. If m2e is not there, just follow the install process here: http://eclipse.org/m2e/download/

Steps:

  1. In the command line
git clone https://github.com/spring-projects/spring-petclinic.git
  1. Inside Eclipse
File -> Import -> Maven -> Existing Maven project

Looking for something in particular?

Spring Boot Configuration
The Main Class PetClinicApplication.java
Properties Files application.properties
Caching Use of EhCache CacheConfig.java ehcache.xml
Dandelion DatatablesFilter, DandelionFilter and DandelionServlet registration DandelionConfig.java
Spring MVC - XML integration CustomViewsConfiguration.java
OthersFiles
JSP custom tags WEB-INF/tags createOrUpdateOwnerForm.jsp
Bower bower-install maven profile declaration inside pom.xml
JavaScript libraries are defined by the manifest file bower.json
Bower configuration using JSON
Resource mapping in Spring configuration
sample usage in JSP
Dandelion-datatables ownersList.jsp vetList.jsp web.xml datatables.properties

Interaction with other open source projects

One of the best parts about working on the Spring Petclinic application is that we have the opportunity to work in direct contact with many Open Source projects. We found some bugs/suggested improvements on various topics such as Spring, Spring Data, Bean Validation and even Eclipse! In many cases, they've been fixed/implemented in just a few days. Here is a list of them:

Name Issue
Spring JDBC: simplify usage of NamedParameterJdbcTemplate SPR-10256 and SPR-10257
Bean Validation / Hibernate Validator: simplify Maven dependencies and backward compatibility HV-790 and HV-792
Spring Data: provide more flexibility when working with JPQL queries DATAJPA-292
Eclipse: validation bug when working with .tag/.tagx files (has only been fixed for Eclipse 4.3 (Kepler)). See here for more details. STS-3294

Contributing

The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.

For pull requests, editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.

More Repositories

1

spring-petclinic-microservices

Distributed version of Spring Petclinic built with Spring Cloud
Java
1,622
star
2

spring-petclinic-rest

REST version of the Spring Petclinic sample application
Java
459
star
3

spring-framework-petclinic

A Spring Framework application based on JSP, Spring MVC, Spring Data JPA, Hibernate and JDBC
CSS
360
star
4

spring-petclinic-kotlin

Kotlin version of Spring Petclinic
Kotlin
345
star
5

spring-petclinic-angular

Angular 16 version of the Spring Petclinic sample application (frontend)
TypeScript
199
star
6

spring-petclinic-graphql

PetClinic Example based on GraphQL
CSS
191
star
7

spring-petclinic-cloud

Fork of the Spring Cloud Microservices project packaged to be deployed on several Cloud platforms: Kubernetes and Cloud Foundry
Java
135
star
8

spring-petclinic-data-jdbc

Spring Data JDBC version of the Spring Boot Petclinic
Java
102
star
9

spring-petclinic-reactive

Reactive version of Spring PetClinic sample application based on Spring Webflux and Cassandra
Java
71
star
10

spring-petclinic-angularjs

AngularJS 1 and Spring Boot 2 version of the Spring Petclinic sample application
Java
71
star
11

spring-petclinic-microservices-config

Configuration repository for distributed Spring Petclinic application
44
star
12

spring-petclinic-htmx

Htmx version of the Spring PetClinic sample application
CSS
27
star
13

spring-petclinic-hilla

Hilla implementation of the Spring PetClinic sample
Java
8
star
14

spring-petclinic-vaadin-flow

Vaadin Flow implementation of the Spring PetClinic sample
Java
8
star
15

spring-petclinic.github.io

Spring Petclinic organisation website
CSS
7
star
16

spring-petclinic-mustache

Classic Spring PetClinic with Mustache templates
CSS
4
star
17

spring-petclinic-cloud-config

Configuration repository for the Spring Petclinic Cloud project
2
star