Build a front-end React page

Now that you have created your back-end RESTful service, it's time to get your front end up and running.

In order to get full benefit from taking this lesson, you need to:

• Create a program.
• Scale an application.

In this lesson, you will:

• Get your front-end application up and running in your Kubernetes cluster.

Create a React front-end program called quotesweb

In your quotesweb/k8s directory on your local machine, run the following three commands to create the Deployment, the Service, and the Route:

kubectl create -f quotesweb-deployment.yaml

kubectl create -f quotesweb-service.yaml

kubectl create -f quotesweb-route.yaml

Figure 6 shows an example.

To view the quotesweb application, run the following command:

kubectl get routes

Figure 7 shows an example.

Use the route for quotesweb and paste that into your browser. This will take you to the QuoteWeb application in your browser. However, you will still need to provide the route to the back-end service (quotes) in order to start retrieving data. In the highlighted text box, enter the URL of the back-end quotes service, as shown in Figure 8.

There are three important things to remember at this point:

• You retrieved that route earlier in this activity.
• You need to prefix the URL with the http:// protocol (sometimes called “scheme”).
• You have to append /quotes/random to the URL in order to get a random quote every five seconds.

After entering the URL, click Start. (Figure 9)

Scale the back-end app to two pods and observe the result in quotesweb

At this point, you have two apps (or Kubernetes services) running in our cluster. As you watch the quotesweb application in your browser, you will notice that the hostname is always the same. That's because you have one pod running our quotes service. You can prove this by running the following optional command:

kubectl get pods

Figure 10 shows an example.

While Kubernetes can be configured to auto-scale by spinning up additional pods, you can mimic this behavior from the command line and observe the results in our browser. As we increase the number of pods, you'll notice that there are multiple hosts serving quotes.

Run the following command to increase the number of pods to three:

kubectl scale deployments/quotes --replicas=3

Ready to move on? In the next lesson, you'll switch out the hard-coded quotes for quotes stored in a MariaDB database.