Skip to content

Latest commit

 

History

History
255 lines (134 loc) · 3.42 KB

11_Integrating_a_Server_Side_Rendered_React_App.md

File metadata and controls

255 lines (134 loc) · 3.42 KB

[Stephen Grider] Microservices with Node JS and React [ENG, 2020]

11. Integrating a Server-Side-Rendered React App


01. Starting the React App


02. Reminder on Server Side Rendering


03. Basics of Next JS

$ cd app
$ mkdir client
$ cd client
$ npm init -y
$ npm install --save react react-dom next

$ npm run dev

04. Building a Next Image


05. Running Next in Kubernetes

If chome will block page for security reasons, type: thisisunsafe

browser --> https://ticketing.dev/


Application


06. Note on File Change Detection


07. Adding Global CSS

$ cd client
$ npm install --save bootstrap

Application


08. Adding a Sign Up Form

https://ticketing.dev/auth/signup


09. Handling Email and Password Inputs


10. Successful Account Signup

$ cd clien
$ npm install --save axios

11. Handling Validation Errors


Application


12. The useRequest Hook


13. Using the useRequest Hook


Application


14. An onSuccess Callback


15. Overview on Server Side Rendering


16. Fetching Data During SSR


17. Why the Error


Application


18. Two Possible Solutions


Application


Application


19. Cross Namespace Service Communication


Application


Application


20. When is GetInitialProps Called


Application


Application


21. On the Server or the Browser


22. Specifying the Host


http://SERVICENAME.NAMESPACE.svc.cluster.local

$ kubectl get ingress --all-namespaces
NAMESPACE   NAME          CLASS    HOSTS           ADDRESS      PORTS   AGE
default     ingress-svc   <none>   ticketing.dev   172.17.0.2   80      123m

// NOT WORKS for ME.
http://ingress-svc.default.svc.cluster.local

$ kubectl exec -ti auth-deployment-5494fcdc44-hw75w -- nslookup 172.17.0.2
nslookup: can't resolve '(null)': Name does not resolve

Name:      172.17.0.2
Address 1: 172.17.0.2 172-17-0-2.kubernetes.default.svc.cluster.local

23. Passing Through the Cookies


Application


Application


24. A Reusable API Client


25. Content on the Landing Page


26. The Sign In Form


Application


27. A Reusable Header


28. Moving GetInitialProps


29. Issues with Custom App GetInitialProps


30. Handling Multiple GetInitialProps


31. Passing Props Through


32. Building the Header


33. Conditionally Showing Links


34. Signing Out


Application




Marley

Any questions in english: Telegram Chat
Любые вопросы на русском: Телеграм чат