grpc-web-chat
grpc-web-chat copied to clipboard
A simple project demonstrating how both a Go and Java back end can power the same Vue.js front end using gRPC.
gRPC Web Chat (Work in Progress)
A simple project demonstrating how both a Go and Java back end can power the same Vue.js front end using gRPC.
- The server consists either of a Java or Go Lang project.
- The Java project uses the Spring Boot framework with Maven for dependency management.
- TODO: Go Lang project...
- The client is written in TypeScript and uses the VueJS framework. It also uses Vuetify and the official gRPC-Web library.
- The Envoy Proxy is used to translate requests and responses between the browser and the gRPC server. Check out the state of gRPC in the browser.
- TLS/SSL is used to allow HTTP2 connections between the browser and Envoy. This is to circumvent browser connection limitations. More on this here.
Overview

Project Branches
The root of the project contains the shared API and client code. Checkout the relevant server branch in your language of choice.
master -> dev-stable [-> dev] -> go-dev-stable [-> go-dev]
-> java-dev-stable [-> java-dev]
Installation for Development
Requirements
Docker
- Install Docker on your local machine.
Protoc
- Go to the releases page of Protobuf.
- Select the latest release version.
- Scroll down to
Assetsand download the applicable file (e.g., for Windowsprotoc-3.8.0-rc-1-win64.zip). - Extract the contents and add to your path (e.g., for Windows, simply add the
protoc.exeto your path).
gRPC-Web Protoc Plugin
- Go to the releases page of gRPC-Web.
- Select the latest release version.
- Scroll down to
Assetsand download the applicable file (e.g., for Windowsprotoc-gen-grpc-web-1.0.4-windows-x86_64.exe). - Extract the
protoc-gen-grpc-webfile a directory and it to your path (e.g., for Windows add theprotoc-gen-grpc-web.exefile to your path).
Server
Java
- Checkout the
java-dev-stablebranch. - Execute
mvn clean installin the root directory to build and compile the project.- This will generate all the necessary Protocol Buffer files for the server and client.
- This will execute the
create-cert.shscript, generating all necessary keys and certificates for the Vue development server and the Envoy Proxy.
- To securely serve the Vue files on the Spring Boot server for production, execute the
create-cert-java.shscript. - Simply run the
ChatApplication.javaas a normal Java application. This will start the server. See theresources/application.propertiesfile for server configuration details.
Go
- Checkout the
go-dev-stablebranch. - TODO: Run gradle install/build script that builds files, generates protos, runs the create-cert.sh script, etc.
- To serve the Vue files on the Go static file server for production, execute the
create-cert-go.shscript. - TODO: Run the Go server somehow...
Envoy Proxy
- From the root directory, run the
create-ca-cert.shscript to generate the Certificate Authority. - In the same directory, run the
create-cert.shscript. See theenvoy/README.mdfile for more details.- Note: This step should be unnecessary for the Java project if the
mvn clean installcommand was used.
- Note: This step should be unnecessary for the Java project if the
- Run
docker-compose upfrom the root directory to start the Envoy proxy.- Note: Remember to remove the Docker image after generating new certificates!
Client Development Server
- Run
npm installand thennpm run proto.- Note: This step is unnecessary after running the
mvn clean installcommand for the Java server.
- Note: This step is unnecessary after running the
- Run
npm run serveto start the development server on https://localhost:443.
Installation for Production
Requirements
Docker
- Install Docker on the Linux host machine. Follow the relevant instructions here:
- Install Docker Compose by running the following two commands (see more on Install Docker Compose):
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose
Java
- From within the project root directory, run the
mvn clean install -Ucommand to build the Java project. - Copy the generated
.jarfile to a directory on the host machine. - Run the Java Server with
java -jar server-<version>.jarto start the server.
Go
- TODO: Figure out how to run the Go server on production.
Envoy Proxy
- Modify the
envoy.yamlfile for production. Change the following:- Change the
domainsvalue to the host machine IP address (or*to allow all domains). - Change the
corsallow_originto the correct domain (e.g., https://example.com). You can also use*to allow all origins. - Change the
hostssocket addressto the machine IP address.
- Change the
- Copy the
envoydirectory to a directory on the host machine. - Copy the
docker-compose.ymlfile one level up from theenvoydirectory copied in the previous step. - Run
docker-compose upto build and deploy the Docker image.- NOTE: Remember to remove the docker image before running the
docker-composecommand if any changes to Envoy or the certificates were made.
- NOTE: Remember to remove the docker image before running the
Client
- If using a custom CA, add the relevant
ca.crtfile to the Trusted Root Certificate Authorities on your local machine. - The client should now be running on
https://<host-machine-ip>.