 Good morning, good afternoon, good evening and welcome to another episode of the developer experience office hours here on OpenShift TV. I am Chris Short, executive producer of this thing we call OpenShift TV and I am joined by three of our most wonderful developer experience people. Ryan Jarvenin, Natali Vento and Joel Lorde. Welcome to the show. Ryan, your video is already frozen. Let me fix that. I was going to pass it over to you to do intro, the start, the round of intro. Yeah, go to Natali. I'll pass it to Joel instead. Joel, you want to introduce yourself for the audience, please? Hi, everyone. Thank you, Chris. Very happy to be here. I work as a developer advocate, so in the same team as both Natali and Ryan. So, yeah, basically our job is here to try to make developers like you do your life easier. Yeah, well, I mainly focus on JavaScript stuff, which is just why I guess I was invited today. So a lot of, I've been doing a lot of JavaScript in the last many years, both frontend and back end. I really love JavaScript as a language. Like, I think it's nice, it's versatile, you can use it everywhere. So, yeah, that's pretty much it about me. Awesome, Natali. Hey, hey, everyone. My name is Natali, and I'm in the same cool team of Joel and Ryan, a developer advocate for OpenShift. Maybe I focus more on the backend or DevOps side of the thing. But I'm really looking forward to see these frontends in action today on Developer Sandbox. Awesome, finally got my video. Hopefully my video is coming through now. Thank you. Ryan Jarvanan, you can find me in most places online as Ryan Jay. I'm also a developer advocate. Thanks to Natali, Joel, and Chris for joining us here today. I think the main topic that we're hoping to cover is just to show off how to use some frontend developer frameworks in our new Developer Sandbox environment. So you could try this, really should work on any OpenShift, whether you have code ready containers or learn.OpenShift or any of them should work the same on just about any system. And the nice thing about frontend frameworks is usually when you go to roll out a release, you could basically host them on any platform. They're not, you know, tied to running only on Kubernetes. You could basically host them out of a S3 bucket to some extent because they're just static HTML. So we'll try to get to that as a outcome later on in the show, doing a deployment that packages it up in the DIST folder or however this framework happens to work. And then we'll roll out a deploy hopefully with a Nginx package. I didn't practice that step. So I may need some pointers from Joel. I think he's done it once or twice before. But I think the first step I wanted to start off with was deploying a React.js frontend and showing how basically what a standard dev workflow might look like as far as your initial iteration on a React.js project. For folks who haven't seen that, but have the whole thing containerized. Any questions about that or any thoughts? I think it's awesome. I think we should do it. Super cool. All right. Cool. Cool. I don't have the chat open currently. So if other folks can keep an eye on chat for me and for folks in chat, thank you for joining us here as well. If you have any other topics you would like to see on the developer experience office hour, definitely let us know. We also have a feedback form. We could post a link into chat for you if you have other feedback for us. Definitely fill out that form there and let us know of topics that you're interested in seeing. Let me hit the share desktop. And yeah. All right. Lujins does this thing where basically my video disappears when I do share desktop. I think I need to reconfigure it. All right. Hopefully you all are seeing my I'm at developers.redhat.com slash developer sandbox. That text is a little bit small on the screen here. But there should be a link that says sign up for sandbox. Once you log in with your red hat account, you should be able to sign up for the sandbox environment. And then the red link there will change to launch sandbox. There's one other step, signing in through some access credentials. And you just choose the developer sandbox button on the sign in page. Okay. So this is so far I just have an empty project, Ryan J dash dev. And I think I'm going to open up, see if I can open up a terminal locally here. Okay. So I've got a local terminal yesterday. I was testing this with Catechota. So I was using their embedded terminal. And I'll use this terminal here if we need to make any changes to the repo. And the repo that we're looking at, let's see, it should be available. This is one of Joel's repos we were going to use as an example. And let's see if I have a link to, here we go, github.com slash Joel Lord slash front end containers. So I'm going to get clone copy of this. I actually have, I forked this earlier. So I'm going to go from my changes, just in case I want to do a get commit and get push. Makes sense. I should probably be doing clone with the get app. Let's do a get remote dash v. Set URL. And this is origin. I'll update this really quickly to colon and get that. Don't forget to update the username. Oh, you're right. Remote. Yeah. Get remotes at URL. Okay. All right. Hopefully that works. So I have my example repo and I'm going to try deploying that using the from catalog option and the Node.js base image. I think you have flagged the Elm chart. We'll need to add in templates as the type. Yep. And, huh, it's like we've got, we're going to get Postgres or MongoDB automatically added. Cool. Here we go. If you had builder image, then you'll see just the Node.js without any, any add ons. So we can do create application. It looks like this is hosted on Node.js 12 with a UBI image. There's a couple other choices in here. Yeah. The UBI version ties back to the version of rel. So if you want to use seven or eight, there's images for both. It's nice that Node.js 12 is on UBI seven, while UBI eight is carrying Node.js 10. I think there's a 12 somewhere. There's a 12 also. I would have seen it. Okay. You know, I've seen a 14 somewhere. Cause that's the, the current version. Yeah. Cool. When I, I've done the auto catalog list and it'll be, so that might be provided in a different way other than this builder image. So I'm going to set the context there on this repo. Actually, maybe I should open up, uh, see if I can open up a quick. Copy of this in the browser and I can point out a couple details about this project. Joel obviously knows this a lot better than I do, but there's a, uh, angular subfolder, react, vanilla and view. I'm going to start with the react project. Uh, Joel, do you have any other, uh, are these basically just, uh, um, using the react scripts generate, uh, to start out, uh, yeah. Yeah. Yeah. I'll turn for each of these or, or exactly if, if you scroll down a little bit, you'll see there's, there's links to, uh, two, um, blog posts there that kind of describe a little bit into a little bit more details. But basically I was having issues trying to build rootless containers. Um, so this basically describes how to build a rootless container with, um, with various popular JavaScript framework. So I, I did examples for all three major ones. So react, view, and angular, and basically they're all using the skeleton application directly from the CLI. So create react app, uh, for react, uh, view CLI, uh, I can't remember the exact syntax and even less what angular, but just the basic application remove the, the, you know, the, the landing screen that is there and just replace it with the same, um, screen that reads up some environment variables in each one of those projects. So, um, really it's almost like identical to the, the skeleton application. I just made sure that they all kind of have that same look. Nice. That's really cool. I like the, um, being able to get things from the environment into a front end application is always, uh, kind of a tricky, uh, process. Um, so glad you have an example that's super clear. Um, I, and, and if you ever need to build a container image from, uh, you can use those and, and basically there are instructions, but essentially it just breaks down to this copy, the, the Docker file that's there. And it's generic enough that you can pretty much use it in any, um, react angular or a few JS projects. So you would be deploying these by Docker file generally. That is what I would do, but I'm curious to see how you would do it today. Oh, okay. So you, have you been trying these out with source to image, uh, at all? No, not yet. Oh, that's, that's a very interesting. That's, that's why I'm excited about this today. Awesome. Cool. Yeah. This is kind of what I was hoping. And so we'll see, um, I tested out the react one and have a little bit more confidence that that one's going to succeed. So we'll start there. Um, I didn't have a successful test of the angular one last night, but we could give it another try and, and see if we could pack it together potentially. Um, I'm really interested in looking at the view one as well. Um, and I really liked the idea of being able to investigate how to publish selected information from the environment. That's a really nice thing to have illustrated. I was thinking of doing like a config map or something and just mounting a bunch of config as a JSON file. Um, so that that JSON file could be referenced. Maybe, uh, but, um, I don't know. Yeah, uh, we'll, we'll see if we get, have time to look at environment variables as well. Um, I know I'm going to have to do one small modification on this one in order to get, uh, so so far I've set the react, uh, context Durr here, I'm going to set to react project. Don't forget to use your username there as well. Yes. If you want to do some commit stuff, some fancy stuff. Yeah. All right. That looks like it's working. I'm going to leave the secret, uh, as is, um, but we could potentially have a con, you know, a hash of, of data stored somewhere that we wanted to mount into this container. Uh, we can call this sure front end. I'm just going to call the app front end. And I'm going to name this front end dash react. And we'll use a standard deployment instead of a deployment config for this one, since I'm going to use kind of like a development style mode. Uh, also there's an option for creating a route. Um, I think I'm kind of getting ahead of myself because I haven't set a port number yet. Um, and so creating a route is, is probably not the best idea yet. Um, I think it will work out of the box. Oh no, it won't. No, that's not true. It will create a route to 80 80. That, that is the default. That's what I did last night. And then I just made tons of edits. Um, and so I can go that route. Let's add the, let's add the route. We'll leave it in that'll produce a couple errors. But we can work through that, uh, assuming I can log in via the command line. So while this build is running here, should be able to click on this and see that there is currently a build running. And this is going to do things, um, like it should do npm install and a couple other things, um, unless all the dependencies are already committed into the node modules folder. Um, I think is this one using npm or yarn? I saw one of them was using yarn. Take a look in here. Oh, there is a yarn.lock, but we also have a package.json. And hopefully you can see in here, there's a scripts start and the default start task is going to be react scripts start. So that's what I'm expecting to happen. Um, inside the container is for us to run the default start script and get us into this react scripts mode. We'll see if that, if that happens. Yeah. And if you're not familiar with, um, react application, basically what this does is that it starts a development server, um, which is running on node.js and it watches for file and changes and it will do hot reloads on your browser. Um, so basically as soon as you edit the code, you will see the updates, um, appear inside your browser. So that's, it's, it's a very convenient way to build applications. Oh, it was like blabber your load. Yeah. So no need to hit that F5 frantically whenever you try to do a change or anything. You hit save and the right thing. It should just do everything else on its own. Right. That's, yeah, I very much feel that way. It's nice to come out of my IDE and see a new page. That's something before I started doing JavaScript, I used to do PHP many, many years ago and, um, I remember trying to do a change, send that to the FTP server at five, at five, at five. Yes. I remember those days. Uh, so much fun. Oh, and if you had the perm set wrong, your sys admins are just coming bury you. Yeah. I remember the good old days. Yeah. All right. So it looks like this, this, uh, app is still lit up light blue. So it's in a pending state. I'm not sure if that's because it looks like, yeah, the build is still running. All right. So while I expect it to take maybe five minutes, um, to don't, to create a react application, you basically have to download half of the internet. Um, so it, it can take a little bit of time there. Just, it's just half the internet. Yeah. Well, while this is running, I'm going to run OC edit on our service. Um, it looks like I ran OC get SVC to list the services. We have one for front end react, uh, so I can run OC edit on this service. And take a look at what, uh, port number it's currently configured for. Looks like we have 80 80 in here. And we want to target port 3000 in the container. That's a default port for reacts, uh, development server. So I'm just going to swap out, uh, 3000 as the target port on the container. And we'll leave the service running on 80 80. Nice. And then I'm also going to do OC get route and see that we have our front end react route. It do a OC edit on that as well. And then I'll check if there's a target port 80. See, there's something I need to edit in here. I don't think so because you didn't change the name of the service at the name of the port. So if you leave 80 80 as name, uh, or yeah, service, that should be this one's okay. Then I thought there was two that I updated. I think that would be the only one. Okay. I usually do it from the UI. Yeah. Yeah, this, this would definitely be easier from the UI. I don't necessarily recommend running OC edit and just hacking away at objects. Um, but this is one kind of, uh, uh, way to, to interact with these resources. Yeah, I must admit, I've always been more of a UI person. Like I prefer fence. It's nice to have the CLI options to automate some stuff. But, um, I like using my mouse. Yeah. Let's, let's see, uh, let's say this is, you know, ergonomically designed for me. But here's, here's the, uh, same thing already updated here on the, um, in the UI. And I'm going to click on the service here. And you can see if the pod is matched correctly. Yeah. I think it looks like I got the same YAML interface. I mostly just wanted to verify that, that, uh, I was able to drop to the command line if I, if I had to. Because I don't have a hosted terminal with this sandbox just yet. Um, I'm really interested in seeing that terminal operator get added. Um, I think that's going to be a huge upgrade for this. Okay. So let's take a look at how that build is doing still running. Let's, let's see the logs. Bound zero vulnerabilities. That's getting there. Yeah. Okay. Here's the last building the image. So it's definitely very close to being done. Yeah. Yeah. This should be just about the last step. So it'll push the new, the resulting image into the open shift image registry. There should just be a, um, hosted registry included with every open shift cluster. So a lot of the traffic for your images once built are going to be local within that cluster, hopefully, depending on how disparate your clusters are. Um, so this should do an image push. And then we should see the result on the topology view. You try the route out. Uh, here we go. Scaling up. And once this switches to a darker blue, it'll do health checks. Um, confirm that the app is responding. Looks like it's the right color blue. So hopefully I have all the port information. Wired up accurately. Time will tell. And let's see. Ta-da-da-da. It's connecting. Yeah. You take a look at the logs for this. Yeah, I can see in the. Oh, go back to the tab. Let's say react. Uh, here we go. Okay. All right. Base URL is 3000. Our route is working externally. Uh, pretty good. Cool. There may be some config we need to inject to get it to have the. That is actually in the, um, picking it up from an environment variable. So that's why it's just hardcoded for now. Oh, okay. So a couple of things we could do right off the bat. I can jump into the terminal. Also, this is would also not be recommended, um, since I'd be adding changes into this containerized environment that might get scaled up or scaled down or restarted or reallocated. Um, but I should be able to. Edit this public index.file and let's do it. I can totally type today. I swear I believe in you. All right. All right. So I wrote that and it was probably almost if I had an auto save text editor would have been replicating all of those changes into the browser as I was typing. Um, but here we got hello, open shift.tv to show up. And I didn't even need to hit control R or any kind of reload. Um, like, so happened. Yeah. Yeah. So a lot of front end frameworks are going to have this kind of hot reloading live reloading feature, um, that really, really is a massive productivity boost because, um, depending on your editor, you might just be able to, you know, as you're typing, if it's auto saving those files, you'll automatically see the result reflected as you're working. Um, so you don't need to do any kind of commits or pushes or anything else in order to see your changes reflected on the server. Um, see if I could find out the container name, the pod, uh, let's see, well, I'll just do get deploy. So I was looking at this OC get deploy front end react. And I'm going to do, oh, gamble on this. And I think I might need the name of the container for this next command. There is a OC R sync command. And let me step into the project react folder. Am I already there? Already in, let's see, it is react project. Okay. So if I made a change to index.html in here, it's in public, actually. Okay. Joel, there's a question chat for you. Maybe you can help answer this one. Sure. Can you run windows desktop.net apps in Red Hat OpenShift? And the answer is generally, yes, um, yeah, I'll let you answer that. Yes. With the question mark, Natali would know more about it. I believe Natali, you did something similar recently, didn't you? Yeah, as you can run out of the box, uh, that net core apps, uh, we're going to support also that net, uh, five at the moment, we all support that net core, uh, which is up to three. Um, this is for that net core. Then if you want to run, uh, native that net application, you could use also to approach, which are the, uh, open shift container virtualization. So it's a windows virtual machine, uh, where you can run basically windows and your dot net run times in your app or, uh, windows container. Now we support also windows container. So in your windows server, uh, open sheet would be, uh, we have one windows node and you can control those, uh, application as a windows container. Maybe this is the most, the most difficult one. The easiest one would be to use that net core or, uh, uh, open shift virtualization for that. But there are many developments in progress. So I think that net five would be soon available also, uh, for Linux. Mm hmm. We just did a show about windows containers last week. So I'm going to go find the blog post real quick. Um, or windows, I'm sorry, windows, not container for windows instances. Yeah. Uh, I was trying to run OCR sync, um, from this container into the remote container and it is, I forgot to do, there's a, um, like reverse, uh, like a, a deny list you can enter. So it ignores certain folders. And I usually always tell it to ignore the node modules folder and the dot get folder, because I don't need to replicate all the files from node modules and dot get. Uh, and it looks like I left off that particular, um, flag. So anyway, what I was trying to do is replicate changes between this container and, or, or this local repo folder and the hosted container. So I could show off this same demo of making changes to a local repo and having the react server be a process that was hosted and containerized. Um, that would reduce the amount of dependencies I need to have on my local laptop environment. Um, looks like I have a little bit of work to do on this example command, but it's something like OCR sync and then the name of the pod. Um, I think I need to add in maybe a path on that remote system. I was hoping it would just pick up the working directory by default. So I left it blank. And then this is the path that I want to replicate. So I could potentially try it again. Let me do help our sync and see if I could find the exclude. This is what I would need. Need to run the same thing with exclude.get. Um, and I'm not totally sure about the syntax. If it's.get. I'm a node modules, something like this. I don't know. Anyway, if you're super interested in seeing this particular workflow, uh, me try for a longer periods of time on this particular workflow. Let us know in chat. I'll jump back on this and try to explore the details of this OCR sync command. Um, but this is how you would solve this using OC. Uh, there's a simpler way to, uh, get at this. If you're using Odo to create your components, you can run Odo watch. Um, I haven't used Odo yet on this project. So Odo may not know where to replicate this out to. But if I had Odo installed, I could do. Yeah, doesn't have the component context because I haven't started with Odo. Um, but if I had started with Odo initially, uh, I'd be able to run Odo watch and that would get the right are sync between this local environment and the hosted container. So when I make changes, react server automatically reloads it. Yeah. Yeah, that, that is cool, uh, because it's automatically updating it. So otherwise you should need to, or use our sync or start the build from local there or see start build, uh, from there and you, and you use the local there. But that, that is better. No, it's, it's automatically. Yeah, yeah. When you saw how long that first build took a extra long time, um, this sandbox might have had, uh, may have needed to pull down images from, uh, the local open shift registry and download several hundred megs of a base image onto a node, perhaps, uh, in order to do the build. There's other things that like, uh, it may take extra time on the first build. Um, but there's definitely some delay in running a full containerized build. Um, and being able to see your changes reflected immediately is a huge amount of, uh, productivity boost, I think, uh, there's also, uh, I wonder if this button works. Let's see. I clicked on the chae link. It said the man who might not speak again. I wonder if this button works. What does this do? Boom. Dev sandbox. All right. Allow permissions. Uh, it looks like I need to sign in for, uh, count. Hmm. Yeah. This is cool because it's, you, it's using key clock, the single sign-on to authenticate you against open shift authentication. So that is cool. That's amazing. So there's no dev file currently in this repo. So we'll see how it, uh, response to this. If I had started with Odo, uh, that would have given me a dev file that I could have, uh, committed to the repo. So that's something I could do. Um, if this code ready workspace is failed, um, I can pretty quickly whip together, uh, run together some kind of Odo commands that'll give us a local dev file. I can commit that, push that. And then we can try, um, starting up Eclipse chae again or code ready workspaces. Nice. I think this is going to allow the default workspace when it doesn't find that def file, it's going to load a default workspace with a git plugin, uh, where, where you can call your call. You have a terminal. Uh, maybe there is an NPM or the stuff that we need, but you can activate the afterwards. There is a plugin list like in Visual Studio. You, you check your plugin that you need and, uh, you are ready to go. Awesome. So Ryan, did you do anything to add that, um, edit code button to the, um, topology view? No, that was just, uh, hanging out here. Yeah. I didn't do anything special. I used a source to image container. Okay. That's, yeah, that, that is the trick when you use source to image, the annotation are automatically added to the deployment. So that's, uh, in this, in this way, OpenShift recognize, uh, you, you, you have some, uh, OpenShift, uh, code ready workspaces installation there and, uh, and this is how it works. If you see, there is this app OpenShift.io VCS ref and V C A S, uh, U R I, uh, so reading this annotation of a shift, understand there is some source code. If you don't have code ready workspaces, you have a little Github icon. When you have code ready workspaces or when you, it is installed properly, then you have the little chair icon that lets you open factory service. The factory is a service in code ready workspaces that create a workspace from a dev file or from default settings. Yeah, this was, uh, um, Natali actually gave me some of these annotations to try. I think, uh, a couple of weeks ago on the show, we were trying to get code ready workspaces, uh, to appear on a application that we installed. And we went and installed the operator, but we only gave it about five minutes of, of install time. Uh, we didn't have enough time left in the show to watch it all the way through. Um, but yeah, this one was, uh, code ready workspaces is already kind of linked into the sandbox environment. So it should, in theory, just start, uh, here, it looks like we've got something here, default workspace. So it has open files. When you don't specify a branch, it goes to master. It doesn't know about this, uh, diaspora master main stuff. So now he tried to clone the, this repo using, using master branch master. Huh. Is there no master on this? No, I was using main for this one. Just created this. It's main. Yeah. All right. So we found a, maybe a limitation in, uh, code ready workspaces. How also another kind of quirk of this particular project is that we're really trying to operate under a sub directory for this react project folder. Um, and some folks are going to organize their applications this way and have kind of a mono repo approach with multiple, um, microservices hosted under a shared repo. Um, that's definitely a, a way of operating that a large number of companies have used. So it's something we should be able to, to do effectively. Um, I'm curious to see if we had started with a dev file, um, if, if that sub path would, would be easy to set, um, or easy to detect using Odo. So I'll need to go back through that, that workflow with this repo and see how that works out. Uh, but we should be able to edit some of the code ready environment or basically load up, um, you know, it has new file open settings. We could probably go through preferences in here. Um, and might be able to. You, you have two choice. You can clone from that, uh, that HTML five we were seeing before. No, there is a link git clone. If you come back to that, to the other tab, the red dot code, red dot code ready for spaces tab on the, on the right. Uh, that's one. Yeah. There is a git clone, uh, link under new. So here we should be able to, uh, to give the URL and we should be able also to give to, to specify the branch. Uh, um, let, let's check if, uh, it has gas about the branch in some way. Maybe it's a hash or a pound. Yeah. Uh, let's see. I'm not sure if it honors it. Let's, let's try this side. Yeah. Don't recall how to specify from the UI the, okay, it went through. So he, yeah, it went through because get up is automatically already rekt into the default branch. Uh, yeah. So it's a bug, maybe in Colorado space that, uh, start with master by default. It's the kind of hard coded, no, we, we need to update it. Okay. Well, it's nice that we're, yeah, we, or did find a way just run, get clone paste in the, the, uh, and, and here I am with, uh, access to edit these files. Uh, I could jump into the, it should be a, or was it, uh, I'm not going to edit the index HTML again, but anyway, it should be underneath. It was in react. Public. Yeah. So this should give me a nice, uh, with syntax highlighting and everything. Um, VS code plugin support. All the nice advanced features and probably some auto save, uh, going through. Uh, but this isn't, I think, synced so far since we just did the get clone. I don't think it's syncing with the, uh, hosted environment here. No, we need to, we need just to push our code. Uh, it's not synced to the, it's not all the watching, right? Yeah. It could be if we install the open shift connector and then we, we, we do the update from the connector because, uh, okay. It's a front end to the auto auto, but, uh, at the moment it's just, uh, the code cloned into, uh, part that's it. Okay. Nice. All right. So open shift connectors and another feature that you might want to add on to get that, uh, live reload feature. If you're doing front end languages that have this, um, hot reloading, live reloading kind of support, uh, that's nice. Then you get your editor, um, and everything else all bundled up and ready to go. Uh, and if you're using dev files, this ought to be a lot easier to reproduce. Um, uh, I was a little bit, uh, discouraged after last week's try some of the issues with Odo, but this is actually gives me more, more reason to go back and use Odo to, to start these projects. Nice. Uh, let's see. So next thing I had on this list, that was the first objective I had was established a containerized development stage. Um, I'm going to count that as excess as a success, even though I didn't fully finish the, the, um, OCR sink command. Um, I haven't been watching chat, but I didn't hear anyone scream. Yeah. We really need to see OCR sink. So I'm going to move on to the next step. Uh, we did update some settings on the service to get this to bind to port 3000 other than that, setting the, um, context directory and making sure it was binding to the right port. Um, those are the only two things I can think of, um, that we needed to modify to get this repo working. So that's, um, pretty good. Um, considering it was intended to work with a, a Docker file. Right. Yeah. My, that's pretty remarkable. I would say. Oh, and it looks like goal number two on here was, um, sink changes from a repo. Goal three was deploy a build of the same repo, um, using engine X or a static server. Um, so I have not tried the step yet, but should be able to do the same thing going back to add, uh, and then. From catalog. There you go. And there, there was a, I thought there was something called like the static web server. There's just, there's a template and a builder image. Yeah, the, basically this is a source to image. So engine X or Apache needs some repository where to read your HTML files. Uh, it works in this way. So it is automatically done. If you provide any repo with some HTML file or Apache com or energy com. Uh, this is how it works. Okay. So I don't know if in this case, I'm going to make sure we tell it main. I didn't, I didn't say main explicitly last time and it just worked. Yeah. It works from here. It doesn't work from a code ready for spaces because I think it's our coded master somewhere. No, is that a bug we can file? Or I'm sure it's probably filed, but where can we go? Yeah, we can, we can see in the issue list of the project. If there is already any bug about it, otherwise we can just open a new one and contribute to the community in order to serve those files. You will need to do a build first, right? You won't be able to serve directly the, um, the, uh, we need to know JS build before we need to host them. That's what you're saying. Yeah. So in order to do that, what I usually do, um, and as I mentioned, I'm using Docker files, but I do a multi-stage build where I, I start, start by building the application and then, um, I serve the archive that was over to a, an engine X container. So we can do the Docker file source to image. There is, uh, in the list, because I've seen that Joel put in the repo, some Docker files, maybe we can point to that Docker file and do the multi-stage build like he did. We gotta give some context here to the right path. Yeah. Uh, okay. So you're saying do a import from Docker file and there's a Docker file in that sub path? Uh, yes. I think so. Yeah. Here we go. You might, you might have to use Docker file.rootless though. Oh, I'm not sure if we'll be able to do that through the UI, but we can. Let's see. Oh, here we go. Yeah. Hopefully that knows to try, but hopefully I don't need to add this context here as well. It should, I'm assuming it'll keep the context for this. It's relative to the context or field is what it says right there. So that's cool. It'll work. All right. And let's see if, is there a, I don't see any port. Is the inherited from? Uh, it's 8080. Okay. Okay. Oh, for, from non-engineering, sorry. That is what we had, uh, I think it's the default here. So that sounds like it matches up. I was just checking to see if there was a port line in the Docker file. Okay. Application front end. I'll call this. Uh, run in Docker, run it as a deployment and create a route. Let's see how this does. Try this one on. Point this is one. I guess the other option would have been to. You can build it as no JS. You, you could do no JS or you could commit your build, I guess. Which. Yeah. Yeah. You could do two builder to, to build, uh, and then, uh, use source to image to the other build you did, but with a multi-stage, I think it's, uh, easier. It should be fine in this way. We don't have, um, I thought we would have tecton enabled in the sandbox. Not yet. It's not. Uh, okay. Operator yet, but they're, they're coming. That was going to be my backup plan on, on this was just used tecton to do the initial build and then try to figure out the next steps from there. Um, yeah, I was thinking if, if we did run a build with the node JS image, um, we'd have to check that package.json and see, um, what it does for builds. But I thought package.json was running a. React scripts build. So that should produce, um, I wonder if that exports a whole dist folder or it kind of look into our full, um, container here and see what happened. So it wasn't, so we never launched it in that container. So it's not there. Um, but I think it, if you run npm run build, then it should create a slash. I can never remember if it's slash build or slash, um, dist. Oh yeah. So there's a, there's a build folder in here. React creates a build. Yeah. Okay. And then, okay. So if you list it right now, you, it should be empty. Oh, it could be empty. Yeah. It's very much not. So maybe we just need to, uh, but there's nothing in static. No, there's no JS directories. Yeah. Okay. But that's just a sub folder. So maybe I could just deploy, um, I wonder if I could deploy this in a, redeploy another copy of this image in a kind of production config. Um, so it's using engine X or something else, you know, other than what's in the Docker file. That should definitely work. So we already have, we have the files in a container in the system. Um, I don't know how to tell engine X to point to this container or, um, use this though. Yeah. Looks like this isn't working out. Bummer. Uh, build failed. It's always syntax. It's my story and I'm sticking to it. Oh, interesting. Docker app is, uh, a problem that Joel, uh, Oh, is that the rate limit or publish? Oh boy. Interesting. Gale to pull image failed to pull from Docker hub. I'm going to blame, uh, I'm going to blame, blame Docker on this one. Well, it might be the rate limit that I, cause, um, cause what happens here is that, um, uh, Docker hub has a limit of 100, um, image pools per, uh, per hour by anonymous users and all the users of the developer sandbox are all going against that same rate limit, right? All the users are using the anonymous, um, anonymous calls for that same IP address. So if you're using dev sandbox and it's like just slamming that rate limit. Yeah. Exactly. So the, what you can do, um, and there's a blog post that was published, uh, like two days ago about that, um, and I'll just grab it here and paste it in. But basically what you can do is that you'll just use a, um, some, some, your Docker, uh, credentials in order to, uh, not count against the anonymous user anymore, but against, um, your authenticated user. And then you have access to 200 pulls per hour or something, which, you know, you're probably never going to hit. Fine. So. So when I asked you which secret you want to include in your deploy, you could probably have your, your Docker log in credentials stored as a secret or something on the API and say, all right, include the secret. And then in fact, the, the, the user interface asks you if you have any credential to the registry and when the builder service account start the bill, he has the, it has the, the secret attached. So it is valid also in this case, if we, if we have the, the Docker secret. Well, um, but yeah, next step I wanted to do was basically package that up as a static. So we have, uh, the, the Node.js build process. We did build this for a, um, production environment. We ended up with the, the correct kind of sub path. Um, and we can view it all in, uh, yeah, we should be able to, to serve that up as well, uh, another kind of modification you could potentially make on your containerized environment. There's a, so there's the script to start this. Started it, uh, started this react scripts line. Um, you could theoretically use Node.js as a web server as well and have the default start be a kind of production mode, um, Node.js, um, with some really light static server. Um, there's a couple static servers for Node.js. They're pretty easy to use. That could be an optional start value. And then you can have this one do, um, have an alternate, like start react server, um, could be the alternate keyword, um, that you could use here. Uh, I had a way of configuring the source to image, um, environments. I'm not a hundred percent. This is, uh, included in the, in the latest images, but, uh, there was a option you can, you can do, let's see if I'll pop open a terminal. You used to be able to set an environment key, um, of npm run. And this would be defaulted to, to start. Uh, actually, let me, let me see. I wonder if that's in the, see if we end up anything. Yeah. Okay. So it's already set. We have npm run is currently set to start. We can include an environment key. And so you could do something like export, um, npm run equals production. Uh, you're better off using the start, um, flag, but you could have another one that's like, uh, dev mode, I don't know, whatever you could, you can set this npm run key to whatever value you want, uh, within the package.json. And then when we, in your application using the Node.js image will run, um, instead of, instead of running, uh, where's my keyboard, instead of running npm start, what we actually run is we run npm run start, but you could do, uh, npm run dev mode or something else that's defined in your package.json. Uh, in order to boot into kind of any other start script. Does that make sense? Hopefully for folks that are Node.js users, um, that makes sense. You can boot into the, you could definitely trigger the build, um, within that script tag trigger the build and just serve with using serve, for example, which is a lightweight, um, HTTP server. So that would definitely work. Yeah. It's, it doesn't get you a engine X, um, front end. And that was part of what I was trying to, uh, accomplish in this session. Um, but it would give you the ability to set up this whole workflow using Sandbox and what's existing in Sandbox today. You just overload the package.json scripts and then export something that's npm run and whatever script you want to run. Um, and it'll boot into that mode. Um, so, uh, that is we're running out of time for this session, but hopefully, uh, solid introduction to front end, um, containers, uh, using Jules, new front end containers repo. There are other examples, angular, um, vanilla, uh, which I assume is kind of like a minimal version. Is that right? Yeah. It's the no framework, like just plain HTML, CSS. Yeah. Yeah. Curious. Nice. Nice. Uh, there's a, there's a core built in module in Node.js called HTTP. And I remember there was a framework a long time ago where someone was saying HTTP is a framework. Just use the built in that's, that's your framework. So yeah, it's nice to have a super minimalist, uh, implementation as opposed to a big, uh, thick one like, like react, which is pretty thick. As far as front ends go, um, view also another cool option. I'm interested in trying out in here. Um, so hopefully we'll have, uh, more JavaScript examples in the future. Let us know in chat or in that via that feedback form. Uh, if you have other frameworks or technologies that you're interested in seeing on the open shift office hours. Yeah. Let me grab that dev feedback link. Please fill that out and let us know what you want to see here on the channel and definitely, definitely subscribe to our calendar. So you know when that thing you requested is going to be coming up. Um, that is all the streaming we have for today, folks. Uh, some people are on PTO. My team is on a pack time right now, visiting and all of our customers over there virtually, but still in their time zone. So there's a lot of more fun stuff this week. So, you know, tomorrow we're not going to have the level up our as a result of my team being in a pack, but we still have the, uh, the open shift administrator office hours and, uh, red hat and enterprise links presents tomorrow on the channel. So yeah, we're also working on some new shows. So stay tuned to folks. Uh, as always, we are super busy. Um, yes, Joe mentioned his, uh, Twitter handle Joe Lord with two underscores in between the two words. I am Chris short, all one word. Um, Natali, you are blues man 84. Yep. Yeah. There you go. Uh, and there is Ryan Jay on Twitter as well. So feel free to reach out to any of us. You have any questions, concerns, you know, feedback, comments, want for content, whatever you need. We're here to help you all. Um, and anything content related, feel free to email to me. See short at red hat.com. I forgot to mention that. Uh, and yeah, great job, everybody. I really appreciate you all showing up and doing this. This was awesome. Yeah. Thanks. So it was fun. Thank you. Yeah. Have a great day, everybody. Stay safe out there. Thank you. Bye.