How do I do rapid prototyping for front-end?

[richi1807]

Running a live devserver just for frontend

I want to run a live server through which I can rapidly iterate over the frontend. I'm new to go, kubernetes and skaffold so I'm asking this is a question. What would work for me -

1. Make changes to html/css in front-end.
2. Hot reload gets triggered. And immediately the changes are loaded on the front-end.

Here are the problems I'm seeing with skaffold dev.

1. It deploys everything to kubernetes and takes 30s-1min for the new changes to be loaded.
2. During reload port forwarding gets disabled. So we have to redo the port forwarding.

I'm taking about something similar to a live server in visual studio. When I try to run go mod and create a simple file watch and rerunning frontend binary, I get an error that port address environment variables are missing.

I can try exposing the ports for all the kubernetes services that frontend talks to and thereby accomplish something like a live reload for frontend. Is there an easier way?

Please advise,

[bourgeoisor]

For the frontend, I do something along those lines:

• Deploy everything in Kubernetes.
• Port-forward the various services locally.

  kubectl port-forward service/productcatalogservice 3550:3550 &
  kubectl port-forward service/currencyservice 7000:7000 &
  kubectl port-forward service/cartservice 7070:7070 &
  kubectl port-forward service/recommendationservice 8080:8080 &
  kubectl port-forward service/shippingservice 50051:50051 &
  kubectl port-forward service/checkoutservice 5050:5050 &
  kubectl port-forward service/adservice 9555:9555

• Set some envs (either in the terminal or in the IDE you use for the frontend) to point to these local port-forward.

  export PORT=8081
  export PRODUCT_CATALOG_SERVICE_ADDR=localhost:3550
  export CURRENCY_SERVICE_ADDR=localhost:7000
  export CART_SERVICE_ADDR=localhost:7070
  export RECOMMENDATION_SERVICE_ADDR=localhost:8080
  export SHIPPING_SERVICE_ADDR=localhost:50051
  export CHECKOUT_SERVICE_ADDR=localhost:5050
  export AD_SERVICE_ADDR=localhost:9555
  export ENABLE_PROFILER=0

• Build and run only the frontend locally.

[richi1807]

Thanks so much for your response. I got the local setup to work with some hiccups.

1. Shopping assistant service is not deployed by default from skaffold but it seems like frontend service expects a port for that.
2. Both recommendation service and frontend service are listening on the same port it seems. This one is minor error and we can just not deploy frontend to avoid this error (or use a different port).

There is one more error :-

rpc error: code = Unavailable desc = connection error: desc = "transport: Error while dialing: dial tcp [::1]:3550: connect: connection refused"
could not retrieve products

It seems like the port is forwarded but is unable to connect to the pod. I'm fairly new to Kubernetes but I think I should be able to debug it. Just wanted to respond here about the progess and let you know that your suggestions helped a lot!

[richi1807]

Hi, I was finally able to fix these issues and was able to run the go frontend service in a live server. Here are the steps in case someone else needs them :-

1. expose the port and env variables as you mentioned.
2. install go fresh (its a file watcher) via go install command.
3. run fresh <$GOPATH/bin/fresh>

And your live server will start running. Only thing is that the page still needs to be refreshed. That's something I can live with for now. So resolving this issue. Thanks so much for your help