Deploy React App to Kubernetes with Docker (Full DevOps Guide)

Today I'm going to be going over one of our code patterns here at IBM. This is the specific repo it's in. So if

you'd like to follow along or clone it and get it deployed, you can as well. This particular code pattern is going to show how you can deploy a React application to Kubernetes. So here is the general file structure as you can see if you want to read more about the information and what this code pattern offers you can read it here. Um and then this is the general flow we have. So as a user they go to this application's UI uh specifically it's using an API to get movie information. So the user enters a movie's title. um it goes to that React application which then calls the API request in a JSON object gets returned and back to the user and as you can see we containerize the application using Docker and then deploy that containerized application in Kubernetes and then here there are some including components and feature technologies that we have but I'll go kind of straight into the steps um first go through how you clone it and run it locally. then how you can get it up on Docker and then finally up on Kubernetes. So a prerequisite for this is that you must get an API key from this OMDB API. Um so if we just click here, open it up, we can see here uh this is where you would get the API key. Um and then I'll show you where you would insert it later on. Um, and then next, uh, so just create an environment variable for your Docker username. So you're going to use this later on. So when I bring up my command line, I will make it a little smaller. Um, just do export docker username equals mine's rego. There we go. So we're just exporting something that we need to use later on. Um, so here run locally. So, first we need to clone the repo. So, just copy and paste this right there. Takes a little bit to clone. Let's go into that folder. Um, and then we're going to install it, build it, and start. Um, so first a pre another prerequisite is that you need to have NodeJS installed. Um, here's a link of where you can install it. But once you have that installed, you can kind of get running with it. So, first let's install all our node modules. You could also do this with yarn. Um, I'm just doing it the oldfashioned way, npm, but if you'd like to do it with yarn instead, you can definitely go for it. And it takes a little while. So, a little bit about this application while we're waiting the modules to install is um it is based on a React and Reduct architecture. It's pretty simple. It's just basically broken down into components and containers. Containers basically have all the logic within it and components really only have the component and nothing else in there. It doesn't require any logic or anything like that. So we can reuse those components in other places. Um then we do call that OMDB API. We call it in the actions of Redux. Um and then I'll show you that later on. And then basically we just get back that JSON data and show it to the user. I haven't manipulated the data at all. Um, it just shows it kind of how it is to the user. So that's a little bit of background about that. Um, and then it also has a Docker file. So when later on when we containerize it in Docker, we will use that. And then it just has some other things such as like unit tests and linting and whatnot just to make sure our code is as good as we can get it. So we are almost done here. Okay, so now we have it installed. Next, I'm kind of going to walk you through the code to give you a little bit of background about it. So, I am using Visual Studio Code. If

you guys are familiar with it, it's just an IDE. I love it. It's great. It has a lot of really cool plugins. Um, but here we can see in the source, this is where our actions, components, containers, reducers, and the store is and some of our style. Um, I'll just kind of walk through this. We are using ES6 in it. So, there is a Babel file. Um, but here in the actions, we can see so this is where we call the specific API right here. And this is where you're going to enter that API key um that you need to do as a prerequisite. Um but basically we just have four different actions. We have a retrieve movie start, a retrieve movie error, retrieve movie success, and then just a retrieve movies. So basically what the container does is it'll call this retrieve movies action and then it'll dispatch the start and either error and or success. And the reason why I implemented it this way was because if we needed, you know, like a loading spinner or to load skeleton components, uh, it says specifically on the start that it is fetching. Um, so that's when where we can load that. We don't do that now, but maybe in the future. Um, and then we just see how, you know, we'll return the response back to JSON and then we'll return if it's success or an error. So pretty simple, not a lot of actions in it. Um and then next I will go through the reducer. Um so the reducer has the initial states. So like I said before is fetching the items which is what we're going to get back from the API and any error details. So first it sets it to the initial state and depending on what action it's on it will change uh some of the states in there and then it just combines all these that we can call it and some of our components and containers and the store is pretty you know straightforward it just configures the store so we have the state and all this data globally in our application and then style I'm using SAS here and it just gets uh compiled back to CSS SS. So pretty basic. And then I just have some util functions here um that I didn't want to include in the components or containers. It kind of made it longer so I put it into a separate file. So I'll go into not into too much detail within the components and containers, but I'll kind of show you what we have. So starting off with the containers, uh we have you know like a basic app container that contains you know the application. we have the input set and list and then the input set it has a little bit more um logic in it. So it handles certain key presses, it handles changes. So it's all in here and then it passes it into the input function. So whenever any of these props are called within the input function um it's going to have a call back to this container and handle that. Um, and this is also where we get the uh movies depending on the what the user inputs and the list. So the list is basically just what comes back to the user. Um, and then list item is each individual item. Um, and those are components. And then the components are really simple. Again, it's input. So these are what's going to call back to the um parent container depending on when a user selects enter or anything like that. And then the list item just basically takes the list and imports it or exports it to the user. Um and then we just have some constants. So these are what you saw in actions and reducers. And then we just have some utils. So this is just to create the list. I just didn't want to include it and kind of make one of the components messy. So I just put it in its own util. So that's the basic structure of the um react application. It all gets yeah the react application. Um and then here you'll see that we have like some docker files for docker and then some git ignore. So pretty basic. Um so I'll go over the docker file. So this is basically for the next step um which I can bring this back up when we deploy that just so I can kind of work through it. And then the last thing you know we use Webpack for um to handle you know all our React uh code and everything like that. So it's kind of pretty straightforward. If you want to dig into it you can. But now um since I went over a lot of this I will go back and we can get it everything run. So now that I've done mpm install, so usually you need to do mpm run build CSS. So this just builds that CSS. Um and then just mpm run start. Okay. So here here. Yep. So here you can see it's loaded up. So if we want to put in a certain movie. So if we put in like Finding Nemo. So right now we have the invalid API key. So that's why it's not working. So let's go back. Um I will go back to uh I already have one with my API key. So I don't show you guys. So I'll go into that one and then you can see that it'll work. So sorry about that. So mpm run start. Let's try this again. Now, this particular one does have an API key. Let's load it back up. So, if we put again binding Nemo, there we go. So, we have all the information coming back and you can see it right there. So, you saw an example without an API key and this is with an API key. So, that's just getting it run locally. So, it's pretty straightforward. So, next uh let's run the application using Docker. So, first we need to build

