Skip to content

A very simple chat application using Spring Boot, Vue.js (in TypeScript), gRPC, gRPC-Web and EnvoyProxy.

License

Notifications You must be signed in to change notification settings

angelomelonas/grpc-spring-boot-vue-chat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gRPC-Web Chat

A very simple Hello World gRPC (and gRPC-Web) proof of concept project using Spring Boot, Vue.js and EnvoyProxy.

Requirements

Docker

Install Docker

Protoc
  1. Go to the releases page of Protobuf
  2. Select the latest release version
  3. Scroll down to Assets and download the applicable file (e.g., for Windows protoc-3.8.0-rc-1-win64.zip)
  4. Extract the contents and add to your path (e.g., for Windows, simply add the protoc.exe to your path)
gRPC-Web Protoc Plugin
  1. Go to the releases page of gRPC-Web
  2. Select the latest release version
  3. Scroll down to Assets and download the applicable file (e.g., for Windows protoc-gen-grpc-web-1.0.4-windows-x86_64.exe)
  4. Extract the protoc-gen-grpc-web file a directory and it to your path (e.g., for Windows add the protoc-gen-grpc-web.exe file to your path)

Install and Run

gRPC-Web Chat

Execute mvn clean install to build and compile the project. This will also generate all the necessary Protocol Buffer files for the backend and frontend.

Spring Boot Backend

Simply run the ChatApplication.java as a normal Java application. This will start the server. See the resources/application.properties file for server details. By default it runs on http://localhost:8000.

Envoy Proxy

To build and run the Docker container, follow the instructions below.

Windows

Execute the following Docker commands to build and run the EnvoyProxy container:

$ docker build -t helloworld/envoy -f ./envoy.Dockerfile .
$ docker run -d -p 8080:8080 helloworld/envoy
Unix

Note: This project is configured for Windows by default. To run Envoy on Unix, change the following line in the envoy.yaml file (see here for more details):

hosts: [{ socket_address: { address: host.docker.internal, port_value: 9090 }}]

to

hosts: [{ socket_address: { address: localhost, port_value: 9090 }}]

Now execute the following Docker commands to build and run the EnvoyProxy container:

$ docker build -t helloworld/envoy -f ./envoy.Dockerfile .
$ docker run -d -p 8080:8080 --network=host helloworld/envoy

Vue Frontend

To specifically generate Proto files for the front-end client, navigate to the frontend directory and run the following command:

$ npm run proto

To serve the frontend code in a development environment, execute:

$ npm run serve -- --port 8081    # This serves the front end on port 8081.

References and Resources

About

A very simple chat application using Spring Boot, Vue.js (in TypeScript), gRPC, gRPC-Web and EnvoyProxy.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published