Create your front-end application

In this lesson, you will combine what you learned in Lesson 1 to complete your server-side injection.

What you need

• A Developer Sandbox account
• The oc command line interface 
• A web browser to access your sandbox dashboard

What you will do

• Start a front-end application
• View the results

Create your front-end application

Using the URL you saved from of the previous lesson, run the following two commands at the command line:

oc new-app https://github.com/redhat-developer-demos/qotd-frontend –strategy=docker –env QOTD_API_URL={insert url here} --labels=tier=frontend,language=html,qotd=frontend,sandbox=environment-variables

Here’s an example:

oc new-app https://github.com/donschenck/qotd-frontend --strategy=docker --env=QOTD_API_URL=https://qotd-rhn-engineering-dsch-dev.apps.sandbox-m3.1530.p1.openshiftapps.com/quotes/random --labels=tier=frontend,language=html,qotd=frontend,sandbox=environment-variables

oc create route edge --service=qotd-frontend --port=8080

View the results

Switch to the OpenShift web dashboard and, in the Developer/Topology view, select the URL icon to view the front-end application in your browser (Figure 1).

In the browser, you will see the URL listed at the top (Figure 2). Select Get another random quote to retrieve a quote from the back-end service.

The quote will appear (Figure 3).

Works for other languages too

This technique works for other languages as well. Here’s an example written in Python.

The Dockerfile:

# UBI Builder

FROM registry.access.redhat.com/ubi9/ubi:9.2-755 AS ubi-builder


# create rootfs directory where to copy the final filesystem

RUN mkdir -p /mnt/rootfs


# install runtime tools (including python)

RUN yum install --installroot /mnt/rootfs coreutils-single curl shadow-utils \

   findutils python3.11 pip \

    --releasever 8 --nodocs -y && \

    yum --installroot /mnt/rootfs clean all && \

    rm -rf /mnt/rootfs/var/cache/* /mnt/rootfs/var/log/dnf* /mnt/rootfs/var/log/yum.*


# use the final root filesystem as default directory

WORKDIR /mnt/rootfs


COPY ./start.sh /mnt/rootfs

RUN chmod +x /mnt/rootfs/start.sh


FROM scratch as python-builder

COPY --from=ubi-builder /mnt/rootfs/ /

# Create frontend user

RUN groupadd -g 1000 frontend && useradd -u 1000 -g frontend -G root frontend


# Install python dependencies for the app

COPY requirements.txt /app/requirements.txt

RUN pip install -r /app/requirements.txt


# copy the app

COPY app.py /app/app.py

COPY templates /app/templates

COPY static /app/static


RUN find /app -exec sh -c "chgrp 0 {}; chmod g+rwX {}" \;



# Use scratch image and then copy python app fs

FROM scratch

COPY --from=python-builder / /


# expose frontend port

EXPOSE 5000


USER 1000


WORKDIR /app


ENV FLASK_APP=app.py FLASK_RUN_HOST=0.0.0.0


# start flask

ENTRYPOINT ["/start.sh"]



The file “start.sh”:



sed -i "s/{APP_SERVER}/${APP_SERVER}/" /app/app.py

flask run

You can view the entirety of this Python example at the GitHub repo.

Developer notes

• The back-end application is written in Go.
• The front-end application is written in HTML and JavaScript.

Move it, remove it, improve it

Move

You can download all of the YAML files associated with this application and use them to move it to another OpenShift instance by using the Export Application button in the upper right corner of the OpenShift dashboard.

Remove

You can this activity by using the following command:

• To remove the objects associated with this learning path from your sandbox:

  oc delete all -l sandbox=environment-variables

• You can remove parts of this activity by using labels. Learn about labels with the Using Red Hat OpenShift labels learning path.

Improve

Some ideas to improve or alter this activity:

• Write your own back-end function in a different language.
• Alter the back-end function to read from a database.
• Write the front end in another language.
• Make the back end into a serverless function.