The course is part of this learning path
Build and Packaging
Test and Validation
This training 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 containerisation - 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 containerisation
- DevOps Practitioners
- [Instructor] 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 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 plus one button, which, when clicked, generates an Ajax HTTP GET request to the API endpoint. Languages, name, vote. The button elements 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 usekeys, 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 component DidMount function.
Again, the component DidMount 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 programming language specific details. Again, since the component state is being updated, a rerender of the component is performed. Meaning, in this case, the programming language 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 programming language class, to render out the vote plus one button and provide the voting Ajax calls and voting state management, et cetera, as again just previously reviewed. Finally the programming language 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 programming language voting application. The VoteApp class, is again written in JSX, and in terms of its visuals and behaviors, renders out the complete programming language voting application, which consists of three static programming language 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 until the HTML div element, tagged with the ID set to root, this development is located within the project's public index.html file as we'll be shown next. The index.html file, provides the home page HTML structure. It is a standard, pure HTML file.
The main points 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.
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.