10 - Integrating a server-side-rendered reactApp

Question 1

sample request-response flow with React APp

Answer 1

• browser opens index page
• html response sent
• browser requests JS files
• JS files response sent
• some data is requested
• order data sent

Question 2

nextjs project setup basics

Answer 2

install react, react-dom, next
set script dev - next

Question 3

how is rounting handled in nextjs

Answer 3

file-based routing from the pages folder

Question 4

sample dockerfile to build a an express server image

Answer 4

FROM node:alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD [“npm”, “run”, “dev”]

Question 5

client kubernetes deployment with networking service

Answer 5

apiVersion: apps/v1
kind: Deployment
metadata:
name: client-deployment
labels:
app: client
spec:
replicas: 1
selector:
matchLabels:
app: client
template:
metadata:
labels:
app: client
spec:
containers:
- name: client
image: node:14 # Replace with your own image
ports:
- containerPort: 3000
resources:
limits:
memory: “512Mi”
cpu: “500m”
command: [“node”, “app.js”]

apiVersion: v1
kind: Service
metadata:
name: client-srv
spec:
selector:
app: client
ports:
- name: client
- protocol: TCP
port: 3000 # The port to expose the service on
targetPort: 3000 # The port the container is listening on
nodePort: 30080 # The port exposed on the node (for NodePort only)
type: NodePort

Question 6

adding client images to skaffold setup

Answer 6

artifacts:
- image: imageName/auth
context: auth
docker:
dockerfile: Dockerfile
sync:
manual:
- src: ‘src//.ts’
dest: .
- image: imageName/client
context: client
docker:
dockerfile: Dockerfile
sync:
manual:
- src: ‘**/.js’
dest: .

Question 7

ingress config path

Answer 7

spec:
rules:
- host: ticketing.dev
http:
paths:
- path: /api/users/?(.)
backend:
serviceName: auth-srv
servicePort: 3000
- path: /?(.)
backend:
serviceName: client-srv
servicePort: 3000

Question 8

nextjs filechange detection config

Answer 8

module.exports = {
webpackDevMiddleware: config => {
config.watchOptions.poll = 300;
return config;
}
}

Question 9

bootstrap setup for SSR

Answer 9

import ‘bootstrap/dist/css/bootstrap.css’;

export default ({ Component, pageProps }) => {
return <Component { … pageProps} />
}

Question 10

handling signup inputs, email, password

Answer 10

password, email, errors, onSubmit

Question 11

useRequest hook flow

Answer 11

params: url, request method, request body

Question 12

doRequest method, with errors jsx

Answer 12

errors hook
await axiosmethod;

Question 13

onSuccess callback to route to homepage

Answer 13

const { doRequest, errors } = useRequest({
url: ‘/api/users/signup’,
method: ‘post’,
body: {
email, password
},
onSuccess: ( ) => Router.push(“/”)
});

Question 14

cross namespace service communication

Question 15

getInitialProps in k8s, ingress

Question 16

passing headers to request from server, getInitialProps

Question 17

creating a resuable API client