our application. So, we're just going to use this command. And if you want to change um what it's called, you definitely can. This deploy react uh Kubernetes. I just did it cuz it's the name of the repo. But you just need to make sure that it's consistent if you do change it. So, um earlier we put in our darker username. So, here let's build it. So, this is probably going to take a little bit. Um, so you can see it kind of going. Uh, there are a couple deprecated MPM modules in here. Uh, one of them I used specifically because I couldn't get the same functionality in the newer uh, modules. So, I apologize for that. Um, but you will see uh, a couple warnings, but should all be fine. So, this will take a couple minutes. And then here basically what it's doing it's just building a image of your application. So kind of like how you like might build um you know styles or something like that. It's kind of doing the same thing except it's doing it from an application to a container. So here we're getting close to the end We are almost there, I think. Yay. Okay, so we successfully built and as you see it's tagged. So it's under my Docker name, the name I gave it and latest. Um, so next I just want to make sure that the image is there and running. So I'm going to go docker images. So you can see I have a lot of Docker images. Um, but you can see it up here. I did 12 seconds ago. So it is there. And then next what we're going to do is we're just going to run it. So we're going to run this container like that. And then we should be able to go to localhost again. So here this is running in a container. So we're all good. We have we built the image and we run the image on Docker. So that's great. So next we're going to move to the Kubernetes. So I'm going to refresh this. So I am specifically using IBM cloud uh to get this up and running. IBM cloud Kubernetes. So everything that I do is going to be in the Blueoommix command line. So I'm already logged in, but if you're not logged in, you can vx log. Um and then you'll need to put what region you're coming in. Uh but yes, so make sure you log in. If this is the first time you're running something on Kubernetes, you do need to create a namespace. I already have a namespace. Um so I will just show you my name spaces. So this isn't mine. This part of the developer advocate um environment, but as you can see here, my specific nameace is Aro. So this is what I'm going to use. But again, if you don't have a namespace already created and you need to, you will need to add that nameace um and get like the Blueoommix CLI and everything running. So next I'm going to build that Docker image but within the IBM cloud um container registry. So I am going to go ahead and take this command and just change a couple things depending on where you're at. So first I need to change my name space. So like I did before in the previous step, my nameace is Aro. So you put whatever your namespace in. And then you're also going to need to do the IBM cloud region. So I am in US South. So my south region is NG. Uh depending I think if you're like in uh the uh if you're in Europe, it's like EU. just depending on what region you are, but you can find that out on IBM cloud. So, this is basically gonna build my

application in a container just in the IBM cloud ecosystem. So, this will probably take a little bit like the Docker image before. Okay, there we go. We're slowly getting through it. So, this is basically the same thing as the previous step, except you're building that image within IBM rather than um in the Docker ecosystem. And uh the IBM cloud for Kubernetes, it uses uh our container registry. So you'll need to do this to deploy something on IBM cloud Kubernetes. Okay, so we're above halfway through it. Hopefully it is not long before we're finished. Okay. And on the final step, we are almost there. So next we're going to do step two. Um, so I'll go back to my terminal. So I will just run. So run. So basically I'm going to call create a deployment called deploy react kubernetes deployment with the image that we just built. And there you see it's created. And now I'm going to expose this deployment. And there was a little bit of copy and paste error there. So let's try again. Hopefully this can be done. Okay. So let us try this again. So I'm going to do cubectal expose deployment. expose the deployment. A type is a node port. So you could use node port or load balancer. But for you know first timers node port kind of gets the job done. load balancer is a little bit more for complicated cases that you could definitely look into later. The name of the service and the port. So this port is the port that uh we said that we were going to use in the docker file. So they need to match and that was exposed. So now um our application should be up in the cluster but we need to get the IP address of the cluster and node port of the service. So to get the cluster we do bx cs workers my cluster name it's reel code pattern I believe. Okay. So there we go. So I am going to choose the first one. So the public IP is this right here. So I'm just going to put that there for safekeeping. And then we also need the node port of the service. So we just describe the service. And here we can see, you know, all the information about that service, but we specifically just need this node port right here. So, I'm just going to copy that. And then now we should be able to access our application with the IP address um colon node port. So, let's try that and see if it worked. And there we have it. So, this is run on Kubernetes again. Um, it works. It's all working. It's great. So that is how you run it on Kubernetes. Um I hope that this gave you some good uh tutorial on how you get a React application up on Kubernetes. Um and you guys can replicate this in the future. Uh we are definitely open to feedback and if you want to contribute this is an open-source project so please feel free to contribute back or let just give us your feedback. Um, and then if you want more information, we have links at the bottom of this page. Specifically, I created a um, Medium article kind of

about my journey. So, it gets a little bit more in depth and kind of explains every step that I was going to into more depth. Um, but I hope you got something out of this today and enjoyed this. And, um, I hope you try it out. Thank you.