CLASP Web App, Google Apps Script, Parcel JS, Nodemon, Node JS Workflow Setup Tutorial

all right so let's start to create a web app project using clasp and bunch of other nodejs related tools so I'm not gonna cover every little detail about this tools I did cover all of them one by one I know watching the videos about those tools is not fun but that's kind of fundamental about understanding what's happening here so what I'm gonna do I'm gonna basically just go to my Google Drive let's just create some sort of Apps Script project so that we can use it in clasp so I'm gonna go ahead and right click here and go to more Google Apps Script just name this something in here we need to get function that should return some sort of HTML service and we need some sort of HTML file which will be this index file that's pretty much it I'm just basically publish this and we're done we have this we have our dev link which we can open and that should basically get us up and running all right so now that we're done with this let's go to our visual studio code nothing happening here I'm just gonna create a folder on my computer and just drag it over here to get it up and running so that's this folder now the main thing we want to think about when we're dealing with a web app is what's our input gonna be like and what's our output gonna be like now the output should be the way Apps Script wants the output so the output generally is we have some server-side code in this GS files and then we have index.html that has all the HTML and usually we'll put script and CSS as a part of this and sometimes we use like include functions to separate those but I'm not gonna do any of that so that's the output we need some sort of HTML file and we need some sort of JavaScript back-end server file or files so with that in mind let's just go to our visual studio code and first of all let's just create a folder here and this is pretty much where all the output is gonna go so all that HTML and script files that I was talking about I'm gonna create another folder here this should not be inside of this folder just on the same level so this is gonna be where I'm gonna be creating all this server-side code I'm gonna make another folder here and that will be my client folder this is where pretty much all the HTML CSS and that type of stuff is going to go so that's the way I'm gonna structure this and I'm gonna open the terminal so let's just initiate an NPM project so I do the day why to not have to answer all the questions but that basically creates this package.json file we also want to make sure we log into clasp and basically just get everything we need to get but before we do that let's actually go back to our script and do a couple of things here you so what I'm doing here I'm basically just adding a line for every service that I'm planning to use so I can basically just run this and make sure that I give permission to do all these things so I don't have to worry about all the permissions and as long as you put it in here even if it's a comment it will ask for those permissions so if I just go here and run this to get function see that triggered all of those permissions so I'm gonna review this and if you look here it's asking for permission to do Google Drive files and also to connect to external service and that's because of the URL fashion the drive app so any other service I would be using here I would just add right away at least for those that I know so that I don't have to worry about it let's also just set up the time zone and we're going to need the script ID out of here so at this point I'm going to go back to visual studio code and I'm just gonna log into clasp again how to install clasp how to install node.js vs code all of that I've done videos each one takes quite a bit to explain so we are logged in so now we want to clone that project to this Apps Script folder so clone that ID that I just did and root directory is gonna be that Apps Script so that creates this JSON file for our clasp and now if I go to app script you'll see we have the manifest the code file and that index file so for the most part we don't want to be touching this so what I'm gonna do now I'm gonna concentrate now on this client in this client I'm gonna basically add some files also folders so I'll just go ahead and create a j/s folder and I'll also create a CSS folder I'll call it s CSS and I'm gonna move those to be inside of that client c1j s1s CSS inside of that client and inside of that client I'm gonna make an HTML file too you don't want to think like you have to structure everything exactly the same way the main thing here is to understand different parts and depending on what you're trying to do with your project you can set this up the way you like it so nine SJS folder I'm gonna do a JavaScript file and a SAS file in this one and then in my HTML file right here I'm going to just do some main HTML boilerplate and I'm gonna link to that javascript and sass files so that's the folder that's the file name and the script and again the folder and the file name should probably call that correctly let's just put an h1 in there so let's just do some quick things here I'm gonna go to the assess and create some background I don't know some CSS it doesn't matter and then we'll also write some JavaScript in our JavaScript file maybe we'll just change this you something like this so we should now have our index.html we should have this we should have this we should also just install our clasp definitions so the same type of stuff we've done before now we should have hopefully autocomplete available to us now the main thing here is that we need something that will take all of this input that we have this HTML this separate JavaScript this sass file and convert it to one HTML file like this because that's the way that Apps Script wants to deal with this so what we're going to do to do this is use parcel now by default what parcel is going to do it's going to take this HTML and all different Java scripts that you linked in here and all different sass files that you link inside of your sass project and convert it to one HTML one javascript and one CSS file but that's not what we're looking for we're looking for one HTML with all the stuff in it so for that reason we're gonna install this parcel plugin that in lines everything in one file and for that we're gonna run MPM install parcel plugin in liner just like this so now let's try to just run Parcel on this index.html file and see what we have so for the time being I'm just gonna output this to well actually let's just output it to default this directory for now and then we'll change it so for now let's just do this and by the way this index file is not on the main level so we have to go see we are in this client folder and then we have this index.html let me actually add a couple of more flags here and run this as this to see what we get so again to understand what oldest flags do watch my parcel videos I'm not gonna spend time on that here so I'm just gonna run this let's see what we get had to go and grab some more stuff and install it but it seems like we're good now let's look at our distal dur and see what's going on so so far the same thing you would expect from regularly what parcel would do and that's because if I scroll up a little bit see we got an error message here it says that the plug-in failed to initialize this post HTML so it's a dependency that doesn't exist so let's try to install it so let me on that same command build our index file and now check out my index file see it has a style directly in here and if I keep scrolling down it has all the JavaScript injected including all the other partial stuff in the JavaScript injected right here in our HTML file and that's what I was doing so to make sure you don't get confused because some of these files are created before let's just delete this dist folder and rerun this see if I open this dist folder so that's the type of thing that actually app scripts wants from us it basically needs an HTML with old JavaScript and CSS directly in the file and we have it right now so what's also nice about this is that if I go to that client file and let's say we want to now include something like bootstrap here and we're just trying to link to their CDN we're not trying to do our own bootstrap which might be a good idea too but for right now let's do the CDN so that's their CSS that's their JavaScript you probably don't need but I'm just doing this anyways so now with this if I rerun this and go check out the dist index see those external links they stay the same it doesn't convert them to internal links so it's only doing this with all the internal links with doing our project but any of these links you do with HTTP HTTPS that's not going to be converted like this so after this is done I want this index.html to be moved to this Apps scripts folder so we can actually use in our project right so to get that done let's close all of these and let's just create another script file here on our top-level so that's what I'm gonna call this I'm gonna this and first let's require our file system and falses should allow us to do bunch of stuff without files so for example we can copy them so I'm gonna use this synchronous copy method see we can do the path of the source and then the path of the destination and by default destination is overwritten which is fine so our path for our file that we need to copy is going to be I mean this util I'm in this main folder so in that main folder which is the current directory I'm gonna go to that dist folder and from that dist:4 I'm gonna go to index dot HTML file and I want to copy that to again in the current directory I'm gonna go to that app script folder like this now let's run this and see what happens so this file is the one that's called the util dot J s and we can run it using node node util Jas all right so I forgot to do the destination file name let's save this so again app script and then file name we could actually rename the file too but we're not gonna do that so save that let's try it again so see no errors this time let's go check our app script directory if I open this index see now this is that index that was in our district turi so now we have a way to basically just copy the file over from our this directory to our app scripts directory so the final part here is going to be to work on our server files so the server files are going to be oldest server-side files so here let's say we want to create some files in here similar to this code j/s which is probably one of the files we're gonna create anyways so let's do that let me just copy and paste this change this up a little bit so that we know it's different file that should be plenty now we want to make sure all the other server files we create are located in here again so if I make another one now we can use es6 now in our server side so no reason to recompile or anything we basically just need to copy all of these files to this EPS crypt directory and overwrite all the existing files so I'm gonna go back to our util jesting so what we want to do want to basically read this directory and copy all those files to this app scripts directory so for now let me comment this line that copies the other file so we can look at this so let's just console.log this output so you can see what we get here so if I run this file which is that util file now it's gonna run that and see we got basically the list of files in that directory and it's returned as an array so now because it's an array we can loop through that array and we need to just basically copy those files over so those files are coming from that server folder and we need to grab the right file here so let me just change this to backticks and now we can just put some variable here which is the name of the file so that's the file we need to copy from this server folder and that needs to go to this app script folder under the same name so I'm going to do the same thing here we don't need to cause like this so now hopefully if I did this correctly if I've run this we should see that in this app scripts folder we should see all these files from the server folder copied over so that's that node utils dot J's file C is not defined of course it's not okay let's try this again okay so no errors let's go check it out so see there's this ABCD and there's the code and this is the new one C with all those changes so I'm going to close this thing and go back to these utils so this is where this is all happening so we need that to also do this which copies the index file so I'm gonna set some variables for the server and Apps Script oldest directories you now the final thing I'm gonna do here because I to be compatible with any environment I'm going to include the path library here which is one of the modules that's built in in node similar to FS so we don't need to install anything so this path has this thing called resolve and what it's going to accept is basically an array of things that it's gonna use to create a path out of so what that means that instead of doing for example this I can do path resolved and here I can pass an array and basically it needs to be the current directory for this one and a server folder so I'm going to do underscore underscore directory comma and then I'm going to follow that by this server just like this now if this goes well this should accomplish the same thing now to test this let's actually delete one of these files and let's run the same thing okay so it seems like this should not be an array this should be probably a comma separated list so that's done let's go check this out see that went to the right folder so the advantage of using this path result is that this is gonna figure out what is the right way to join all of this on Windows what's the right way to join all of this on Mac and we don't have to worry about this so now I'm gonna use this same technique for some of these other things I'm gonna take all of this and see how I have this current directory server and the name of the file I'm gonna get rid of this whole string thing and just add the F which is the name of the file to that whole thing and I'm gonna do that same over here so again the last one is the file and we need the final directory in this case save this as usual let's test this too I'm gonna delete the file from this directory so we can check and verify if this works I'm gonna run this and you can see that it copied the file over as it should now we need to do the same thing with these two and then we should be done so this one is the app scripts directory which should be similar to this one so let's just copy paste this the only difference is instead of this F we're going to use this HTML file another parentheses here and I need to do that for this test and this one is gonna be the dist directory okay I think that does this so this console.log you could do something like done copying but this is now all set now let's just try to run this to make sure it works with no errors fine so now we have a file that when we run this it copies all the files over it copies the HTML file which is this index it also copies all the server-side files to this Apps Script directory so we got all of that working now the way this is supposed to work let's actually add a semicolon here just to be consistent the way this is gonna work if I go here in client directory and make some changes to this HTML or this Java Script or sass files I won't write after the change to basically just run that parcel command to generate that index file right here and after that I want to copy all the files over to this Apps Script directory and once it's in this Apps scripts directory then we need to push all those files to update in clasp so we need basically three commands to run in sequence so let's just figure out what those commands are so one of those was for example this one so I'm just gonna go to my package JSON file and here I'm just gonna replace this test with this let's just cool it like that so that's the first thing we need to run after this is done running then we need to copy the files and the way we copy the files is by running that node util zjs command so after this is done I'm gonna do mm % and I'm gonna say run this one node utils that's the second command I want to run so let's try this and see what happens so we can run this by using this BLD now command for testing this let me close some of this stuff because too many things open so I'm gonna go to this client we have this file so let's say I've decided I'm gonna make some changes to this JavaScript or CSS or whatever here let's say we're gonna change this to green so once I save this now I need to basically run all of those commands so let's do that npm run and whatever i called it so it seems like i've missed something in this command of course parcel let's do that change this parcel built not just build npm run BLD again so no errors this time so let's go check out what happened in our app script folder so if i go to app script open that index.html see the color is green which is the update i was doing here now we can also run the third command after that to actually push those files to the server on Google server and that's where we do clasp push so I'm gonna go back to that package that JSON and after the second command I'm going to do double ampersand again so after that I'm going to do clasp push so save this so with this now if I go to this client folder I can go here and let's just change something here now if I run that p.m. command that should do all those things and it should push all the files to the server see all those changes are now here so we basically bundled everything so if I just refresh this see this that code J s this is this and this is this with everything in one HTML file now we can go here and do sass stuff right we can go here declare a variable and then use that color in here so now we can use that with all kind of sass functionality in here and then if I run that it's again going to do the thing and push all the files so now if I go back and reopen this we have that all the changes I just did now finally if you want this to happen on save without me having to go and manually run this command this is where we can use node Mon to automate this process so I already created everything to just basically copy all the files over now I have to tell just node Mon to do this when I make changes to certain files and the files I'll be watching for are the files in this basically client folder and the files in this server folder I already have node mount installed I don't have to install it and again I have tutorials covering node Mon if you want to watch those to understand what's going on here I'm going to use watch flag first to watch that client directory and then I'm gonna do another watch flag to also watch that server directory and when changes happen to any of those I would like to run that command that I just built MPM run BLD and for that we're going to use the execute flag and in quotations so we're gonna pass that's not the right command I am command we probably also want to specify the file types that we should be watching for so we have J s files JavaScript files here and in here we have J s s CSS and HTML and for that we're gonna do extension flag ext and basically just a comma separated list of extensions so J s HTML and CSS I'll throw in CSS in there too just in case we decide to add one and I think that covers all of them so if I run this C it's watching now for my changes so let's say I've decided to make some changes let's say instead of purple we're gonna change this color and it doesn't really matter what I'm changing right it could be in here it could be in one of these other files I'll just do it here so we'll change this main color to blue which will also change the background color to lighter blue or whatever so I'm gonna go ahead and do command s or ctrl s and as soon as I do that C that will push all those changes and if I go back and just reload this thing now we have our blue and apparently the blue background of percentage that I did lighter didn't work as a good color I'm just curious what it converted that to let's just check that out so that's white apparently we needed less lighter color from the blue for that to work all right so let's do like 30% so there we go now we have the blue and we have the lighter whatever that color is from sass anyways it works it updates now I can go back and make changes to any of the other files so let's say we'd like to make changes to this ABCD file so again as soon as I save it it's gonna push it and if I go back and just check it out see we have the by now in our project and if I go here and add another script file to the server it's a j/s file so I do that that should push it and if i refresh this you should see now that file is also in here so we're copying all of that to the appropriate folder all of that now we just have see the final output which is the way Apps Script needs it we can also use es6 in our front-end client side now because babel that's included in parcel is automatically going to convert it to whatever it needs to be so here I could do let Const all of that stuff arrow functions and finally you could add one more step to this whole thing to actually open up the link after the whole thing is done now if I'm working on a Mac let me just exit out of this control C should do that the final command I did was this one let me just copy this my package Jason so this was that command now let's do comma and do another line here and I'm just gonna paste it right in here and because now we're in this seat we have a quotation we have another quotation we need to basically escape some of these with this slash something like this MPM round this new let's change this that and that should basically run the other one and it should do whatever it's supposed to do so I don't have to remember this crazy long command now it's doing what it's supposed to do I'm gonna do ctrl C again to get out of it now the last part is the opening so I want to after I'd save to do whatever it does and let's say we want to just open the dev link automatically now if I was just doing this on a Mac I would at this point just grab this link and on a Mac on a terminal the way you can basically trigger a link to be opened in your browser you can just basically go in here and type open and paste that link and if I enter that should open that link in my browser and as you can see it did so if I'm just doing this on my Mac I would just basically just go here and after this whole thing is done so this was my command to also push it to clasp and then after it pushes it to clasp I could do double ampersand again and then say open this link now windows there's probably another command that opens the link and on a linux there's gonna be another one now there should be a library that we can use to just make it compatible with all of them but for now let's just try to run this to see what it looks like so now if I save this and just go back and make some changes let's make sure we're on the watch command NPM run watch which is what I set it up to be so now let's go and change this save it and after it's done seed will also open the dev link right after safe and if you're interested we can add some functionality to make this compatible with all systems or you can just look up what the windows command is in the terminal instead of open now for me I'm just gonna go back and remove that command because I tend to save a lot and I don't want to trigger that open every single time it does that so I'll just remove this out of here control-c to get out of this if you learn all this different pieces like how parcel works how node mom works how to copy files if you have to using nodejs then you can customize your workflow to be the way you actually want it for the project the way you like it and hopefully this gives you overall overview what are some things that you could do and that should do it for this video thanks for watching please subscribe and I'll see you the next one

Channel: Get __it Done!

Views: 4,091

Keywords: CLASP, web, app, node, js, javascript, google, apps script, script, parcel, bundler

Id: Nf9ExEkySjo

Length: 38min 9sec (2289 seconds)

Published: Sun Jul 12 2020