 Hello everyone. Good morning. Good evening. Good afternoon. No, I don't. Okay, cool. We are not muted It's just fantastic It is Monday morning for me. I am Just now trying to get my stuff together here get my poop in a group as they say But I am very very happy to be joined by Madhu and Natali from Red Hat here. We are going to walk through the the joys of building Application from nothing the he the idea here is to build like a e-commerce front-end store and We're gonna just gonna take it from open shift to business and I am an active participant in this business as a quote new employee And the do and or Madhu and Natali are gonna kind of help me out through this, but they're gonna show us the way So without you know, I'm Chris short obviously from Red Hat, you know technical marketing manager Natali, would you like to introduce yourself to the audience, please? Hello, my name is Natali. I'm from Red Hat part of the developer advocate team And my name is Madhu Puli Bali. I'm from France and I'm a part of the solution architect focused on developer experience on open shift Wonderful so where are we beginning today on our journey here? Yes, maybe we can start With this introduction. So today we would like to show to the people How we can we would like to simulate a real use case of a developer team that has to develop one e-commerce one e-commerce store in using micro services and we would like to show how to Do this directly on open shift using an online IDE as a code ready workspaces So we're gonna do it straight directly from the platform with this online IDE and We created on Github some another an organization because we would like to create a wine store wine e-commerce So we are going to simulate those three developers those three people. So Chris Natali and Madhu will be part of this organization and we would like to to call together with you to show how would be Straight forward and fast to develop directly from the platform. So we don't need to set up any idea We don't need to set up any environment. We just go through code ready workspaces, which is read that product around a clip share Uptrim project and we we try to to build this e-commerce in those two hours. We try to at least so Yeah, we will do our best. Yes. Remember failure is an option on the stream Y'all like like we could get through this and it could break in some horrible way And it could be us opening a bug report after the fact that might might end up either result of the stream So just keep that in mind like no big Yeah Madhu do you want to start with the production of the flow? Yes, so one thing that would like to add also is Doing the nice introduction of Natalie is the fact that everything that we are going to show you so running an open shift So as he mentioned ID or the tooling the database or the services So everything it's running an open shift. So which means that as a developer I will be able to really embrace all the cloud computing Advantages and we're going to to show you how it's working So what I'm going to do I'm going to share the screen for starting with That's The inner loop developer inner loop So I'm quite sure that you are quite familiar with that. So I don't know Chris for example if you already Heard about this know about this. I know there is some a twitch session or so around this inner loop So I mean the inner loop is you know a very valid thing in my opinion Not many people I think are Deeply familiar with it, but if like this this image makes a very good sense of it, right? Like the the developer is here to write some code run some code Validate that code debug that code and start over right? So once that code is shipped to production it is you know, it can re-enter the loop But the loop is always the same. Yes. Yes. So exactly so around this inner loop So basically we have it's kind of a process. So really the workflow around developers So basically what the developer is going to do a lot of time in his life So which mean that in order to be able to create the application we are going to we have this Interactive process to first so take the part of the business logic We take this part so we implement it So between that we are going to code then when we cut that so we have to run it and of course from when you're using some Framework or some languages you will have to build it first But basically run it then you check that is everything. It's what you expect is everything It's okay or not So if there is any issue so it's a bug and you're going to to debug that and to to find what's happened And if not, so you go directly into the code so take another piece Etc etc etc etc and redo this process again and again and of course The outcome of this process that you are going to do many time It's the application that you are going to build and of course when the application will be built It will not be finished because if there is any Let's say bug or any Improvement that I have to do so you are going to do again the inner loop again and again and again Which mean that everything that we are going to show today It's the fact that everybody if you are going to code inside so on the clouds It's not going to change anything to that loop because it's something that you're doing So let's say maybe currently inside your laptop or inside your organization, but when you're going to the cloud We are really sure you that we have a plenty of a nice tool tools in order to simplify the way and for you to get this Transparency and to let's say the beautiful path to the cloud computing Beautiful. Yeah, so let's say you want to to add something on this how we can Move forward Yes, I think this is a very good introduction on the concept of how should be this loop in developing I think we can start showing the use case. No, so we say that we are a software company We our name in this example is the red wine software just because we like red wine and And we are a member of three if you have a okay, we are Chris me and my doing this red wine software So we are starting from scratch, right? And we have from the from the you know from the business unit from the from the management We have this request of doing an e-commerce of red wine So how we want to start this? Usually we start with once upon a time We used to start with some monoliths that you know some may hopefully some jbos containing everything So we can have the front end and the can together Today we can start the couple the coupling things and think about doing Developing in the microservices. So since we are Three people we are developers. So we can split the things. Well, so we we were thinking that the Madu can do a back end So maybe we can if we have to do these e-commerce We need the some front end that Quity some back end and that use some database. So this is the The start of course we could start also from some diagram But just to give an idea we give we want to do this topology. This is architecture So if we had to start from scratch or from our computer, you will have to set up any idea like a visual studio Resolve all the dependency Give to other the other dependency and set up all the things and decide how to deploy this application We can demonstrate that in OpenShear we can do everything directly on the platform So Madu will implement a back end But before implementing it you will code this back end in the code ready wall spaces test locally test Local means that it will test into a container inside code ready workspaces When the deployment would be good it can push this code to the platform so can deploy on OpenShear So we will have this Kubernetes ready application Just code it in the platform and deploy the to the platform directly from the IDE And I will do the same thing With a front end and then to all three together we will have some interaction about having the pull request If we do any change having discussion You know when you develop when you develop you have a lot of discussion around how to implement things How to do tests for instance, so we will start this This is the job together So I think we will Madu we can start with them with the platform integration Since you are sharing the screen, maybe you can or I can start sharing the screen as you want Yes, maybe you can start sharing the screen and then moving and start to To developing the front end Okay, and of course on this team. So Chris you are our boss our manager So there is something that you don't like something that you know that is crash Very out. So just yes tell us You make me host so I can share the screen Yeah, I'm gonna do We're having to do the host pass around because my zoom settings so zoom settings aren't just the client settings apparently we learned Like late last week. There's this Huge list of zoom settings in your zoom account if you're actually hosting meetings That you have to toggle on and off stuff to like let people share their screen who knew the fun stuff So yeah, we have to pass the host around to get screen sharing working Just let everybody know what's happening right now Yeah Madu I think you have to click on my yes, it's done. Okay. It is done Perfect Also, we have now just learned that if you retroactively change the setting zoom does not apply that to the current call So if you can see my screen, no, we have some somebody they find it Yeah, yeah makes sense so Everyone can see this really simple. We want to do this wine store front end back end So those are two basically two micro services to macro micro micro services And and a database know because we want to have persistency in containers So we will use open shift and what we did the code thing we did is that we integrated kit up Authentication so in this open shift cluster here, I'm gonna look in with the github Authentication so this is me because I already did that The authentication. This is me logged in in the open shift with the github integration and me Chris and Madu can log in in this cluster. Thanks to this integration We can also be granular. We can Allow only certain teams. We are a team of developers like crazy is our manager So the developers can log in it can log in because it's a super set So we can be really granular on that and we have this integration in the platform, right? So this is our platform What we have in the platform is the installation of code ready workspaces This is a normal user So I can't see all the project that I have here if I go to my administration view This is just me. I cannot see all the projects But if I go to an already opened, you know here as administrator, I can see all the projects So I am the administrator on this Open shift clusters. I've done the github integration so if I go to the Modules and I see the content you can see here not showing The secret is another secret. So I have any github integration. This is the client ID I map it. So this is the organization only people belonging to this organization can access to the to the clusters And and this is cool. The only thing that the other thing school is that we basically installed the code ready workspaces through an operator So going to operator up we stole it code ready workspaces Thanks to the CR to the custom resource We can we could define a code ready installation with that would be In this case, it's a code ready installation with all of integration So the github you this means that the github user is also logging in in the IDE with the multi tenancy And we're using the TLS mode. This is a setting that you can put in your operator, right? So just straightforward. We have an operator here How do we access to our clusters to our IDE? So all the developers should have access to this route of Code ready. So this is the route that we need to access Already code ready workspaces If you see when I click here, I need to authenticate again with the github github integration So here I'm logging in with a github integration. I'm authorized to access This because I have this integration and finally I have my code ready workspaces. So This is the online IDE if you haven't seen it it's The project the upstream project is a kitchen in red dot product for ready for spaces That you have On open shift when you have open shift you have automatically code ready workspaces is soluble You can pick your favorite Programming language where to start with so if I need to develop in java I can start with a maven with porcus with spring boot for not js c++ All the favorite programming language runtimes are here For you can also create your custom one. So if you want to add for instance a cobalt workspace somebody In the IBM twitch we were talking about the cobalt workspaces. It was an idea You can do it. You can do it. You can you can create a container that represent your workspace So for this example, I want to be in charge of implementing the Frontend and I want to do this on in react. The react is very popular today to creating Frontend application. So I'm going to start from a node js workspace And I can also customize this experience. So I can create one workspace here I can select my plugins that I want. So this is my working workspace. I can select my favorite plugin Some of those plugins are already enabled Like the typescript support But for instance, I would like to have the open shift integration in my IDE Because I want to Start interacting with the platform. I want to deploy directly to the platform, right? So I can I can pick several Plugins that I like And the most interesting thing here is that you can pick you can also customize this experience And we can show after that with a dev file This dev file, it's it's like the docket file for the code ready workspace workspace So if you want to customize this experience in this node js You can add a run configuration here like, you know the dev test build You can add custom Comments the bugger you can add also custom An additional plugin from visual studio because It's supported the visual studio ecosystem of plugin And so you have you can also you can really customize this experience So for the moment what we are doing here is send this and running this workspace So this this workspace will run What happened under the hood when you start from contra ready workspace is a workspace Basically the plot this is Since there is an integration with open shift There will be The creation of a container a workspace That will contain an agent that will connect to the code ready workspace is a master Let's say the controller and this will create the connection between The workspace pod with the Code ready workspace is a pod. It's similar to Jenkins master's lay, you know Architecture we have a master controlling several pods that will be your will represent your workspace when this job here is finished So when this job will finish about pulling all the images that that are needed You have a visual studio You will have a visual studio like Look and feel so this is because about the the integration that is available also in visual studio So you have a visual studio like experience With a autocomplete of the code the plugin integration But directly on the platform The only thing that you need is having this url. Somebody will give you this url. This url will Represent your ide and you can start god coding from this url. So As we have seen after the initialization of the workspace, there will be the initialization of the ui In the wild the ui will load code ready workspaces will import some In this case, it will import some default project to some Skeleton of Node.js application because this def file was configured like this and and it will also download the language runtime so If you want the autocomplete if we want to syntax highlighting like in this case here This is is because there is a language feature Support so the the ide will will just provide that And here i'm starting from scratch from a a skeleton of Node.js application Interesting that I have some skeleton code. This is an express application I can I can run and the the interesting part is that I can Start running tasks. So what means running tasks is that this application has some dependency for instance And some to to solve so I can start running that all some already configured tasks Um, so I can start downloading all the dependency. I can start Installing new component for this example. We will do a react application So I will need to start new component And the cool thing is that you have an embedded Browser here. So I can test locally. This is Exists only in my workspace. It doesn't exist in OpenShift yet When I'm ready, I can deploy everything with the Integration of the OpenShift connector this connector here and the Kubernetes connector allows you to List all the components in OpenShift create new components. So I can code test build and deploy in OpenShift directly from this UI So this is something cool that we can do and since I'm in charge on the um, I'm in charge on the Frontend and I would I would like to use React for for doing this frontend The another thing that I can do is Using a terminal. So I can use this Already configured task that I can start like this. I can also kill the task with this feature like terminate task So when I when I have some running task, I can kill this task Or I can kill from here just killing the tab like that But I have also if you look at it here, I have a shell. So this is my shell I can run all the commands that I need. I can do the npm start and I can do all the things that I need like uh node with the application So I can redo the same thing I did before like before Run but from a command line. This is this is cool. So I can also start bootstrapping my React application And madu in the back end will do the same thing. So we can work in parallel, no? Madu can bootstrap the quirk purpose. I can bootstrap the the The react application that is this command here npx so because here I have In this workspace. I have a node. I have npm I have npx So I can I have all the command that I need to have a node application which is ready also to To to bootstrap a react application. So if I want to create A react application npx create react app And if I want to create a name for this This is gonna create a directory. Well, where I will I will work This is going to download a lot of data is like starting a new application the loading all the components In the while I can have so I can have a react application with this skeleton Frontend over here. I think in the while we can go through the madu initialization of the back end So here I'm initializing a react frontend We can initialize the quarkus back end and so we can iterate on that Yes Okay, thank you. Let me so can you make me host? To be able to share the screen Hey Perfect Now do you see my screen? Yeah Right so everything that So I'm going to do exactly the same thing that natalie just doing so through quadrally workspaces So once again, I don't have to install anything into my local laptop Which means that if I have to for example to move from node gs to To maven for example to go language So I don't have you know to fight with my environment to change my class path to change the path To change the version of my maven or my java and so on so to do all this Gym around my configuration. So now I just have to ask for something and I will have that right now It's a bit like you have with everything about the netflix or any yes the video on demand So you would like to see an horror movie at so in the morning. So now it's possible, which wasn't the case several Years ago, which is quite yes Quite nice. And yes, of course, I love horror movies so Let's go for the quarkus backend. So I'm going to do exactly the same thing So I'm going to select the quarkus. So from the quarkus here. I'm going to edit this workspace to use the same plugin so get the open shifter connector plugin And uh, only that But I'm going to have I'm going to take it and double check So I'm save it which is okay Now I have quarkus. So it's going to run And in couple times. So we are so I'm going to have so my workspace Which is the new local for me as a let's say cloud developer and From this you will see also in the second part of this switch that I will be able to share all my configuration with natalie And natalie will be also able to share this configuration very simply Using the defile so which means that everything that I'm going to configure all my room Which is the tooling that I got for doing my quirky stuff Even if I need to custom things So I will be able to share anybody who would like to use it and we will show you how to do that so In the meantime, so So in the meantime, so we're going to of course that's it's going to wait on that Ah, yes the live demos Yes, of course But I have a backend just here I've been running here, but uh, I mean, yes, let's say it's a live demo We have the challenge to doing everything from scratch So let's do it And we do it live. That's how we roll here. Yes. We can show maybe Yeah, please. I mean just just explain what's going on here real quick, right? Like it's it's it's creating A developer workspace with all the plugins that you need And you can create these things in advance and then share them out with everyone else with all the right connections and plugins and everything else so that your developers essentially Get into the github org Get a workspace and they're off and running Right, like that is the process here to get your own workspace. That's pretty powerful and efficient stuff in my opinion Yes, yes, because it's about uh, so the time the amount of time that uh, when I work as a developer When I had to switch to project and even if it's not switching to project But just to be able to maintain stuff. So I have a Put a request. I have a ticket about the bug. So I need to work on this bug So it's a really a small bug. It could be something very simple But the time that I consume in order just to as I mentioned to change my python version To change all my libraries Version to be sure that I will have the right environment to fix that bug Which is going to take me really just a couple of minutes Then I push it and then I need to change again all the things that I have into my laptop Just think the fact that now when you've got a pull request, for example, you will be able to attach A defy to that pull request, which means that if someone the developer needs to fix it You just have to click on one button. It's going to have all these Uh workspace up and running and of course if you need to for example to build Something or to back at something or to do any action So you don't also have to also remember exactly. So how are you working with? Muggies, so it's npm Muggies or npm in it's npm start So I don't remember what are the parameters that I need to put into this application So everything that uh that that you have this question So you really be able to just capitalize that put it into one config file Which is the defy and then consume it and anybody could be able to consume it So you doing the job once and after that You can really consume that a lot of time and it's exactly the same context that we have the same concept That we are with a container, right? We build container once and after that you just Use it and push it into different environment and consuming Anytime that is needed and it's exactly the same concept that we got and we put it In the end of the developer, which is quite powerful Yes, like I can't I can't tell you right like, uh 20 20 11 20 12 ish like the the the challenge of just getting a dev environment set up So that you could start working, right? Like you spend a week maybe two weeks If you had bad documentation about how everything glued together, right like getting just a dev environment working, right? Like they talk about this in the phoenix project and the unicorn project getting your development environment working Has always been a challenge for the industry We've given people like a way to do it set it and forget it, right essentially, right? Like you do it once and it's repeatable and it's consistent and it gets upgraded Uh in mass not uh, you know, oh, I upgraded to this version So now everybody else has to upgrade to this version bubble It's it's a lot easier to manage this way It's a paradigm shift for sure, right? Like you're doing everything in a browser now, but Everything behind the scenes is connected and glued together and we're gonna work Oh, exactly So quite good quite powerful. So in the meantime to get this discussion So as you can see, I have my environment up and running and I'm going to start Uh as the same thing. So we are going to use quarkus. So quarkus is the next gen z kubernetes Java Framework which really focus and really performance for cloud develop cloud native developments So around container because of course that we are going to use jbm. I'm going to see that it's java But we are going to have really cool stuff around this framework. So let's start. So here So by default I'm installing the plug-in so the quarkus plug-in Here so by default the quarkus plug-in of course it's installed and what I'm going to do I'm going to generate the new quarkus project So to generate the new quarkus project. So as you can see I Execute the quarkus plug-in. So in The bottom here you have activated quarkus the bottom right you see the little spinning thing The bottom left. I'm sorry left also. Yes, right left. So there is some Yeah, you can't really highlight it, but yes, it is it is there It is spinning just to show you that like quarkus is getting you know all the libraries are being pulled down All the images are being pulled down off you go But if you see madu was able to bootstrap the quarkus application because there is already a Run task from the plug-in that allow you for the react one for instance We did it manually But what we can do is now define a dev file with some run configuration like bootstrap react up And we will be able to do like madu from the ui So we don't we don't need to go through the console again to bootstrap react We can do from from from the ui if we program this in the dev file for quarkus is already there But this when you want to extend things and that things you can do through that dev file Yes, yeah one touch updates Yes, so now add a whole language to your environment one touch. Yeah So now it is okay. So let's start with uh this part. So I create the quarkus project Which could be a maven. So let's say that we have the arc which is called the wine The project that we're going to create it's uh the inventory So the wine inventory We're going to use the version One snapshot I can give it like this the packages rewind my api and resources will rewind resources I click on okay. So here as you can see so from quarkus So I'm going to have a lot of uh different extension from quarkus Which is going to help me so directly to select which one is available from this framework I'm going just to use use it take it And it will be quite fun So as as the manager quote manager here on this call that amazon alexa one We need that in the next version so people can order their wine via voice Exactly So the one that is uh required it's uh the rest easy of course that's easy because what we are going to to do It's uh to create some microservices and as I mentioned so quarkus is really focused on uh java for java developers To code java application into the clouds and everything is on the cloud So should be a services. So not necessarily microservices. I think we can have some debate on that But basically I want to Let's say to avoid debate. So let's say services. So that's why this one is required is required and is there So the one that we are going also to use it's um I'm going to use Which one I would like I would like maybe I can add later But I will have to use my jason b because I would like to change it to get some api using jason And for now, let's take and let's try this With this one. So now everything is set up. I generated my project. I add it into my uh current version here. So now I have my uh rewind so inventory Everything is set up for sure and what we are going to do here. So as you can see here So I have one resources So this is the only class And the only piece of code that I need in order to deploy microservices I think it's quite awesome because I don't have to create any application I don't have to create Let's say different things. I just have to create these resources and directly I'm going to consume that And that's it. So what I'm going to do here now So I'm going to go to my rewind inventory services and I'm going to run that application So maybe I'll compile so park use dev and I'm going to use the dev mode on this On this compilation, but let's see So here it's going to come it's going to of course build my application I think nothing very different Of the fact that you're using a java. Yes, maven java application. So it's going to download everything It's going then to build everything So it's saying that there is the port The debugging port That we're not going to use yet Let's wait a bit. So it's taking everything from maven and now I have my quarkis up and running. So this one This one I'm quite interesting on this one I will open it just there. So this one is my new application of quarkis up and running so one thing which is Interesting, it's the time the start of time that I have just for second Which is something that for some not competitors, but different framework Around micro services are quite let's say more Longer around that. Yeah, but quarkis is really really powerful because there is a lot of things that At the start of time. So usually in the java at the start of time So you have all the reflection things You have to parse the code in order to All I know to parse all annotation and to transform them into methods You have to do a lot of things like this when you start up jbm Classic, that's a java java application and all these things. It's Sometimes that you are going to out. So I don't know if you If you if you have a look some some time, but when you have an application who don't Use and consume a lot of resources You are the big pike of resources at the start of time and after that you have let's say the normal the normal consumption of the resources The thing is what is important is at the start of time. There is a lot of things that What we do is quarkus removed that sparse During the build time, which means that everything that is not necessarily to have at the start of time You do it at the build time, which means that now with quarkus you will be able really to be able to to achieve a really quick startup and Using also less resources, which is quite awesome And we can have a look on the resources that we are going to use so when I'm going to push an open shift It's really really nice. So here as you can see here. So I have my application and from this application I expose The pass hello So I'm going to expose this pass hello So which is there and I have my hello and I'm quite happy with that Yes So what I'm going to do here. I'm just I would like to I would like to focus on that We didn't we didn't have to set up any Kubernetes ingress or open shift routes No, so we're working on an IDE that automatically created the one open shift routes That is going through a workspace for for us is transparent We could even don't don't know anything about open shift. We are developer We are focusing only on the code Everything it's out of the box. So this is another interesting thing of the integration through the platform about already works That's because this thing I could be able to share it Uh, for example with you. So I don't know increase we can share it into the uh, the twitch chat Yeah, you can yeah go ahead. I mean, yeah drop it in there. Let me uh, if you drop it in the chat here in zoom I can pop it into the uh, zoom the the twitch chat if you don't have it open Yes, but I'm just looking for the two chat. I think I have two Yes, there there. There you go. Yeah, it's gonna be hiding elsewhere Here Or just go to the twitch channel drop it in yourself. Oh, okay. There we go. All right and coming Actually, let me make sure I get to it first before I drop it in twitch So just get this link. So go to the uh, hello To the uh, hello rest api and you will be able to see the hello api So what I'm going to do so in live, I will be able to code my application So which means if you remember about When you have to code run and test the application in the java way Usually what you do you code Then you build your application with going to take time. Then you run it And then you test it Which means if you have any issue so you have to first so basically control c to keep the process Code again build again And so on and so forth which means that you are going to consume a lot of time and also this also, um uh involved and let's say One consequence of that is that that we do what I called the mini waterfall Which means that as a developer because I don't like waiting So what I'm going to do I'm going to code a lot. I'm going to code a lot a lot a lot a lot a lot Maybe during one hour Maybe during two hours to be able to code a lot to be sure that I reduce the time that I have to build Because one is building so of course it will depend about the size of the application, but it could take a lot of time So which means that when I've got some issue So just think about how many time I will have to Dig and to investigate into one hour of code So I don't know how many lines of code to see where come from the problem, etc so everything that you have seen with the exchange of of so the waterfall to uh, let's say the dev ops who have uh to accelerate that who have some iteration And to be able to accelerate it very quickly. It's something that usually so I think it's different about Java developers and how they like to build But yet sometimes to avoid the build phase So you code a lot which means that when you have to debug you spend also a lot of time to be able to debug But if you are able to code small and to test it very quickly if there is any problem, you will be more reactive on that Which is something that we are going to to to try right now So I'm still in Java. It's really important. I'm still in Java here. It's hello. So what I'm going to do I'm going to say so hello to my to my manager, which is so hello, chris Hey Hey So automatically because it's a web browser. So it's going to save for me Which is also important because if I got any let's say network issue So at least my code will be saved and I'm not going to lose everything So it saved it and now when I'm going to go there. I'm just going to refresh My web browser and as you can see, oh, hello chris So now I have this up and running which is really really awesome And as you can see you can see here that I have something called the hot replace Which is taking so uh one second So everything that I'm going I'm going to do so I will be able to code to add things etc So when it's safe, I just go to my uh to my uh application I refresh it and now I will be able to to add the results So I don't know. Yes, how's you so uh I was so I still a java developer from couple years. So more than 10 years And I'm quite remember that in java. Sometimes I was a bit jealous about the javascript Uh People who just have to modify something and to just have a look on the website So it's working well And then they are going to move forward and to be able to code Quickly that I will be able to do but right now with squadrice I got exactly let's say the same feeling the same. Yes, impression That's now I have the power and I can be more efficient than ever Which is really really cool for a java user really really cool So, uh, what I'm going to do here. So I'm going to cheat a bit Because what we want to do is to create our wine resources. So from the wine resources what I'm going to do. I'm going to create A new resources there. So as you can see my environment is still up and running So I'm going to create different classes. So just one classes. So my wine but java I'm going to use Let me hear. So I'm cheat a bit it just because There is a lot of you like cheater kind of type And I love it and I mean Control c control v. It's a part of the developer work, right? I think it's one of the favorites Uh, one of the favorite commands that we use as a developer Which is which is really really great, but we've got tension with strict attention Yeah, yeah, so like you can you can be a copy paste developer, but you can also be a very very insecure copy paste developers better Pay attention with that control v your command v is doing for you So I'm going to do that I'm going to add so from my quarkus done from Pump.xml. I'm going to use my GPS. I'm going to use a ibernet Orem in order to manage my database I'm going to use as a database Maybe not for starting. Let's be yes. Let's be crazy. I'm going to use a postcard database And I've already ordered the other one, which is okay. I'm going to push it So automatically it's going to add this the right libraries into my uh pump.xml And here I'm going to double click here. So here it's a simple entity So from this entity that we would like it's a wine that we're going to map with The table wine and from this table we're going to have so an id a name and an origin and after that you have the the set of get set and Something to be able to to to get some Yes to display what is inside our our data Yeah, so a simple data model that we can map through an api Rest communication So the idea in these examples that we have an api rest that we can query from the front end So the front end will query asynchronously this api call rest api endpoints and show an html And this part could be done by react showing Live change or live content from the database So actually we have three components the front end the back end and the database because through ibernate We are automatically creating and generating any tables in the postgres database Within the same works we are working still in the same workspace Yeah As you can see as mentioned, so at the beginning we add the json be uh to map Some so we're filing to json Sapi and then we add the api on that one for all the jpea Stuff and the postgres database here So now that i've done that so from my wine Resources i'm going to add this one this function. I'm going to get the yellow word that i'm going to change And this one I'm going to add this as api so api Wine Here we are going to display so under the comments so wine And we are going to map it We are going to retrieve all the data from my database coming from wine and sort it As we have an origin So everything it's okay here the thing that i need to do it's Basically to be able to add the configuration of my database So first of all what i'm going to do i'm going to create a new project From open sheet. So now i'm switching just to open sheet because i need the database and of course to get the database As i'm lazy i'm just going to ask to the platform to provide me the database I would say this is not laziness. I would say this is smart This is the sort of effective use of your time laziness is good for software developers and systems engineers absolutely Exactly because i'm i'm i'm really really lazy which means that i try to optimize everything and to be sure That i will be able to do my work easily without you know waiting etc etc But i prefer to say that i'm lazy that i'm smart, but you understand you are a smart person So uh the database i would like to require so it was a database And of course an open sheet. So everything it's about so configuration So i'm going to add my inventory Database with the password. So inventory The username inventory the password also inventory Is that why? Database yes inventory Yeah yeah So i'm going to specify just some generic stuff here I provision my database Oh, i need to create so wrong uh Wrong project. Let's me first create the uh, uh, right project. I'm going to do exactly the same So the so the one we you were working is the one where code ready workspace is is creating the workspace pod So we're working on a pod contained containers You are working in a maven pod there and that is the pod that the code ready workspace is using So it contains the code ready workspace is agent connecting to the code ready workspace is master So this is the working project for the ide The strategy to deploy the workspace can be many so you can deploy the workspace in One single project within the platform So all the developer workspace would be in just one project or they can it can be in a specific user project It depends on now you configure the custom resource when you start code ready workspaces Okay, so now i'm in the right project So now i provision the database which is okay, which is awesome. So now what i'm going to do is just use this uh information here here To define a list of key value And all the key value that i'm going to use here. It's uh, basically to map my database url So the driver that i'm going to use of course the user the password Uh, so here is some definition that i'm not going to use and then we are going to enable that part Just after the end, you know when i'm going to push it into open sheath, but just for the tests the local tests. So inside my Inside my Workspace so i don't need all of them if you if you point to the jdbc url this one specific if you can Talk about this. This is the service. No, yes So basically it's uh, i'm going to connect in using jdbc Uh using the postgres so driver and then here i'm going to specify the uh, the services The date the service the database services that they're just creating here So the name of my services is inventory database So i mentioned here inventory database dot So from my project wine inventory Sorry wine inventory And i'm going to specify here just i'm using the services which is the host name directly from the service discovery Inside open shift. So this is quite uh interesting because if you are not Um inside open shift, so i'm developed outside open shift into my laptop I will have to create some routes for example Or to use some load balancer or to open some not port in order to access to my database outside open shift But because it's i'm inside open shift. I will be able just to use Uh, Evan as a developer uh, all the, uh Kubernetes api and Kubernetes, uh features Which is great. So this is this I'm got the port of the database and the name of my database And everything that i've got is here. So it's defined here So what i'm going to do? I have a double check from This part with starting everything. So just Which is uh the label here My great project here. So this one we can just Just are you relying on quay for anything right now? on quay Yeah, quay. Did io appears to be down at the moment? Uh, no, okay. This is the bootstrap. No, it's a Very nice Follow-up next step Because if you enable the tecton pipeline plugin and code ready You can have also a tecton pipeline which can also be launched in the platform and this can Push the image to quay io. So if the container is secure Then you're gonna deploy the app on the project. Otherwise you you you won't deploy this So you have three level of security the worst-case security you test locally the unit test are local Then you have the pipeline security And after that there is the final the project Security so you do image promotion across environment through projects. So you can have a a completely Developer journey starting from the ide and as you should say we can have the integration with quay io public quay io To to scan automatically this image and ensure that we are not pushing Image with vulnerabilities Right. Yeah, there's the the A couple a couple things to unpack there, right? Like there's everything being um Or in the open shift a cluster itself amazing, right? Like that gives developers quite a bit of capability to Do a lot of things in a safe way To that includes standing up databases and testing out service connections and everything else But then to take all of that and then package it up Into an image so that other people can consume it or deploy it or whatever um And putting it on quay gives you a second layer of protection in the sense that Everything is scanned on quay using uh claire. So claire is an open source project For security scanning images. That is a default feature for all quay accounts, right? Like your image will be scanned Routinely and it will notify quay will notify you of issues If it's not having issues which quay currently is um, so the the beautiful part about all this is that Even if somehow this gets through your entire pipeline and there's some Vulnerable library or some vulnerable piece Uh or layer in that image quay is going to find it for you and you can put that in your you know Private dev or and it's going to find it immediately Upon scanning that so that you can get a better idea of what's going on inside your infrastructure at all times from a security perspective and that gives a lot of You know operations people like myself and former, you know, or infos like people, you know, I used to do that too as well um A lot of comfort in the sense that you know the code that's being rounding from our repository has been checked over and over and over It's consistently also The static code analysis with sonar or tool like that. So you can mix multiple A source of verification. So yeah, and you can bake it all in. Yeah Yeah Yes, sorry for that. So I think my copy past. It's uh Lazy, but I have a lot of things to do because basically what I've got here. It's some illegal characters The worst bug This is the worst bug that I can have so what we can do in the meantime, maybe not only you can start from doing the The content I can never fix that. Let's drop the react up. Yeah So I would just stop sharing my screen here Oh copy pasting from notes Yes, copy and pasting code from notes is brave Yes, but it should work. It usually works. Yeah, but uh, you know, yes, the copy past is not just the best one But I feel good. So there not only I put it on hosts Change posts. Okay share screen and you should have that Voila, you should see my screen now. Yep Okay, so the Intelligestion front on the react application took took a while at the end it finished and As you see it is suggested me how to start this application Uh, I create I created the I would swap this application the front end directory Now he's suggesting that I can start the application for local testing With npm start I can build the application for production. This means that react will pack and build all the starting content that I would That would be served by the node application So I can do those tasks We we can start we can we can test it. So this is the skeleton created by the mpx command I have a an example application that I can also task So if I if I do here if I go inside and I can do the npm start Of the application. This is going to call all the plug in or the script for react So like the corpus one it will start the development development mode and as madu was saying For javascript. It was really easy to modify and test things even if we here this is a um A react application. No, so it means some transcoding on file I can modify the code while and verify the code while while i'm working And this is of course the same open shift route that we were talking about So I can see here in the embedded terminal. I can see in a route I can see so this is this one. This will be the route that will be used in my workspace Maybe I can also pass in the chat So Yeah, this is the route in my workspace So, uh, what I can do now is bootstrapping my application. So I have this skeleton Uh, I have two choice. Let's let's say i'm a new developer for the red wine software and my boss Okay, this is your stask your internship starts now Go to the manual and start Doing this front end. So I can consult the official documentation on react on how to Create things like a component A component class is similar concept of java class So you have an object that you can manage and and show in your Static content in your html files Or I can work on a previous project. Let's say chris Did another project and I can have it on visual studio if you see here. This is visual studio code. It's really It's the same basically it's the same look and feel and you see uh of visual studio So so you if you are visual studio code user, it's really easy to switch to code ready world spaces and let's say i'm starting from An application similar application that was managing people and not wine for instance But I want to make my wine component So in order to start doing this what I have to do is I can start I can stop the execution of that and I can start analyzing my code here For instance, this is a node application. No, so it's an express application and I have these yellow words here function that I I don't need anymore. So I can change this and When uh, when I do my react application Actually, uh, I will create these I will build the static content with this command that you see here the npm run build So if I do the same thing and I do npm npm run build This is going to invoke react script for building the application And this will create my building My build directory containing javascript to css because if we look at the React application, I have some css For the application. I have some uh the main entry of this class That in in our case is that the was that application that's having content And I have all the other components in this directory here. I have this new directory, which is build This build directory contains all my code ready to be executed from a browser So I have the json. I have the html file. I have some javascript This will be auto generated. So we need to um To connect this to node and you know when we want to deploy to open ship Our first thing we want to do here is uh create a new component So let's say we have to we want to The goal is to query madhouse api about wine. So I can create a wine component here It's going to be this wine javascript file and I should create a component like In following the documentation. So the main component I see here is a class extending the react main component With a render function the render will basically print the html with some uh dynamic content like this from react Um, I can render basically in many ways, but let's say we start from the example for the people, no So what we can do instead of making people We we can create a wine a wine library So I let's say I was starting from this uh from this Class people and I created my wine class here So I I can just copy like Like I did before You know that we don't lose time This is my wine component And I have to do some some change here Um, so the the important thing is that I have a react Uh component important. I'm defining my class Then I in this component did mount. I will do something like fetching an api This api is going to be the url that madhu will give me So in this case, it's something that has been pre prepared, but this will change the events of madhu work on the api and basically I will map all the fields that I have from uh from the from the api and then create An image gallery here if you see I'm using this gallery So I'm using some css content another thing that I can copy from the previous example in let's say my In my visual studio is the css that I need So I have this css here like div gallery div over it's something because we want to do some e-commerce So we want to make this appealing I'm gonna append this on the main css file Saving the content. So now we have the css I have the wine class What I have to change here is the my main entry So I don't need for instance any logo. I can remove this I can remove all this. I don't need to to create any Any sample image I just need to create To display this wine component For instance, if we look at the example that we have here We have just to define this wine component because it's some component we created inside the react application So I can remove all the static content that I had like before I can create this So if everything is fine here if I put everything fine I will have the capability to test it out. So I created some Um Some wine component that quitting some api for the moment. It's it's quitting this api here But let's say If we want to simulate a real use case scenario Let's say we don't want to display the image and we will do for later on so If we want to see that everything is fine at least for testing We can run again the npm the npm start And if everything is fine, we will have the content on the browser if there is any error We can investigate from the output From the console So let's see this. Okay. We have some error We we forgot some divs and we're gone. So we have you see we have also the syntax check Uh, I I put an additional div entry that I didn't need it So, uh, it's not defined. This means I I forgot to import wine. So I need to import this wine class So I need to import wine If I remember good, it's from a component. Let me check the component. Yeah from wine. Yes from local This is a Relative part of the class so this is My wine list now it's empty because I don't have any Anything to show because this api content is not existing But at least I have my react application responding with some Custom component here. So what I can do is like madhu did so I'm testing locally locally. It works That's pretty fine. Now I need to build it I can do Since there isn't any react integration Yet I I can do this manually. So basically I will run again the npm npm Run build command again So this will generate again my build directory and I can tell to the node executor To to express which is the modulus for the web Serving the web content to look at this directory in order to Deploy my react application in open sheet. So now I have this build directory here This is my main entry for the application, which is the app.js. I can copy that content from the front end to to here Okay, let's check it out. Yeah, I have this build directory and now what I can do is instruct express to use this This static content. So There is also some auto completion here for something But I can check the documentation in order to do it or in my case as new developer I can see the other application how we did So basically I can use the starting content from the From the local folder. So I can use this function here, which is app use express static build So this this will use the build directory in order to create the application in open shift I'm almost done to deploy what I need to change yet Is another file, which is the package json So I have the here this package json, which is the the main application And then I have a package json in this main Level here. Let me let me get it. Okay now So this is the main entry for another application in order to deploy to open shift I need to tell to the container, which is the main entry. So I can copy this I can copy this from the root folder So this is the The package json here And I can start modifying it because I'm not working in the In the app app, but I'm working directly in this directory So I can tell to do node app js So I'm telling to open shift do this why I'm doing this I could also rely on the on this upper one But react When it's bootstrap, it creates lots lots of content of dependency If I just want my let's say production builds I I can do these things like Filtering the directory that I want to expose and tell to open shift and the node runner, which Which is the main entry that I want to start. So let's cross check that everything is fine as we did in the other working example We have a package json here Yes, we can we can just write app json. So he knows to work on On the current folder Now everything should be ready to to start with the first Deploy in open shift. So like madhu did I have everything here that I can pack and send to open shift I have to I can log in to open shift because at the moment I'm logged in with a service account from code ready for spaces So what I can do is Log in again in open shift and I can do with this command here I can use that token. So I don't need to put username and password. No, I have you I'm using GitHub integration I can use the token that open shift gives gives me from from the console And I can retrieve it from here if I do this copy login command and login with the github integration again I can copy this api token, which is my better token. I can use For logging in in open shift again I can provide this and I'm logged in as The github user. In fact, I can see my project that I was looking Also before I can I can create a new project. So madhu did the rewind inventory. I do the rewind react for instance As project and in the project I can start Interactive with the platform. So this is basically A ui wrapper for the auto command line for open shift I can do everything from command line because there is the if you remember we enabled the The open shift connector plugin, but it's beautiful to to do it from Directly from from the ui. So I can create a new application The application name would be Rewind for instance frontend So I can here I have to tell to open shift Okay, start from a git repository. I didn't have any yet We have to create it on our git repo and push it binary file Madhu can do the binary file because he generated the jar file the snapshot I don't have any binary file what I can tell. Okay, go to Go to some some folder here And I can tell to go to the node js folder app folder So this app folder if you remember contains package json app js, which is the node main entry for the express application and In the build directory This will pack my application I can give the component name Here, so I am going to call it As we say And I I have to pick my favorite runtime node js in my case 12 version So now I'm ready to push this in open shift I can I can look I can see it from from the ui. So I'm a developer I'm going to the new created project, which is a rewind reactor So when I come back here, I can push if you see this is not pushed It means that I need to do auto push to push it to the platform When I do this, I can do the push command And what I can do also is reviewing that everything. It's fine with the With the specification Open shift is is using Auto auto plugin to create the component So I can I can see what it does. Basically It created this config file here And I see that it's using the correct node js application the correct version But it's using a wrong service So I will need them to to redeploy the component again because the real port for for the for for node js It's the 3000 So I can do this later Let's see if in the topology I have my node application. What I need to change is just the service So I can do I can re-trigger the The push I can do auto push again It should be able to retrieve the configuration change now It should be able to change the service that would that we serve on the port 3000 And not the port 8080 because the the plugin automatically Did like that when this Configuration is finished. I can create a new URL the URL is an open shift route that would be available in my In my application. So let's wait that this is finished Let's go back to the topology view And we can check if the service has been corrected in the networking service Not really it's still the same Maybe we can help although fixing it with a change in the port Because if you don't instruct the component, which port to use it's gonna pick random default one So I will use this. Okay. Now the port is correct This means that we can create our URL So URL means create an open shift route. So rewind route I can push again this change. So the route will be pushed into Then the project Now I should have my application With some URL if we check if everything is fine We should be able to reach it. Let let me check if everything is fine Not yet Okay, we need to investigate. So four three thousand Locks Let's check the locks a lot Oh, there is an error missing script start Okay, I'm missing. So the container is basically crashing all the time Uh, because I'm missing some uh some script In the in the package. So I can come back and investigate what I what I'm missing here It can be some definition in the build directory or in the package I can check If I have everything here, let me check also in the I think it's also yes the package isn't that you need the script Yeah, I know that yeah, I forgot I forgot to do this. So the application is crashing I can fix it very very fast. So I can go here and I can run a start script here Maybe I can reduce this And I can do like I have in a visual studio So the previous developer write Package start Upchase Okay, I guess there will be some comma here. Yes Everything is fine. So now We can redo the same thing. So basically we can re-trigger the change to the to the component So we can do push from the dashboard push from here. We can do auto push again It will build the component again So it will copy the package JSON And then we should be able to see our application run when this will be finished We will have the new application deployed here So this would be hopefully working It's really look like the other really look like and make me think about the git push for example So you have all the configuration of your bit repository into the folder So the total and then you just have to re-push that In order to let's say push the code into into open shift. Which is right. Which is great Right So if you see I was able to push the code like madhu did I'm working in my project, you know, I'm not sharing this with madhu In order to have this front end working. I need madhu to give me the url where to connect with But this is was cool to to to show that I could test locally I could build and I can deploy with integration open shift connector But basically will it's a wrapper for auto the developer cli Similar to open shift cli, but strict to developer use cases. So create push is like a madhu said It's like a git push so What I need now it's Demo madhu to to take action and give me the the url Yes, in the y. Yes, it's it's always back in it. Yeah. Yes. Yeah. No. Yes, because it's more complex than just Yeah I mean, it's normal here. We have a database We can create a repo so our manager criss can review the first uh, awful code and then give some Some vote on our Ship it the investors are hungry Yeah We can do front end or back end have some Front end gonna be private view our credential. Uh, yes And we can create the back end So here we have the structure to initialize all the thing that we need that's going to copy because we use it later And we can create the new repository as a back end Sorry More What is Okay Yeah, okay So i i'm gonna pass to you the control madhu so you can share your your screen Yes Screen share swap Perfect so Here here we have so we we was We was at the stage to my copy paste and I got some uh illegal characters But I have increased I see inside the code. So now everything gets mixed just to remember what I've done So basically I've created one entity In which I'm going to collect the data from the database to that entity, which is the wine entity with Wine ID the name and the origin with getter and setter And then I defined another so I changed the path of Dory wine back end And I add one resources which is wines in order to get all the information from the database sorted by by origin So from there here, so what I've done I redo my aquacus there environment And now what I have I open it so everything is fine There and what I'm going to do Here, which is uh, the name is Oops rewind rewind so back ends But I got the hello priest. How are you? Just to see that. Yes Do you like wine? I I definitely need some Everybody is blind today So it's working fine. And then I'm going to add at the end my wines in order to get some data So from here, as you can see, you try to get some data I got some error to saying that just into my database my database is empty and I don't have any data inside this database Uh, so what's no wine? Not yet Not yet So what I'm going to do I'm going to access very quickly because my manager is thirsty So I'm going to access very quickly to my pod To go to the terminal from the terminal because it's uh And just keep in mind this is the actual terminal that like you can like postgres commands happen in right like This is the terminal in the pod. Yes. So the database Exactly. So I'm inside the the database as you mentioned here I'm going to add to my database So I have nothing there. So what I'm going to do I'm going to now not use the impact but using the gs as an analyst Did which working fine. So I'm create my table. So right now I'm going to access it And it's going to say that oh, you should be adjacent things and there is nothing because it's completely empty And now I'm going to add my favorite one. And as you can see Chris, we add just one wine from usa Because that makes perfect sense. I mean, but this one wine from usa Yeah, I I appreciate the shout-out, but like there's there's a handful of usa wines. I would actually drink I'm sure I'm sure my co-worker christian would give me a whole list of them as he's a big wine fan. But yeah, I There's like three. I think that I enjoy Which one which one so like I like the sweeter stuff. Um, but there's Like if you like I'm such a bad wine drinker that like I don't even know the brands half the time I just know what the bottle looks like if that makes sense, right? So, yeah, like I had a great, uh, re-sling It's like a short little stocky bottle with an orange wrapper kind of thing Oh, cool. Uh, love good Oh, actually this past uh weekend I had a rosé for the first time we made those You know, that's kind of fun ice strawberries and sparkling rosé wine. That's all it takes. That's pretty good. Yeah So, yeah, you know, I'm not a huge wine drinker, but yeah, that's I like I like the sweeter stuff if that makes sense Yeah, yeah There are very nice sweet wine Uh Maybe more white wine or yes, definitely definitely on the wider area than the then read but you know, I mean, you know I like Good wine if that makes sense, right? Like if a wine is good, I will appreciate it But I'm not going to go out and like pursue bottles to collect or anything Okay, but now you you are now I own this business I know nothing to line now I must sell it I have good advisors we'll just assume that for the sake of the call Fantastic advisors in line I have a question. He's somewhere Yeah Oh, I still have one little issue somewhere That I forgot and of course what I'm going to do. Of course, I'm going to cheat into a working example because I should miss one thing into my code What will be I think it's on the palm dot XML And of course, it's a real time one and is this one that is missing So I just use the wrong The wrong a class in order to change my list into Jebus into Jason entry So what I got here is this one that is not good So I'm going just to push it here as you can see automatically So a quarkis is going to rebuild Because I'm changing the library that I need and you need to take the library Install it etc. So it's going to Take it here. So now it's okay. And now it should work Yes, brilliant Cool Fantastic Indeed So yes So now what we are going to do. So now we need to uh, so what I'm going to do I'm going to push that component so into open shift and doing exactly the same path that That Natalie did So one things and two things that I'm going to enable so the first one I'm going to enable the uber jar. So in order to adjust one jar with all the dependencies Especially everything that we have in the in the lib directory of quarkis And the other one I'm going to enable to use a core filter Because of course, so natalia is going to use my api inside Not a reactive application and we need to enable that features From your security result to be sure it will be able to to access to it So now that I did that so everything is fine It should be okay. The first thing that I'm going to do I'm going to go into the terminal to my rewind inventory from the rewind I'm going to Do package and of course what I'm going to add it. It's really it's made by let's say professional So don't try to use it at home basically to skip tests So of course never do that Yeah, no we do some tests etc, but uh, yes for the sake of time Exactly just for the sake of time because yes, usually of course I made all the tests the unit tests as tests several times before to build anything so Of course, so in the meantime what I'm going to do I'm going to to connect Myself also to to open sheet using the open sheet connector So I'm going to Retreat that I'm using the token. I'm connecting to The cluster from the token. I'm going to get the token from mad a github sso Which is there? Here here and I'm connecting to my token Which is great, which is okay. So as you can see I retrieve my rewind inventory here And from the rewind inventory what I'm going to do So it's still not So it's still downloading things So I don't know why why I don't know if it's the demo effect Or Is actually yeah, it looks Very frozen at the moment weird Wonder if And there's something Terminal, let me try if it's not from my browser I'm just refreshed the browser. Also sometime you help. Yeah The the idea of a browser constantly updating a thing that maintains the state on the back end is still Hard right like that doesn't just because we put already workspaces together Doesn't make the back end stuff any easier. It just gives it a path There you go In the meantime for sake of time so new components that I'm going to add Which is the application so rewind Then I'm going to use the binary file On the binary file, I'm going to use this one So I'm just going to wait to get the binary file I'd be far too pushing that because if I push it so I have something in dev But it's not what I would like to have I really would like to have the latest version of that And I don't know I mean we could go dive to have access to the console. Let me go dive into the pod and see what we can find Ah Network connection closed. Yes, I'm weird, but that's an internal thing Yes Live debugging It's from the proxy. Let's check the maven one so nothing of the maven uh container Okay So maven is waiting for something. Yes, clearly Because I'm quite sure that the maven everything it's okay No Okay, okay, so what we're going to do I'm just going to uh moving to another uh back end In which I've already built my application So from the application what I'm going to do from this one So once again, I'm going to connecting because I changed my workspace. So I'm in another environment From this other environment, I'm going to uh Connect using the token. So now I'm connecting there Which is uh, okay, what I'm going to show you here. It's that's inside targets Uh, I have my uh back end up and running which is this one So now let's do again to add a new component. I'm going to add uh, so So an application rewind from rewind a binary From the binary I'm going to add Uh This here so from project I'm going to take here from the project from the project. I have to do everything So I'm going to take this one from project rewind back end Uh here And I'm going to uh create the component which is is going to be Here I'm selecting the mine is not not just it's a java and from java 11 And I'll repeat it to configure So one thing that I need to do it's just from here And here what I need to change it's just so the url that I have here because it's something completely different That I'm going to use So I'm going to use let's try with the rewind inventory in the To read from here databases And from here it's not why it's what I call inventory and inventory inventory inventory So let me try to Remember To package from this one back ends My package My newsd Uh, let's be just like this one here Because I would like to use The profile, uh pod Yes Remind weird Okay Let me type everything the bits also might copy past Let me speak Wow That's weird that the copy pasted and work. There's only one command Yes, but it's from that part So it's the first time that I use because usually I'm used my vscode But what I thought it's that I'm not going to use vscode to be passed into vscode Right. No, I'm going to do something different. But uh, yes, sometimes you just need to Use the basic Believe in the native text for yes Don't trust the osx. Well, I mean trust osx to be pretty You know, like it's gonna give you pretty stuff first not code stuff first. Okay, so this workplace is working fine. And now Uh, uh, it's working fine. Oh, yes, because I just That's that's why the binary folder So this here I'm going to take the project At folder which is project three At folder Project Why because I already got an there Just a programming note we got about 14 minutes left Yeah Yes, yes, rewind binary. We need to have that add a new context We choose project backends add it here components inventory Java java 11 And here, okay, and then what I'm going to do from here and go back Into my topology from the topology. I'm going to push it So it's going to do exactly the same thing with although So now we see that there is an inventory which is going to be here up and running Where's the pod coming from internally The pod which but sorry the the application pod that's from the binary that you built internally, right? Yes Yeah, yes, it's a binary and I push the binary directly into a java jdk about Which is there and then so he's waiting to start. I don't know why everything is slow right now It's slow because you had to say something to make it move. Yes Just have to speak and it's like so everything should be fine should be okay. I'm going to add the next terminal out So and this is amazing to me that just all this stuff is just right click there Right click there right click there type in what you need and it's now off you go What port do you want to run on common ports are selected for you the whole nine yards So now you should have like a good url for people to see the cemetery. Yes I hope so So now I don't have the route There so I'm going to push it here So he's pushed he's going to throw out here and I click there and Oh Yeah, oh, yeah, the inventory should be working. I just need to change because I've changed into my codes Not this one this one it's this back end Not this one back end one. So it's here ah I got this I Can slash wines Yes Which is there And then I need to share it This with natale the front end. Give me give me this url. Yeah the data. Yes So here I don't know No, no, no It's just that I don't know why There's gone bad for me and for you everything is fine, but it's called the demo gods. It's called the demo gods They're frowning on you right now. They're not full on like mad at you. They're just frowning. Yeah, that's all So, uh, basically that's I'm going to stop sharing. I'm going to share Give uh the host Okay, natale make it happen Make it Did you did you do in https, you know for course stuff, you don't remember He did enable course. I don't remember I enable course, but it should work. I have an http just write in the parallel. I will change it No, I the http doesn't work I can share the screen on the screen. Yeah I will add the http there So I put the this route here If you can see my screen So component amount fetch this url here So this is the route on the workspace and I don't see anything But we can investigate in the browser Yeah, yeah, it's been locked the content must be served of https. Yeah, yeah just You can add the https natale Okay, and in Just some seconds. So what I'm going to do is just to add one parameters uh into the route Uh, because I'm not going to Here here here I'm going to add a parameter to the route which is uh, basically so tls with the terminalism as edge And to insecure edge the terminalism policy to redirect So just few lines that I'm going to add to my route Okay, okay. Yes, we can try it That's fine Yes, uh, here we go. Yes Wonderful, wonderful. That's awesome Let's let's try it out. It's fantastic Get refresh. Look at all that wine. Wow. Look at this wonderful. Ah beautiful Beautiful selection here Yeah, so now we we have tested locally, uh, and I can push this uh to my project So this that would be actually pushed in an open ship and this is going to be our interaction Frontend back end developer working in our workspace working in our project then a pipeline a tecton pipeline Can build in the same project all the projects together. We can also um Create the the environment from the dev file like what was uh, what was sharing before So let's do this quickly. So you don't have that much time. So we Do everything again So we have say that We are open shift here and we can do again auto push And this is gonna find a new change Actually, I'm wrong because I forget to to do The the build so I am in my react application. I need to build again npm round build And so this is going to create the new starting content I can copy the starting content to the start to the build folder again and I can Doing auto push to re-trigger again The deployment and open shift these things that i'm doing manually can be automated with a run task here I just need to write this on the dev file or configure task here So it's a very up to us to do these things all automatically. So i'm gonna go here app and I'm gonna go to Build so I can copy In the frontend build Build Copy everything that you find here in here So now I should have the new content here That's great. Let's cross check And content the the time it's so you can see it. So it should be fine. Yes Okay, so I have the new content and I can run again the auto push auto push Already the final notch. Oh, maybe I because I stopped at the previous one Let me re-trigger again We go to the topology This is has been I don't know if this is The last version we get so let's check you out The history to exist here. No, no, no, this is uh, no the It's uh He didn't push the right one. So I can maybe re-trigger the push from here the new task I say no change detected Maybe maybe try to force Try to do another push minus f just Yeah, just force it. Yeah, seriously Yeah building again There you go. That's going to be done. Yeah, that's I hope it would be Yeah, I hope so. So from the UI there isn't any way yet Uh, okay, so let's check if this is gonna be updated You're listening perfect. Let's check it out Oh cannot get Cannot get So here everything was fine what we changed was just uh, you didn't touch this Uh, we didn't touch this one really The field directory is the only one that has been newly generated Perhaps this is you know Something we follow up on is how to package up these environments as a run out of time here Yeah, yeah, yeah, absolutely Something yeah, we can follow after because we are running out of time actually the content looks Oh Let me check so the field directory is empty. That's why that's a good reason Yeah, let's let's try to fix very very very quickly if possible Build uh Okay We can cross check here So From here so another push here Uh, sorry from here No change, okay Use the force plan force. Yeah force again So let let's in the meantime, maybe let's wrap up very quickly because so what we experiment so basically it's really what developer is going to pay some And everything that we've got so every let's say problem That we that that we have so far it's really related to the code itself And not really about the interaction that we're going to have with the clouds Which means that of course the work of the developer is not going to change Uh a lot you just have to deal with the same problem Even if you're working basically locally, but as you can see here So every interaction that we made with open shift Uh to try to new database to get these databases and so on as you can see it's going very very smooth on that Yeah, there is not a big change And of course you also need to you also need to know a bit about OpenShift so basically I mean it's working so as a user so In the latest version of open shift 4 we have this beautiful Uh developer view who simplified a lot of things and it's really really focused for developer And it's really nice with all the topology things the bubble appears to be able to also investigate because it's also let's say the exercise that we That you have seen during this uh this switch the fact that yes, we have a bug We need to looking for what comes from the bug etc etc So it's so yes all this experience that we've got uh with open shift And I really hope in the late the the last minute So Natalie would be able to to fix everything to be able to add Yeah, I was looking even if it was some course You just hear out. Yeah, the cure out. Yeah Yeah, uh, so yeah cool It was I had to create a secure route Um Because you cannot access the secure application from an unsecure connection. Yes. Yes So this is something that we need to care about when we do these things in general And as you see from from the idea was also able to push the code Uh, so we are we are running out of time. So uh, but we uh, this is an example that we are working too separate project maybe Madhu can start here pushing some uh for requests uh online I can do the same on on on on its own and both together We can use this depth clicking here. This is gonna start factory If we are allowed to more, uh, for instance, I'm not allowed to more to create more than two workspace here But if we are allowed to create more than two workspace Madhu can click here or I can click here and I can do the same thing So I will have the same code ready workspace environment Inside my project. So we have two way to bootstrap the things we can bootstrap from the source code We've open shifted deployment or we can create a dev file here and that file will create this factory And factory will create basically the same structure that that we have here Mostly the same with everything in on top. We can download the code So all the work we we made manually Run task configuration Repository can be done automatically for the new developer if there is a new micro services developer A new backend developer can start from the Code ready workspace is dev file. So all the things would be automatic for him Awesome well with that. Thank you very much Madhu Natali This has been a wonderful deep dive despite the demo gods not smiling upon us completely Into how to go from literally nothing to a full blown application, which is some, you know, some wine bottles and a little bit of code So thank you so much for joining us. We are going to do a hot swap here We're going to switch from this stream over to an open shift commons briefing with termelo security So madhu natali. Thank you so much for joining us today Where can people find you on twitter or instagram or facebook or linkedin? Where do you want people to reach out to you if they have questions? Yes, um twitter or linkedin for me Twitter twitter fine Awesome. Okay. So with that, thank you very much gentlemen for joining thank you all And have a wonderful afternoon evening and day Where yes, thank you for the invitation. Thank you for joining. Bye. Bye