 Okay today, we're going to be taking websites and turning them into web apps Why am I doing the tutorial on this because I recently watched a video on YouTube where somebody was doing this using a program called natifier? I think Which is fine. Maybe that program has some features, but to do this you don't need a special application In fact, you just need to create a text file But let's go ahead and look at a few options here on how to do this and what it will result in Also, normally I use i3 window manager today I just quickly a few minutes ago installed XFCE because I think floating windows will display this a little bit better So I don't really have my desktop set up and none of my keyboard shortcuts work up and my terminal doesn't even have Borders on it because I usually do them full screen. So just bear with me if I fumble around a little bit Anyway here on my desktop, I can right-click and I can say create URL link great I can type in a name. I can type in films by Chris I can give it a comment if I want but I'll give it a URL HTTPS Films by Chris calm and we give it a icon from a list of icons that are already installed my system Or if I have a PNG or something on my desk on my computer somewhere I can choose that I'll just grab a trophy here because yay award-winning website. Maybe I don't know never won any awards anyway Create and there we go. We have an icon on the desktop It says films by Chris, but when I click on it, it doesn't really open like an app Right, it's gonna open up whatever my default web browser is with the full address bar and tabs and everything That's not what we want. We want to look like a native application So how can we do this? Well, I use Brave browser feel free to comment below on why I shouldn't be using Brave browser And what browser I should be using because everyone has an opinion and they want to voice it So go ahead and do that below. Well, I continue the tutorial what I'm gonna show you here We'll work with basically any chromium base browser chromium chrome as far as I know chromium chrome Edge browser, I'm assuming brave. Let's go ahead and have a look So on my system brave browser is called brave browser, and then I can give it a URL like HTTPS Films by Chris calm and if I run that it's gonna do basically what happened last time, right? We don't want that we can close this close all What I can do is instead of just giving the URL. I'm gonna go dash dash app equals and the URL Now it opens it up Like a native application. We don't have the address bar and you know all my buttons work And it's just running using braves. So it's all the JavaScript and everything should work and go about and go software I can go support I can click my little button here and it scrolls back up I do still have an issue because I have it where certain tabs open up in a new Certain links open up in a new tab or window and they will still open up in a separate window But that's just how my website's designed not necessarily what we're doing here So that's great. We can do that So how do we go about sharing that and other options like that? So first of all, let's go I'm in my desktop folder here if I list out. I've got one folder here It's a or one file. It's called a desktop file and this is how Linux creates Links, you know your icons and stuff on your desktop and you can you most file browsers You can go into and see these and click on them and it will run the applications or whatever you have it set up To and unlike other operating systems. It's not just a binary blob. It's a plain easy to use Text file that can actually have a lot of features in it. Let's go ahead and just vim into this file right now And see what it looks like. It's a desktop entry Version one this particular type is a link Name films like Chris you can have a comment. I think that's for when you're hovering over it. I maybe I'm not sure I'm not even sure icon again I'm using a one that's built into the system or installed on my system So I can just give the name of it otherwise I can get a full path to an image and then the URL So how do we change this to be like the application? Well, there's actually a few options And I'll go into another one if I don't forget by the end of the video But right now let's go ahead and change this type to whoops application and Then down here Instead of URL. I'm gonna say exe c and hopefully I type everything right brave-brow sir dash-app Equals and this URL here and if I did everything right, this is updated and click it and it now opens up Just like we wanted before so that's great. We manually created that Let's see if I was to go into my projects folder. I actually have a script in here Let me just run it. It's called FB FB K films by Chris app I Run that and it creates an icon on my desktop that I can click that will open up in brave browser as an application here so Let's see What my script does it's actually very very simple so FB K I could have used a icon installed on a system Basically, I create variables here for the name that I want it to display Where I want it to be and this is just so I can change out this script quickly for other applications if I want I have where I want the icon to go. I'm just hiding it as a hidden image in my home folder I'm gonna display installing wherever the app name is to desktop and then here I am downloading the icon that I want to be shown on the desktop If I didn't want to download it, I could always you again use a system Image that's on the system an icon from the themes that we have But I could also I could also have converted this image to a base 64 Variable and then decoded that which is fine Just would have made this script look a lot be a lot bigger and look a lot bigger And then right here I just echo out all that information for the desktop file and then I'm pretty sure you have to make it execute Well, otherwise when you click on it on the desktop will ask do you want to execute this? So that's it. So let's go ahead and change this. I'll just make it go to my scripts folder I'll save that by default the script is designed to just override the last one so I can do an update boom It's now update. I can click that and now instead of going to my home page. It goes to my scripts directory Great. So what's another option if you? Didn't want to write out a script. How can you generate one of these without going in and editing the file? Well, if you're in a chrome-based browser a chromium-based browser Whether it be again brave chromium chrome and you're at a page You can go down here on the menu and you can choose where is it more tools and then over here we can create a shortcut and When you create a shortcut it asks for the name But then here you have a button here a little checkbox here You can say open as window if you do that it's going to open up Similar to a native app now It does give you a few more things up here. It shows you the plug-in So it's a little different in the way it displays, but it's still similar to what we had before The in my opinion the biggest drawback to this is if we go and it should have grabbed the default icon The fav icon. I don't know why it didn't at that point if I kill that if I go back into my Desktop directory and I edit well, let's list out the files here Oops list out the files. You'll see one here. It says brave and blah blah blah blah default desktop And I can cut that out and you can see it's a desktop file It adds an open xdg link at the top so it actually can run like a script or a desktop file Which is interesting. I guess or I don't know. I don't know why that's at the top there But you'll notice it has my url in there Nowhere and that's something that I hate about modern web browsers on desktop and especially on mobile Because if you want to add a link to your to a web page on your mobile device You kind of have to do it this way and what it's doing here is it's saying use your brave browser and look for an app ID of this long string here, right? which is Configured inside your particular browser. So if I sent this to somebody else, it's not gonna work for them It's it's because it's looking basically in the database for mice on my system for that and it's it's super annoying I have had myself and I know many people on their phones will create links using I've done it with brave browser I've done it with Chrome browser Where you create links to websites and then when you do a system update They all disappear because they're all linked or on the windows machine I have at work the IT guys create a whole bunch of links to stuff on the On on our desktops none of them work anymore. They created them a couple years ago The browsers have been updated and at some point that information has been lost instead of just having the urls in there They have these stupid long IDs and it tries to run them that way instead of just putting the url in there So we have like 10 icons on our desktops on all the machines at work That those links don't work anymore you click and they open brave browser, but they don't go to any url They're supposed to they just go to the home screen. So I don't really advise this if you're gonna be obviously if you're going to be Trying to share this file with other people because it's not gonna work for them But I guess if you're just trying to create a link for yourself that's gonna open up like that That's a quick way to do it. I highly recommend just making your own file much like mine FBK desktop file here. Let's clear the screen and run that again again it's just a couple of lines and It's super simple and no matter what machine as long as they have brave browser Of course, if they don't have brave browser, they you're gonna have to put in whatever browser They have that's the biggest drawback, but in the install script You can have a check for what browsers they have and apply it to that again all chromium-based browsers that I know of Allow this app option. I Quickly tried it with Firefox before before recording this the app option like this does not work But I'm sure it probably has functionality like this I know browsers used to have a kiosk option, which is kind of like this, but would make everything full screen So I'm sure Firefox has something similar so you can write in your script check for Firefox check for brave browser Check for chromium check for chrome or you can check whatever the default browser is and from that list Go accordingly You can also set it to open up with the default browser and as long as it's chromium-based this should work Which probably be a shorter way of doing it, but then if they're using Firefox, it's not gonna work So there are drawbacks to this And then of course you can always have your script install the dependency browser that you want Anyway, this is not something I do normally But I like I said I saw a YouTube video on someone using third-party applications to create some of this Which was looked a lot more complicated like it created all these files and folders From what I saw in the video where all you need is a text file like this Anyway, I hope you found that useful I'm gonna get out of XFC here and get rid of these floating windows I can't stand to my tiling window manager of I3 and I'm gonna have a great day. So I hope you have a great day patreon.com forward slash mail X1000 as well as other links in the description if you want to support me I thank you for watching and as always I hope that you have a great day