Build and Packaging
Test and Validation
The course is part of this learning path
This course is designed to help you master the skills of designing and building cloud-native applications.
Observe first hand the end-to-end process of building a sample cloud-native application using React, Go, MongoDB, and Docker. By taking this course you'll not only get to see firsthand the skills required to create a robust, enterprise-grade, cloud-native application, but you'll also be able to apply them yourself as all code and deployment assets are available for you to perform your own deployment:
What you'll learn:
- Understand the basic principles of building cloud-native applications
- Understand the benefits of using React for frontend web development
- Understand the benefits of using Go for backend API development
- Understand the benefits of using MongoDB as a database system
- And finally, you’ll learn how to package and run microservices as lightweight containers using Docker
This training course provides you with several hands-on demonstrations where you will observe first hand how to
- Build a React-based web frontend
- Build a Go-based API
- Deploy and configure a MongoDB database
- Deploy the full end-to-end application to Docker running locally
- A basic understanding of web-based software development
- Previous exposure to containers and containerization - in particular, docker
- Anyone interested in learning how to architect cloud-native applications
- Anyone interested in using modern development tools such as React, Go, MongoDB and Docker
- Anyone interested in containerization
- DevOps Practitioners
Okay, welcome back. In this lecture, I'll provide a code review of the key components that we created to build the React-based frontend. Just a quick note to remind you that all of the source code that makes up the React-based frontend is available for you to claim from the following location:
So, how exactly is the frontend composed? Let's break down the application into its individual components. VoteApp, the main component. It is responsible for rendering the overall view of the voting application. The VoteApp component imports the programming language component and renders it once per language. As seen here, it is used three times, from left to right, once for the Go language, once for the Java language, and once for the Node.js language.
Programming language. The ProgrammingLanguage component is responsible for communicating with the API service, using AJAX calls to request all of the details specific to an individual programming language on the initial load of the application. All of the received data is then rendered out to the screen, within the component's render function, completing the initial load of the application.
The ProgrammingLanguage component imports the Vote component, which provides the actual +1 voting functionality.
Vote. The Vote component is responsible for providing a clickable +1 voting button, which, when clicked by an end user, generates an AJAX call to the vote API endpoint. The vote API endpoint, in turn, increments the vote count against the programming language within the MongoDB database. Finally, if we highlight all of the components together at the same time, we get the following view, which should now make it clear as to the overall composition.
The Vote.js file contains the implementation of the Vote class which encapsulates the actual voting functionality. The Vote class is written in JSX code and, in terms of visuals and behaviors, simply renders out the +1 button, which, when clicked, generates an AJAX HTTP GET request to the API endpoint, languages, name, vote. The button element's onclick event handler calls the
handleClick function. The
handleClick function leverages the third-party Axios library to make the actual AJAX request to the API. The other semi-interesting point when working with this library to make AJAX calls is the setup and configuration to manage CORS, or cross origin resource sharing, and in the sample code is used here. This is done by setting the Access-Control-Allow-Origin header for HTTP posts to the value asterisk, which is short-form for all origins.
When the response is received back from the API, the internal state of the Vote component is updated. In this case, the Vote field is incremented. Any time the state gets updated within a React component, a rerender of the component is performed. Meaning, in this case, the Vote count as displayed within the browser is updated to the current count. The API host and port are configured within the .env (short for environment) file located in the project's root folder. Finally, the Vote class is exported at the bottom of the file, making it available to be used by the programming language class. The ProgrammingLanguage.js file contains the implementation of the programming language class, which encapsulates the look and feel for a single programming language.
The programming language class is again written using JSX, and in terms of visuals and behaviors, simply renders out the details, such as use case, rank, home page and logo, specific to the programming language in question. These details are first retrieved using an AJAX HTTP GET request, sent to the API endpoint language's name. This is done when the component first loads, or more specifically when it first mounts, as per the code contained within the
componentDidMount function leverages the same third-party Axios library to make the actual AJAX request to the API. When the response is received back from the API, the internal state of the ProgrammingLanguage component is updated, and in this case, the language field is set to contain all of the ProgrammingLanguage-specific details. Again, since the component state is being updated, a rerender of the component is performed. Meaning, in this case, the ProgrammingLanguage details are displayed within the browser.
The Vote class, which we previously reviewed, is imported into the ProgrammingLanguage.js file and its functionality is depended upon by the ProgrammingLanguage class, to render out the vote +1 button and provide the voting AJAX calls and voting state management, etc., as again just previously reviewed. Finally, the ProgrammingLanguage class is exported at the bottom of the file, making it available to be used by the VoteApp class contained within the VoteApp.js file which we'll review next.
The VoteApp.js file contains the implementation of the VoteApp class, which encapsulates the overall look and feel of the full ProgrammingLanguage voting application. The VoteApp class is again written in JSX, and in terms of its visuals and behaviors, renders out the complete ProgrammingLanguage voting application, which consists of three static ProgrammingLanguage components: one for Go, one for Java, and one for Node.js. This top-level component tracks no state, it really just depends directly on the behaviors as encapsulated within the ProgrammingLanguage component, hence the reason why it is imported as part of the import statements at the top of this file. Finally, the VoteApp class is exported at the bottom of this file, making it available to be used within the main index.js file - this is reviewed next.
The index.js file first imports the VoteApp class within the import statements at the top of the file. The index.js file then makes a call to the main
ReactDOM.render function which is used to render out the entire VoteApp component and its sub-components into the HTML div element, tagged with the ID set to root. This development is located within the project's public index.html file as will be shown next. The index.html file provides the home page HTML structure. It is a standard, pure HTML file. The main point of interest regarding this file is the div element tagged with the ID set to root. This is the div element, into which React at runtime will render out the full VoteApp component. The react.env file is located in the project root folder, and contains and isolates all of the environment specific configuration, as used within the application. In the case of our application, we have one environment variable, which is used to store the host and port of the API service to which AJAX calls are being directed towards, from the frontend.
It's important to understand that this happens at build time and not runtime. Since we're all about building and deploying a cloud-native application involving containerization, we're going to use a Dockerfile to encapsulate the Docker build commands used to build a container image for the front-end microservice. A Dockerfile is provided and will be used by the
The Dockerfile, as you can see, is very simple, and should be easy to understand and interpret. In any sense, it uses the official public Docker Nginx image as its base, and then simply copies in the contents of the files, located within the local build folder. The local build folder is populated as a result of performing a React build; we'll demonstrate this later on by using the command
yarn build. Again, more on this later, when we perform our demonstrations. The Dockerfile will then be referenced when we run a
docker build command.
Okay, that completes this lecture on our brief code review of the important React-based frontend components.
Go ahead and close this lecture and we'll see you shortly in the next one where we'll perform a quick code review of the API.
About the Author
Jeremy is the DevOps Content Lead at Cloud Academy where he specializes in developing technical training documentation for DevOps.
He has a strong background in software engineering, and has been coding with various languages, frameworks, and systems for the past 20+ years. In recent times, Jeremy has been focused on DevOps, Cloud, Security, and Machine Learning.
Jeremy holds professional certifications for both the AWS and GCP cloud platforms.