The course is part of this learning path
Store2018 Build and Deployment
This course will enable you to:
Understand the principles and patterns associated with microservices
Understand the principles and patterns associated with Restful APIs
Understand important requirements to consider when migrating a monolithic application into a microservices architecture
Understand the benefits of using microservices and associated software patterns and tools to build microservice based applications at speed and scale
Understand tradeoffs between different architectural approaches
Become familiar and comfortable with modern open source technologies such as Dotnet Core, Docker, Docker Compose, Linux, Terraform, Swagger, React
Become familiar with Docker and Container orchestration runtimes to host and run containers, such as Docker Compose, Amazon ECS using Fargate, and Amazon EKS
A basic understanding of software development
A basic understanding of the software development life cycle
A basic understanding of Devops and CICD practices
Familiarity with Dotnet and C#
Familiarity with AWS
Software Developers and Architects
DevOps Practitioners interested in CICD implementation
Anyone interested in understanding and adopting Microservices and Restful APIs within their own organisation
Anyone interested in modernising an existing application
Anyone interested in Docker, and Containers in general
Anyone interested in container orchestration runtimes such as Kubernetes
Then within configure we need to make a call to Amp.userReact. This will initialize ReactJS.net. Okay. There are all the changes required in the start up file. We'll save that. Next within our controllers, if we open up the home controller, we are adding a new method. This one will be called React. And it will return an I action result by returning a view. Okay, we will save that. Next, if we take a look within views under home, I've already set up a new React.CS HTML file. Let's open this up. As you can see we are doing a number of things. We are specifying a custom layout, In this case underscore layout React. Secondly, we are adding in a script block that makes a call to page called SPA for single pay architecture.JSX.
We can see that this file has been created in the dub dub dub root folder under JS. Opening up SPA.JSX here we can see the React components that we have created and for which our current home page is composed of. Let's quickly review the component structure in hierarchy of our store2018 page. The outermost component is the store2018 component. The store2018 component is then composed of a number of child components, including the NavBar, the JumboTron, the ProductList and the Footer components. The ProductList component is a container of multiple product components where each individual product component represents a product being sold on the store. Jumping back onto our source code, and scrolling down to the bottom, we can now see the same structure represented. Here we can see the shop2018 component.
They were passed in as properties. Here the consumer properties are set to this. And the products property is set to this. The next thing to note is the composition of our shop2018 component. It is composed of the NavBar component, the JumboTron component and the ProductList component, and lastly the Footer component. So let's take a closer look at the ProductList component. Here you can see that we passing in a data property where this.state.products represents the data that was returned from our AJAX call.
So again our ProductList component is a class that extends the react.component class. It has a random method and returns JSX. The random method calls map on the data that was passed into it and for each product, renders a product component. Setting the key property to product.id, the name property to product.name, the SKU property to product.sku, and the regular price property to product.regularprice. Let's now take a look at the product component implementation.
Again, the product class extends the React.Component class It has a random method and it returns some JSX. Here, the simply rendering out each of those properties that were passed into it. The remaining React components in this file are pure presentation components. So you have the NavBar component, the JumboTron component, and finally the Footer component. Now before we recompile and test this we need to double-check our shop2018 component and ensure that the properties set on consumer and products are using the right URL's when this component renders on the client side it's gonna make AJAX calls back to our service components using this URL. So we need to make sure that our host and our port are correct for both URL's. Remembering that we used docker compose earlier on in our course to configure a local build and to enable us to quickly run up a local environment. We can see that the account servers are set to listen on the host port 8081 and forward to the container port port 80 and the inventory servers likewise is configured to listen on host port 8082 and forward to container port port 80. Therefore our current configuration here is indeed correct.
The last piece of the puzzle that we need to put in place to allow AJAX calls to be initiated from the client side and to allow them to be responded to from our microservice components is to enable cross origin requests on each of our microservice services. So we will go ahead and do this now. So back within the visual studio under each of our service components, opening up the startup file, we'll enable the use of calls on each of them. We repeat this on the startup file with the inventory. And then finally again in shopping service. OK, at this stage everything is in place.
We can now do a recompile and then we'll start up the full environment. Again, we will jump over into our terminal and here we'll run docker compose and build. This will rebuild all of our images complete with the new React presentation layer architecture. Again we'll speed this up and see what we get at the end. Okay, excellent so our build is completed. Let's ensure that we have no existing docker processes running locally. And then finally we'll run docker-compose up to bring on up in environment. Okay, the environment is now up and running. Let's jump back into our browser. And this time we'll navigate to local host, port 8000 slash home slash react. So the first time we go to this URL it's going to take a little bit longer than subsequent times. The reason being we do the JSX compilation on-the-fly.
This is a one-off process, so subsequent requests will be a lot quicker. Here, we'll do a reload and it's really snappy so it's conveying very quick. Again, another reload. Okay, let's open up develop tools, and confirm and date that we are making AJAX calls. We will do a reload and here we go. So here we can see are making an AJAX call to slash API, slash consumers and if you look at the response, we can see the data that is being passed back from the microservice component. Likewise, we've made an AJAX call to the inventory service and here is the data again coming back.
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.