 Hello everyone welcome on board. I am Mohit Suman. I work as a senior software engineer at Red Hat I work in the developer tools team and We create different toolings for different IDs like BS code, IntelliJ and Eclipse To enhance the developer experience upon hybrid cloud infrastructure and For the same we have this demo where we are going to showcase you OpenShift connector and VS code extension. So let's go ahead We have OpenShift connector, which is basically a VS code ID extension That works on top of it and allows you to work with different applications component with respect to the OpenShift instance which is running So to give a brief overview of it The basic idea is to provide the developers all the features which are available on an ID Leverage it and try to create deploy and even debug those applications and components directly from your ID itself and Get it up and running on the OpenShift cluster. So for this demo the basic architecture is Shown in the slide as we have OpenShift connector, which is a VS code extension and That under the hood runs OpenShift do Which is also known as Odo which is a CLI tool that Does all the calls to the OpenShift cluster and we also use OpenShift CLI and Then we have Red Hat code ready containers, which basically allows us to run a local instance of OpenShift 4.2 So these are the basic components which I will be showcasing in the demo going forward So let's go to the Marketplace where this extension is basically available. So if you have a VS code instance running You can download this extension directly in your VS code ID if you press install it is will install onto your VS code ID This extension is supported by Red Hat and it's currently has approximately more than 9000 installs and It supports all the three platforms Windows Linux and macOS For this demo, I will be focusing on macOS. So let's go ahead and get started with the demo So here I have my latest VS code installed and if I go to this activity bar on the left hand side if you see the extensions if you go ahead and Say what are the extensions which are installed? You can see I have already OpenShift connector which is been installed here and this is the icon which refers to that So now if you see it has started So there are different actions which are available right now. So this basically allows you to log into the different cluster This is to allow you to switch between different contexts based on your kube configuration file For example if your kube config has different entries of different OCP running you can directly switch context from here You need not switch go to the terminal switch context in a kube config and If you have any issues running with this extension, you can directly raise issue on github directly from here So now you can see the application is starting So while this is happening I will go ahead and Discuss that what type of OpenShift in clusters which we can run over this extension So for this demo we are targeting to run OpenShift 4.2 instance locally on your system and for that we have code ready containers If you go to its cloud.redhat page you can see different options which are available You can run OpenShift on AWS. You can run OpenShift on Azure on Google cloud and even directly on your laptop All these options whether it is locally or remote are supported by this extension We'll go ahead and discuss more on detail with Red Hat code ready containers So if you go to the github page of Red Hat code ready containers is basically you can see it It's a local OpenShift 4.x cluster which will be running on your macOS and to download it Go to this link. It will lead you to mirror.openShift and Once we go there We have different instances which are running but before that we have to Download certain requirements for that That can be a pulse secret that will be a binary bundle and Other details which are already documented properly. So you have to log in with your developer.redhat credentials go there download the latest bit So for macOS, this is the download bit and once that is downloaded and once we start running the code ready containers It will also ask us to provide the pulse secret So we'll also have this pulse secret downloaded and kept for later use So I'll go ahead and discuss that how you can run code ready containers directly on your Laptop and then start with how we can leverage that with OpenShift connector. So as previously you saw We have the download available on mirror.openShift and we have already downloaded that bundle for mac and for the demo purpose I have already extracted it. So here it is Let's go ahead and see What's the version of OpenShift it is running? So the CRC version is 1.0.0 and for OpenShift it is 4.2.0 Which is the latest one? Now let's go ahead and start CRC This will basically Check all the required necessary like the OC binaries the hyperkit drivers and all other permissions And after that it will start the VM for OpenShift 4.2.0 It takes approximately around five to six minutes for the cluster to be up Once the cluster is up and we have the credentials ready We will connect this with the OpenShift extension The cluster is up and running and we have the username, QBadmin and the specific password for it And we'll use the same credentials to connect with OpenShift connector So now as code ready container is up and running locally and we have our OpenShift 4.2 instance up Let's go ahead and connect to that. So I love into that cluster So there are different ways where I can connect to the cluster That I can use username password using the credentials way or I can also log into the cluster using the Token we can get the token directly from the OpenShift console We can once we copy that token from there and you go ahead and select the token here that will you automatically be tested But for this demo, we'll showcase how we can log in using the credentials I'll go ahead and there and I'll provide the URL which I need to connect So right now the URL which I selected was the local CRC URL But if you want to connect to a remote instance, so The URL which is present for that remote OpenShift instance needs to provide it there And once that is there, we need to provide the username and password from which what we want to log in into So QBadmin is the username and the password is already stored here We go ahead and say login We wait for few seconds for it to log into the cluster once the login is successful This view will be updated with the projects list present on that cluster So you can see we have successfully logged into this cluster and The explorer will be refreshed automatically here and now you can see the list of projects which are available into that cluster So now when we go to the Cluster we can see different actions which are available. We can directly open the console For the cluster we can create a new project inside that we can also list down different components which are available different services which are available We need to log out from this cluster if we need to see what type what's the version of the cluster which is running and Even if you want to check out the different commands which are running the different logs and different outputs We can directly check the show output channel from here and that will be Opened so for example if I do so output channel You can see the different commands which have been executed here can be seen and the labeling is done as open shift So we can toggle between different labels and once whenever you want to come back and see what is there in the output channel We just have to select the open shift one and that will be listed here So let's go ahead and create a project for right now. I've already created a project known as demo CRC So a project will have three actions one will be to create a component the other one is to create a service and One will be how if you want to delete that project So for this demo The idea is to create two components one will be a frontend component using node.js The other one will be a backend component using Java and We link those two components together to create a wide-west game So you can see you can create a component You can debug a component and you can directly deploy everything from the this extension itself and everything will be up and running Now to access those components This extension also provides an option to create different routes. You can create multiple routes for a component You can go ahead and add storage to that components and Whenever everything is added you just need to post that Those changes to the component and once it is post that will be deployed onto the cluster directly from the ID itself So let's go ahead and create one component So right now Once we select new component it will ask in which application we want to create a component and if there are Applications already present inside a project. It will list them down if there is no application present in a Project it will ask us to create one So for this there is no application present So I'll just create one more application application one two three and now there are three different ways where we can create a component The first way is if we have a component already present as a good repository And we just want to use that get repository to create a new component We use the first method if there is a binary file such as dot var file Which we can use directly to create a component So we have an option to create a company using binary file and the last one is we can create a component directly from a folder Which is present in our workspace So for this demo, I will be using the git repository and the workspace directory one the front end component will be created using git repository and back end component will be crazy created using a local workspace directory So the functionality change which has happened with this extension with respect to the previous versions is that Right now whenever we create a new component whether be it by git repository or a workspace directory or a binary file Every component should reside in a local context folder So what that context folder is actually So whatever changes we make in for a component be it creating a new route be it Adding any storage or any other configuration changes are being mapped into that local config folder Which will reside inside your context folder which you have selected So the advantage of this context folder is if we want to share this Configuration say to a different developer or use the same configuration on a different machine We need not perform this entire steps once again We can just directly copy that configuration file from or share that configuration file and if Whatever entries which are there in that configuration file will automatically be update in your open shift application explorer view Let's go ahead and create a front end application based on Node.js and we'll be using the git repository. So we select this now as soon as we selected a git repository it asks us to select a context folder and It will also list down whatever folders which are present in your workspace If you want to select any workspace folder as a context folder We can select that if you want to create a separate context folder Which is not present in a workspace and we want to add that we go ahead and say add new context folder Once we do that it will pop up our dialog box Basically, and it will ask us to create a new folder. So this we say demo dash Wild West dash front end and we say create And then we say add this folder to the component in workspace. So once we do this the workspace will Restart and this context folder will be added to your workspace So once we do that and then it asks us to provide the url which we want to use as a component So this is the git repository which we have And we go ahead and provide that and then it will This also validates whether the git repository is correct or not If there is any incorrect git repository it provides an error and it does not lead to the next step So once it has verified that it's a correct git repository. It's a valid git repository It provides you to select which branch we need to select to create a component So this extension provides you a flexibility to select different branches to create a component For instance, if we want to have a separate tag or a separate branch just to experiment and see if that component works You can create that as a branch Go to this extension and select that branch as the branch which you want to create a component So for this we'll just just select master branch Once that branch is selected It will ask us to provide the name of the component So the name of the component is front end and then we go ahead and we select the type of the component So as I mentioned this is a node js component So this will basically this Will basically list down the different type of components which are available for the cluster So you can see there are different list which is available and we just go ahead and say node js And then after selecting the type of the component we have to select which version of that Type we need to select so there can be different types of the version Which one select do we want to select the latest version of node js or we want to select a specific version of node js We have to provide here. So for the demo, we'll just go ahead and select the latest one And once we do that the extension prompts us whether we want to clone that grid repository So for this we say no, but if any developer wants to have that grid repository also clone, they can go ahead and say yes So now you can see this component has been successfully created So once the component is successfully created it it resides in the local configuration So nothing as of now is pushed on your cluster So if we want to push anything to the cluster, we have to push that component So there is an action which we have to push So now the component Will reside in three different stages one of them is not post which the current current status is The other one will be the post status once we do a successful push of the component That component will change its status from not post to post And the third one is no context So this is basically for that type of components which do not have any specific context folder present in your workspace So if there are components, we do not have any context folder present And if you connect to a open shift instance and in this view that will be shown as no context So these are the three different stages where the components can reside So now let's go ahead and create a new URL for that So this URL will be basically the route from where we can access this component So we go ahead and create a new URL It will ask us to provide the URL name. So I'll say URL front And that's it The extension will notify the progress that the URL is getting created So once the URL gets created The tree will be automatically updated with the name of the URL present here And there will be an action here where which basically allows us to directly open this URL in your browser So now as we have the URL also created and the component are present there So let's go ahead and do a push of this component. So once we select push action to it Basically what happens is this component gets pushed to the open shift instance, which is running And in the VS code view, you can see the streaming of the logs which has happened In the terminal view will be automatically opened and you can see what at what stage the component currently is So all those actions which happen Will be shown directly here So this extension under the hood uses open shift do Which is basically a CLI tool to interact with the open shift clusters So we'll wait for a few minutes for the component to be Deployed on to the cluster So the main advantage here is you need not switch between different terminals or editors To push a component you create a component here You provide the route here and you directly push the component to the cluster The component to the cluster and a single click action is provided This basically enhances the developer experience And even the inner loop experience that everything can be done directly from your ID So now after the component has been successfully post the state of the component changes from Not post to post and there are more actions which are available to that component So after this you can add a storage You can describe a component you can Check the logs directly and you can even follow the logs whatever actions which have been performed You can link a component to a different component You can link a component to a different service If there are components which are linked you can unlink that component You can directly open this component as the route has been created You can open this directly from this into the browser If there are certain changes which have been made and you want to again post that component to the cluster you can push it You can even boss those changes while they have been pushed If this component is present on the cluster but you want to undefloy it And after undefloy the component will basically be in the not post state And it will still reside in the local configuration And the last one is the delete option where you can directly delete that component Once the component is deleted The resources associated with it like the URLs and the storage If created will also be deleted So now let's go ahead and create another component Which would be the backend component using Java So I'll go to this application Because I want that component to reside in the same application So I'll go ahead and say new component And this time I'll select the workspace directly I'll create a component from my local workspace So as I want to create from a local workspace This list prompts me that okay this is already present in my workspace So I go ahead and select this Now the name of the component will be backend And the type of the component will be Java And we say Java And we select the version of the component We'll select the latest one And the extension will basically show you the progress that the component is getting created So once this component gets created It resides in the local configuration And if we want to Deploy this component under the cluster We have to follow the same procedure We go ahead and push that component Before that let's go ahead and create a URL for that Backend component which we have So we'll name this as URL back Okay and we'll say So now if the component has different ports available to be exposed The extension will prompt us to select which port we want that route to be exposed to If you have figured out when we were creating the URL from the frontend component There was only one port available So there was no selection as it selected a default port But for this component we have multiple options For the port to be exposed So we will select the first one And once that is selected The progress shows that currently the URL is being created And now as soon as the URL gets created the tree gets updated So if you see the backend component is currently in the not posted So let's go ahead and post this component We've been successfully posted to the component And the component is basically deployed onto the cluster And the state of the component is also changed to the post So as the URL is also created Let's go ahead and see what's the status of the route which has been created So we go ahead and open that in browser So you can see this is the entire route which has been created The name of the route, the name of the application And the name of the project So this is where the backend component is hosted You can see a simple API is created using REST And we will connect this API to the frontend application And we will link those two components and see how that goes So let's move to VS Code again So now go to this frontend component And we intend to do link component So as we have only one other component Apart from this frontend component So we select that backend component And then it asks us which port do we want to link to So now as the route of the backend component was on 8080 So we select that port And the progress shows that the component is being linked Meanwhile, let's go to the workspace folder And if you can see here, right now I have two components Based on that two components I have two context folder present here So this demo wildness frontend Is the context folder for the frontend component And you can see there's a .udo file Folder which has a config.yaml And if you open this config.yaml file This basically contains the local configuration entry Which basically mentions what is the name of the URL What is port it has been exposed to What's the name of the project What's the name of the application What is the source type So we use git to create this component And what was the git URL which was there And what type of component it was What type of what version of the component type it was So all this configuration are mentioned in this file And as I mentioned previously We can share this configuration file Across developers across teams So that the configuration can be reused And in the same way in the backend component Which was created using a workspace directory We go to this .udo folder which is present there And then we just select config.yaml file And it basically will mention That the source type is local workspace These were the ports which were available And this was the port which we used And what was the name and what was the project present So now we have linked our frontend component And the backend component And you can see the frontend component has this fancy UI And in the backend component Basically the idea is to hit some Kubernetes resources And display MSA that what type of Kubernetes resources they have hit So simple UI And a simple demonstration that how you can link multiple components Now as we have already seen How different components are linked together The different functionality of this OpenShift connector Is it allows us to even Work with the different Kubernetes and OpenShift resources Directly from the ID itself For example, if we need to work with the build configs Or the deployment configs or the ports which are running We did not directly every time go to the console dashboard And work there It can be done directly from the VS code itself So if you can see here There's a Kubernetes extension here Which is added as a dependency with OpenShift connectors So once we go to this Kubernetes explorer This basically lists the cluster's view Depending upon whatever entries Which are present in our cube config It will list them down Beta Kubernetes instance or an OpenShift instance So right now if you can see This is the default project Listed for my local OpenShift instance Which is running using code ready containers And this is the username which I have logged in into So I'll just go ahead and see And if you can even see The OpenShift resources are being labeled with different icons So that it can be pretty quickly differentiated And these are some of the different resources Which are present in the different namespace The nodes, the workloads and templates and the projects So in the project list if we go ahead and see So these are the list of the projects Which are present in our OpenShift local instance And currently if you see This project is selected Now as the default one is selected I want to select this demo CRC So I can just go ahead and Select the action use project And once we select this use project Whatever resources which are present Will be updated based on this project So I go ahead and do use project And the notification will be mentioned That we have changed the namespace to the demo CRC And the view will be automatically refreshed This basically helps us to Manage and monitor all these Kubernetes resources Which are present on our cluster This can become very handy When we want to directly start a build Pause a build, resume a build We can even open that specific build into the dashboard We can even open specific deployment config Exactly into dashboard So as you can see This is selected as my current project And if I go ahead and see I can directly open this project in my console Let's move to the workload section And in the workload section If you go ahead and select the pods So you can see There were two components which were deployed One is the front end one One is the back end one And what are the different pods Which are up and running into that cluster That information is shown And once you click on any of them You can get specific information You can debug that You can port forward that You can describe You can follow logs You can show logs directly inside your editor itself Now if I want to see What are the different image streams which are present I can see Okay, there are two components up there And there are two different image streams present And I can open the specific one directly into the console I did not go to the console And search for that specific image stream Whatever image stream I want to open I can directly open from my extension itself The same goes for the deployment configs And the build configs So for the deployment config If you go ahead and see If the back end component We can see the specific log We can directly delete that resource And we can even describe this deployment config We can open this into the console And the same for the build configs also So now if you see There is a specific action related to the build configs You can also start a specific build from For that specific resource And even open that into the console So some of the actions which are specific to our resource Can also be enhanced here If we are using this extension For example, if I go ahead in this back end component And I try to open it in console It will open this into my browser And it will specifically open this back end app One, two, three deployment configs Now as this URL has been opened It will ask us to log in with the credentials So I'll just select QBadmin And I'll go to my Code ready container instance Where I'll just fetch the password And I'll copy from here And go to the sullen And I'll log into it So now you see The deployment config page is loaded And we can see the different Deployment configs present The back end, front end and all the actions present there And you can perform any specific action If you want to do directly from the console Or you can just go back to the VS Code And perform all those operations So this is the advantage which we provide With respect to the Kubernetes extension Which is added as a dependency with OpenShift connector So this is it And this was a quick demo We are looking for more feedback from the community And we are available on the Gitter channel And our code is on GitHub So if there is any feedback or any comments Do let us know And all the required information Related to starting up the cluster Downloading code ready containers And what are the actions available on for the extension Is mentioned in the readme So thank you for your time And have a good day