create a javascript node app shortcut in macOS monterey shortcuts

hello guys welcome to another tutorial today is gonna be different so apple has finally released mac os monterey and today i'm not gonna be talking about the whole mac os operating system but i'm gonna be digging a little bit into shortcuts now what i'm gonna do and show you today is how can we make our own shortcut to um initiate a node application just by doing some shell scripting into the shortcut app and well you're about to see right now so this is the shortcut i have made i'm gonna put it in the menu bar and now let me move this away again and check this out init a node app boom that's the server and now it's creating the app alone see how this is going and now it's open the vs code for me and if we go into the app.js it created all of those stuff which i have written um in shell scripting and if we check um the server node app app is listening to port 3000 and just to clarify this let's open a new window and go to localhost and here we go status server is up and running so if you feel like this is pretty cool like how i felt i actually really love this please follow along in this tutorial make sure you hit the like button and the subscribe button that would really mean a lot to me and just without further ado let's just get into it so first of all what i need to do is um open the shortcut app and the shortcut app as you can see we have here all the shortcuts which is the shortcuts i have added into um into my shortcuts i can also like how how i showed you here in the menu bar we can add whatever shortcuts we want just by dragging and dropping it like that into the menu bar and you can use them straight away from here i've also um rename files shortcut stop distractions and split screen two apps which can split um the vs code on google chrome for me and if i hit the play button right now so as you can see it just do the same stuff and um yeah that was a bit slow because it also opened this focus mode for me so i'm going to quit this and that yeah and let's do our first shortcuts shall we so um sorry about that that may be uh been too fast a little bit so we have the plus sign here let's just hit the plus sign and now if we go into scripting and all the way to the volume a little bit up we'll have run shell script and we also have run javascript for mac automation which is pretty cool i haven't used it yet just for simple stuff but we have made all of what i've showed you before in the one shell script so let's drag and drop it here now you need to know a basic shield scripting in order to do that if you are familiar with linux i think this is going to be pretty easy for you i know all the stuff just from using my terminal on mac and just by digging online so echo hello world um it's just gonna print uh hello world which is gonna do absolutely nothing but let me show you what we are basically doing so if i open my normal terminal here okay now if i do cd desktop i'm into my desktop right now if i do make there which is shortcut for make directory it's a built-in command and i do um moody for example well it created moody and if i want to do a file if i want to create a file i can use the touch command so touch app.js now i have app.js and if i want to combine the both combine them both for example if we do cd and then moody and we'll have to do touch app.js now we have app.js inside moody by the way i can just navigate into commands up and down i'm really sorry if you're already familiar with this stuff but i felt like i need to cover this in order to just for you to follow along so let's just delete those commands uh one last thing we can use the and to just combine some commands for example if we do um let's just do cd dot dot because we are still inside moody and there is no moody so now we are into desktop if we do mector and now moody i can chain an ant command and do cd moody so now i'm inside moody and change another and and do touch app.js if i hit enter moody file doesn't exist yeah sure so mechder moody and cd moody and touch app what the hell file exists ls what is happening here um ls operation not permitted why is that let's just go back cd cd desktop ctrl l clear all of this now let's do this again because the command was pretty good make their moody and cd moody alright so that's pretty much it um well obviously it just was stuck we're stuck because we were inside moody or whatever but right now we can see moody and we have created app inside already so let's delete it and click the terminal and we're gonna do this stuff in here so imagine we are inside the terminal what we are going to do so you can you can obviously just pick wherever you want but i'm just going to pick desktop for now so cd into desktop and we're going to chain let's say make there and let's call it server and let's cd into server and let's um so now we are into server now we're going to do npm init dash dash y so it can just say yes in everything and in p in it y it can initiate it will initiate a pack json file in order for our node application so after we have created that let's hit the and change another command and npm i express so we can obviously install a bunch of other stuff we will not need it but just for um just so i can show you i can demonstrate let's say besides express i'm gonna install um the node mode package and now and so we're inside the server let's touch create file name it app dot js and and now let's write into the app into the app file so it's going to be a little bit missy because it's not text editor it's not going to show us stuff but remember you are going to do this one more time so if you want to just initiate a node application pretty fast with a single click and you already know all of these commands and you have practiced creating a node application a bunch of times so i mean i mean maybe you will need this so i'll need this so anyway now we need to use the um echo command in order to write into a file so let me show you something if we do echo and just some text and then close it and just do i i have no idea how they call this side oh sorry bigger than bigger than maybe anyway and just write the file name which is app.js now you need the extension if you do this app it's going to create another app so now if everything we made so far correct it's gonna um open the desktop which is obviously we're not gonna see this and it's gonna create a directory name server go into server do an install of the package json which is our initiate a package.json file and it's going to install an express and the nodemone package and it's going to create the file name app.js and inside the app gs is going to create just it's going to write just some text now let's hit play shall we play as you can see this is a server let's just hit into it now keep watching because it's still green here which means it's still processing the the script and now it's done now if we do if we open this code dot we're going to be implementing code dot in the script as well but let's go into app.js you can see just some text and if we go to the package.json as you can see here is the node mode and the express that we installed now what we are going to do um well you can actually just write the stuff you want here and copy them but because you can just copy like lines like these you need to actually use um backslash in in order to just go a new line so let's delete this and i'm going to show you now so we are here now what we want to print inside the app.js well first of all we're going to do const express equal require express in order to uh require the x-rays now we need to do backslash in which is newline now and then const um so const http so we have to install this but it's already there it comes with the express so cons http require and then http and same thing backslash in and now const app equal to express all right and um backslash n let me just put um um just put commas here and um here as well now we have the app which is equal to express now let's create the let's make the app accept json so const no actually app.use and then express.json let's close this backslash n now const port equal to 3000 or process dot uh environment in the port and um backslash and again now const server equal to http dot create server method which is inside the http module and now we give it the app because you want to create server for the app now backslash and and let's um let's listen to the server so server dot listing which is gonna accept the port not poor port and now we're gonna do um a narrow function here so let me just close the main function here so an error function just so we can print something so console log and uh let's just do server is listening to port and port as an argument oh my god so and i i guess this is pretty much it now after we have created all of this after we have wrote all of this into the app let's just chain another and and just do code dot i could have done also node app but i want to see in the vs code integrated terminal the message that we are about to get so anyway we have nothing here uh let's just hit play and as you can see green processing the script now check this out it's creating the files i'm not doing anything opens the vs code alone script is done if we go check the app this is the app and if we go and start to check the app let's see if we have some errors or not so node app we have no errors wow and oh so i'm not gonna get anything because i have no an app yet so it's gonna just just like give me no wrap at all uh yeah i have put port 300 which is there is no such thing so it can work but i meant 3 000 and this is pretty much it we can obviously like um do this as well in the script just so we can but like um well let me i've started it so let me just finish it so um rick andreas and rest.json and just let's say status for example up and running anyway so let's um start it this again and now if we hit the um yeah status up and running so obviously you're not going to be writing your whole node application into scripting or whatever but this can save a lot of time and also it can be really fun and i just felt like i need to share this with you like there is i think like there is kind of no limitation to the stuff that you can do with shortcuts i'm still exploring this myself so please feel free to ask any questions drop a comment if you feel like i have missed something or if if you have discovered um yourself something cool that it might be helpful to the community uh i need to just explore the what i can do with the running javascript for mac automation so you can also as well here just add some stuff in javascript so as you can see run javascript automation uh with the shell script result and this is pure javascript and there is many many many stuff more but i feel this is pretty much cool so you can just save this like i did and put it in your menu bar just if you want to start um any new project so you can simply just in it node app or just call siri hey siri in it the node application i don't know if someone will do this but and it's pretty much gonna generate a node application for you with the packages and everything you need and you can start coding so that's pretty much it thank you so much if you have made this far till the end um i really appreciate your time and have a great magical day everyone see ya

Channel: Moody Codes

Views: 168

Keywords: mac shortcuts, mac keyboard shortcuts, best mac shortcuts, keyboard shortcuts, macos monterey, shorcuts monterey, macos shortcuts monterey, mac monterey, macos monterey javascript shortcuts, macos tips, macos new monterey, macos javascript monterey, shortcuts app, mac shortcuts app, monterey shortcuts app

Id: LTNiUPwba_w

Length: 15min 41sec (941 seconds)

Published: Fri Oct 29 2021