Create a Desktop App Using only PHP! - NativePHP + Laravel + Livewire

hey what's up guys in this video today I want to make a desktop application to execute and keep track of command line processes I'm going to do the whole thing using PHP so let's get [Music] started cool so to build this project I'm going to be using larl Live Wire and Native PHP laral is going to be the framework Live Wire is going to be the way that we interact with the front end um and it's a cool tool if you don't want to use JavaScript and um I'm going to package the whole thing into a deskt application using this tool called native PHP so it's going to be pretty fun let's just get started and create a larel project so to do that we use composer and we use the create project um setting cool and I'm going to use preferred dist here and we're going to get it from the larel package and I'm going to call this project uh process Runner once that's done I'm going to CD into that project I'm going to open it in vs code then the first thing I want to do is change the database from MySQL to SQL light and then we can get rid of these EnV variables and let's just test that it works by going um PHP artism serve and then we can go to our local host and it looks awesome cool so the first thing we want to do is create a process model and process table so I'm just going to kill the server and then make a model and a Migration by going PHP artison uh make model I'm going to call it process and I also want the migration let's go to that process migration and Okay cool so we have an ID that's cool we also want to keep track of the name of the process so let's make another field here got string name and then I also want to keep track of what the process should run so I'm going to call that command then when a process executes I want to keep track of its process ID so I can kill it and I'm going to make that an integer field and call that P ID for process ID and then I also want to keep track of the output of each process and to do that I'm going to be keeping a file so when the process executes all this output would be sent to a file and I want to just keep track of that file's location here so output file cool once that's done actually for that I want to make sure that these fields are nullable because when we initially create a process these won't be populated so once that's done let's uh migrate those so PHP migrate and we don't have a database yet so let's make one and cool now we can create a process I'm going to go to that process model and then I don't want this has Factory CU we're not going to be using it I want to create a function fun to execute this process so let's make a function here and I'm going to call it execute and this function is basically going to run run the command so let's call it execute and we're going to pass exec a command to run and that command will be the command that we've given the process so like if we go this command dot um we want to Echo all its output to an output file so let's attach an output file and then we want this process to run in the background and also Echo out its process IID so to do that we'll just um concatenate um it to and one and then we also want to Echo out the process [Applause] ID cool and we'll pass through this command to exec and then we also need to create this output file so to do that I'm just going to so I'm going to camel case it and then I'm going to generate like a random string ID so string use this string U ID can get it there we go and I'm going to import the string class from illuminate cool and and this should work so just so you know what this does if I open up the terminal and it's like Ping google.com and then well I can Echo out Pro like s to a file here I'm just going to call this art file. text and then I want this to continue running when I close and also Echo out standard and um error output to this file so standard and error output and then continue running and then also Echo out the process ID so Echo dollar one so now this is the process ID and that was what was returned from executing this and now I can see there it should be an output file and here it's populating uh with the output from that command and now I can kill that process going 1 15 505 and it terminated our ping command cool so let's also just delete this file and we want to capture that output here after running exec so let's call this out and now we can get that process ID from this out variable cuz exec basically um updates this output variable when this command executes so let's update our model with what just happened so you can go this and then the process ID is equal to out the first variable there and then the output file is going to be that output file that we just created here then we want to save this model and now we have a way to execute a process so let's actually create a process so to do that I'm going to open up Tinker and then I'm going to go API models process this won't work because we need to enable mass assignments for our process so to do that let's update protected guarded fields and then just set that to a blank array so that we can create a process here with mass assignment and then go back to Tinker and then copy this and we want to create one and I'm going to call this uh ping Google so the name of the process would be called ping Google and the command will be basically what we just ran now which is uh ping [Applause] google.com and process not found and that's because it's not API models it's app models cool we've created a process now should be able to execute that process so if we go let's find that process so p is equal to um let's go process first I have to just qualify the name space so it will be app models process first and now we can execute this here execute cool and and now we should see ah you know what it's going to do it's going to create a file in our base directory but I don't want to store this file here it's working um but I actually want to store this file inside our storage path so let's go here and let's just use our storage path cool and then let's see um what the process ID of this model is it's 151 043 so we should just be able to kill this process [Applause] cool and I think the process actually finished and we can check that here if we go back to this file it should have some output yep it finished so let's delete this file we don't need it anymore but let's make a way that we can actually just kill the process using um our model so I'm going to make another function called kill and if there's no process ID I'm just going to return because there's nothing to kill then basically to kill a process we can just go exit and it's just going to be this kill command um with the process ID cool and we have an issue here and it's cuz I didn't close that off now we should be able to execute and kill a process let's try that we'll go back to Tinker let's find this process let's execute it then we should see a file created in storage so if we go app where is it uh storage yep we have this file it's executing and then if we run [Applause] kill it should stop yep it's stopped cool so what I also want to do is create a way for us to like clear that file that gets created um and I actually also want to clear that file when we execute the function because otherwise we're just going to have a build up of files so I'm going to make a function here called um delete output [Applause] file delete output and it's going to check if there's an output file so if this. output file and I also want to make sure that that exists then we want to delete it and to delete a file in PHP you run unlink and then the file name and then after this is run I want to set the upper file to and then save this [Applause] model and actually also just realized with kill we're not actually retaking we're not getting rid of this P ID so I actually also want to set we can run this we can actually run update update and we'll set the P ID is n because there's no more process we've killed it cool um so I actually think before we execute a function we also want to delete its output so we can go to this delete output and I also actually want to create a way to check if a process is running because I don't want to be able to delete output while the process is running so let's make a function and call it is [Music] running so the first thing I want to do here is check like if there is no process ID just return false we'll assume it's not running because even if it is like there's no way to even kill it so if there's no process ID it's not running if there is a process ID we want to uh basically use there's um clear this if we go ping google.com and then we Echo out the process ID so we get this process ID let's copy it and then in another terminal we can go PSP and proess put that process ID and then we can see that it's returning the Ping command if we go back here and kill this command and go back here it's still running um let's just kill the command here if we kill that command and we check if it's running we don't get that line where it say the command that's running so cool we can track if it's running using the command using that um command command line also so we can go exit and we'll go um PSP and then the process would be this process [Applause] ID and we want the output to go to out and if out if the count of out is greater than [Applause] one then we know it's running so we return true other will return it's not false it's not running and that's because if we go here back to if we go like PSP and what was that this thing we'll always have this as the output so this will always be in the first element of the array but if we um if we had a process running it would come in the second element of the array cool so now we can detect if a process is running and we can check if this is running then we'll just return because I don't want to kill the delete the file while the process is going on and let's just add a semic curl on here so now we can check we can execute a process we can check if it's running we can delete this output we can kill the process but we can't view the output so I'm going to make another function here called um output and it's going to read the contents of the output file so we're going to first check if there is an output file well if there isn't enough file if there isn't an output file output file then we're just going to return nothing and we need to make this a function so if there's no Alit file just return a blank array otherwise we return the file and what file does is it actually returns um an entire file as um as an array so it splits each line into an element in the array and the file name would be this output file so now if we go to PHP is and Tinker we get that process and then we execute it so you can't pass n to uh unlink and that's because here we're automatically deleting the output and this output H oh that's because this is a I had two underscores should this be a single one so we go exit okay let's go back to PHP and Tinker get that process and I think we should be able to check if it's still running at least is running it's false so if we go check that file we should see the end of the output so this was first one but if we go to this one yep we can see that it ended let's just delete this and try that whole thing again so let's execute this process execut it cool now we should be able to tell if it's running it is running and we should be able to kill [Applause] it and and then we should check if it's running again it's not running um but the file should still be there yep it's still here I think we need a way to just oh and then we can delete the output we have a way to do that and then we can just delete the output well let's view the output by going output oh that doesn't work oh we have to return the contents so now if we reset this should be able to go here get the model and check the output yeah okay we get the output awesome Okay cool so now we have our model and our migrations working what I want to do is create a front end for us to interact with these processes and to do that I'm going to be using Live Wire and live wire is such a cool tool it's um it's a way to make your goey interactive or your front end interactive without having to reach for JavaScript so what happens is um when we click on something it sends a post request to um our server and our server responds with HTML it's such a cool tool let's start off by just installing Live Wire so to do that I'm just going to go to the live wire docs um go here and all we have to do is require Live Wire so I'm going to go to our project and require live wi and while that's working I'm just going to clear up a welcome. blade. PHP file and this is going to be like the main entry point into our web application and you can see that like if we hit the base path we we get uh we return this welcome. blade file so let's just go to that welcome. blade file and clean it up so we don't need these fonts we don't need these Styles I'm going to change the title of this application to process Runner then we don't need this class on our body because we're not using tailwind and let's just get rid of everything inside of here and I'm going to um and I'm going to have to do a few things so if we go to live um we need to once we've required it we just need to add Live Wire scripts and Live Wire Styles so Live Wire scripts goes here Live Wire Styles goes in the head and cool let's make our first Live Wire component so so I'm going to clear this up and um I'm going to make a list of processes so that's just going to be our first basic component so I'm going to run PHP Artis in uh make Live Wire this is how you make a live wire component and I'm going to call it a process list and it's just going to be a list of all the processes that we have so we go to process list and it this works exactly like well very similar to how a controller view relationship Works where we can just return data to the view um using this view function and here we want to return our processes and we're just going to fetch all of our process is from the database cool so let's go back to our welcome by blade file and let's add that live wi component here so live wire and we want to add our process list component here and let's just check that's working by going to that process list. blade file and let's just uncomment this text that they've given us the best athlete wants his opponent at his best that's true so PHP Artis in serve let's go to the browser awesome we rendering our component let's now show a list of processes so I'm going to Loop through all of these processes by using this blade um function so processes as process and then I want to make another live component in here and I'm just going to call it uh process view I think process View and we'll pass through our process as our process and just like react or anything like that you need to pass through a key attribute and the key is just going to be the process ID once that's done let's actually create this component so I'm going to turn the server off create another component chat called process view and clear it up run our server again then um we need to allow this view to take in a process so let's open our process view component and let's just add a process to the top here so make it like a public process and we'll call it process and now we'll have access to that process in our process view so let's open up the process view file or the blade template and let's here we'll just Echo out the process name process name we save this we refresh this we should see our process name awesome we're getting there now let's make a function to execute the process so I'm going to make a button here and I'm just going to give it the text of I'm going to call it run and when we click this and to um to use live wire with a click you just go like that live click and this will call a click function inside of our well it will call a function inside of our view component so I'm going to call it uh execute and it's going to just basically run the execute function that we have on our process so let's go public function execute and here what we'll do is we'll call the execute function on our process so process and we'll execute it cool so to check that this works we we can um open up our storage here got this file here let's delete it we can refresh this see our run function if we run this we'll know our process is running because we have a new file here and it's echoing to the file so now let's make a way that we can kill this process so let's go back to our process list well not this one our process View and we'll make another function here called kill and what this will do is it will kill our process so we'll go back to process view duplicate this and all this will do is call the kill function and I'll process so now if we refresh this we have that kill function if we click kill here um we'll see Yep this is no longer being added to we can delete this file so now we can execute and we can kill a file well we can kill a process let's look at um viewing the output for process so I actually just want to do something here to like indicate that the process is running so that you know we can tell what to do so we can check here if process is running cuz we have that function let's just insert an emoji and that will be a rocket emoji otherwise nothing so now if we run this again we can click run we see it's running we can kill it it starts running um and on like with that I think we should only have kill available if this process is running running so let's do an if here and we'll end if cool so now we should only be able to kill the process if it's running so let's refresh this run cool it's running we can kill it awesome now let's make a way that we can actually just view the output and to do that I want to use Alpine JS it's a super small like it's a very lightweight JavaScript framework and it's perfect for minor interactions in the page like um exactly like what we're going to do now we're going to show output or hide output so let's go to Alpine and to install it it's really easy we just put this script in our hter so we go to welcome up blade we add our scripts here and I just see that I've added livei scripts twice uh let's see why I did that this is supposed to be live wi Styles no big go back to our view and let's make a function to like show our output so I'm going to make a button here I'm going call it show output and when we click this what I'm going to do is I'm going to um refresh a variable which is basically a string of our output in our um in our like process so in our process component so I'm going to call a refresh output function function and it's just going to get the last 10 lines of the file that gets output to so we'll go to our process View and we'll create this function here public function refresh output and what we wanted to do is we wanted to assign to a variable called output and let's make that variable we'll make it at the top here let's make it a string public string output and this will be uh we'll implode and we'll join everything together with um break points and we just want to get the last 10 lines of our output file so we'll go array slice uh what's it this I think it's just output -10 let's just double check that let's open the process yeah it's just output cool so now if we go back to our process Runner ref refresh doesn't work and it's because we have an error on process view line 26 let's see this doesn't work um let's go to line 26 and we need to put a semicolon go back here refresh show output doesn't do anything because we don't have any output if we run and we show output we should see something we haven't actually echoed anything out on the page so let's go back to our process View and let's just add like pre- tags here and this will just show what's in our output and we need to use these exclamation marks because we want to render the HTML out so call this output save this and now yep that works and it's updating and we kill it we still have output to show so what I want to do is change this where it toggles between show and hide and well yeah let's do that first so now we have Alpine installed if we go back to the Alpine docs we can scroll down here they actually have a way this exact example that we want this basically toggle contents so X data open I'm going to copy this put it at the top here oops make sure I copy it cool and when we um we only want to show these contents when this open flag is set so let's make a div div here and we'll add this so X show if open is set to true when you click outside open is set to false and when we click show output we want to basically set um this open is set to true so open will be true here and that should work we not run anything show output hide output doesn't work and why is that because we have click outside here so we just want to unclick refresh show output hide output cool that's working let's also just update this text so that um if open is true then and we say hide output otherwise we say show output so we can change the text by going X text and it's going to be if it's open the text will be show output well it would be hide output and otherwise it'll be show output save that and this should work show output hide output cool now let's make this actually refresh while our process is running so I'm going to kill this process what I'm going to do is when this is open then we want to basically pull this refresh output function and that's really easy to do in Live Wire all you have to do is write wire. Poole well wire pole Dov visible so when this element is visible we will run this refresh output function and I think that's it that's run show output and it should show the output we'll hide it no output we can kill our process boom we're getting there guys so what I want to do is actually just add some basic styling cuz right now this looks a little bit junk um and I'm pretty lazy so I don't want to go all Tailwind I'm going to use this library that I found which is basically classless CSS it's called Sakura CSS so let's search for that and and super easy to install all we need to do is use the CDN put it in our welcome that blade file you just put it here at the top save this go back yeah ah and it looks beautiful so now we can run this process show the output the output will display we can hide the output and cool so now the last thing I want to do here is just make a a way that we can add a process so let's go back to our process well to our welcome play file and I want to make a new component here I'm just going to call it process form so live while and let's make that component Live Wire make Live Wire and we'll call this process form and let's open that form and all we need here really is will be two inputs type will be text for both and we want to bind these to attributes inside of our um our process form and we basically want one to reflect the name of the com the process and one to be the command so we'll make two variables here both strings one will be the name and one will be the command and we'll need a function here basically to just store this process once we've entered those fields so we'll make a function here we'll call it store and we'll create this process using the create function so create and we'll pass through the name as our name and the command is the command and we just need to reference these using this and I also just want to validate that these actually have values so to do that we can run this validate and we can pass through some rules on these attributes just us as this syntax so we have a hashtag and then we pass through a rule and we import this rule class from Live Wire and the rule that we want to invoke here is that it's required and we want to do the same for our Command that should be that let's go back to our process form and let's link these inputs up with um these values and to do this really easy we just go to Y model and this will be the name model and this will be the command model and let's give these both placeholders so placeholder will be name and here placeholder will be command let's refresh this and see what we have we need to start our server again cool so let's just add like a plus button [Applause] here let make it an emoji and when we click this we'll basically create a new command let's hook this up to our form so this will be type of submit and we need to wrap this inside of a form and when you click this we need the form to actually call the store function So to that we just go wire think is why submit and we pass through store and this should work let just make some space this should work but I want something to just display those errors that we'll get if these fields are empty um and to do that we're just going to use um this error Handler so if there's an error for name then we'll display that error here and if there is error for comeand then we'll display that error here and then that will just be echoed out in this message variable so do this do this and if we refresh this and try save cool the name field is required the command field is required let pretend it looks nicer than it does let's make another one called ping Microsoft and this will just be ping microsoft.com it'll add it okay so now we just need to make sure that it refreshes the page and it clears the input and to do that what I'm going to do is I'm actually just going to redirect after we submit this form and I'm just going to redirect back to our page so just basically refresh the page redirect and if we let's make a new command it's who should we ping now yahoo.com picking up the scraps ah and I called it ping cool so now we should like be able to Ping Microsoft show the output hide the output kill it's ping Google show the output hide the output kill um I think that's it the next step is to actually just package this into a desktop applic appliation but let's actually before we do that I want to make it look a little bit nicer and I am going to just in the process of view I don't know wrap this in a p it's the easiest way to make give it like a space does this work yeah I don't know you know it doesn't look great but that's fine so now we have that our laral app up and running we can create and run process so now I want to make it a desktop application and to do that I'm going to be using native PHP which is an awesome tool to basically create an electron app out of our PHP application so the first thing we're going to need to do is install native PHP so let's go on to Native PHP go to installation keep in mind that this is in Alpha and is not production ready but I know so pretty cool let's go go back here and let's use composer and install native PHP would you like to start native PHP development server let's say yes and just see what happens cool and we actually get ourselves like a little desktop application which because it's electron we can see our inspector here and we can see that okay cool we don't have a database so let's migrate our database so one thing is is that even though we do have a database we're using that database.sql light native PHP uses a native. sqlite so we need to run migrate again so we can go PHP AR native migrate and now we should have our table so it's created all the tables that we need and now we can go uh PHP artisen native serve and we'll see our desktop app again goes here but we don't have any commands because this is a fresh database so let's just make one we'll go ping Google and we'll ping google.com let's create that let's run it and let's show the output cool and we're pinging Google let's kill this I don't want this to be like an app like that I want it to be a menu application so pretty much all of the the native setup is done in we go native app service provider so here I actually don't want to run the window open um function I want it to be a menu application so a menu by application which I can just click here and run so let's just go to back to Native PHP and let's look at how we can do that menu bar working with the menu bar you see it creates a little app here that we can just use so menu bar create we'll call that let's paste this here and we'll import it from the facades cool and let's see what other options we have uh label root URL cool I want to add an icon so let's just see so let's do this copy paste this put this in here we'll just need to add our menu bar our menu bar icon to the app path in storage so fortunately I have some icons here and I've called them men bar icon and Men bar icon add tox and this is for written the displays so I'm just going to take these and I'm going to put them in storage and app so let's move them here so that'll be our little icon a little spray here and I think it's just like a picture of a terminal yeah you see that beautiful cool let's see what else I think I just want to at this point just change the window size yeah so width and height 800 by 600 it's a bit big uh let's make it 600 by 600 cool so now if we going on I'm not so sure why I'm getting squigglies here why I don't know it's clear let's run PHP native serve we should see our app run in the side here okay you have this it's not showing our icon though for some reason and that's because I didn't change the name of it let's go back here to our menu bar icon and rename this or get rid of the template text save this cool and it changed our icon which is great cool and now we have like a a running desktop application which is so cool the last thing that I want to do is I want to make a hot key and when I press the hotkey this window opens so in order to register the global hotkey we'll need to import the global shortcut class and I think if we go here we just go to Global hotkeys it's exactly what we want to do we want to register shortcut so let's just copy paste this and let's just copy paste the import as well one faades awesome um command or control shift a let's do alt shift C for command so alt plus shift plus C then we need to create an event I'm going to make like an open app event so let's I think we can just use like a normal aable event so we go PHP artisan make event I'm going to call it open app awesome let's go to our open app event and I'm not actually going to broadcast any mes I just want this like I just want this event to fire so let's just get rid of these we don't need this we don't need this not this not this we just really need the Constructor and all I'm going to do here is I wanted to show the menu bar so if we go to menu bar and let's see how we can show the menu bar cool opening the menu bar you may use the menu bar show method to manually open the menu bar that's exactly what I want put this here save and now I should be able to go what do we have alt shift C so alt shift c h let's restart the app maybe cool let's let's press alt shift C and it's not working and I just realize it's because this is not the right event the event is open app so let's save that I saw it restart here uh Al shift C see what's going on here but we're not importing menu bar so let's import menu bar save this alt shift C there we go it opens cool so now we can at any time press Al shift T and we can run a command show the output um kill the output show the output hide the output this app is awesome besides of the fact that we can't delete processes but if you want to you could add that in code for this is in the description below this will oh you know what we can do let's actually build this right now it's just like a a demo project let's actually build this into an applic I'm running on Linux so I'm going to build this as a um as a Debian file so let's go building um PHP this is so easy this is crazy so PHP ERS in Native build Linux and I think what this is going to do is it's just going to give us a dis file um okay cool we've built it it's called laral and I think that's because of the name in our app name so I'm actually going to change this to process [Applause] Runner save it um let's delete this disc file where is it delete this rerun the build just cure this cool yeah I now it's called process Runner once that's done we have this deian file so I'm just going to drag this in my terminal and I'm going to install it um pseudo app [Applause] install once that's done I think we should be able to run person okay we can change this icon but uh look at that we have a new app let's create a ping google.com command here add it run it show the output kill it that's awesome all right guys I hope you guys enjoyed this one uh if you did like this video please like And subscribe um and also check that cool animation that happens now on YouTube when I say like And subscribe so how cool is that cheers guys have a good one bye

How about this? I use NativePHP and Laravel to build a desktop app that can execute and monitor scripts on your desktop. NativePHP is a cool framework that lets you create cross-platform desktop apps with a web-based interface. Livewire is great if you dont want to work with JavaScript. By the end of this video, you will have a badass desktop app that can execute and monitor scripts. You will also have a deeper understanding of how to use NativePHP and Laravel for desktop app development. If you dig this video, please smash that like button, share it with your friends, and subscribe to our channel for more tutorials on web and desktop app development. Thanks for watching! View Project on GitHub: https://github.com/danownsthisspace/process-runner 00:00 Intro 01:00 Setup Laravel + DB + Models 17:00 Add LiveWire 37:00 Add NativePHP