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

[@kensleylewis]

After hearing all the complaints on Parcel 2.0 from this comment thread, and watching your video, I was able to generate the same end point of this project with similar npm packages (multiple gulp packages and browser-sync). Thanks for explaining things clearly.

[@morgansolar]

This video was amazing. I learned so much in one shot. wow.

[@leopoldoortega2580]

Incredible video! I spent hours looking for how to develop App Script projects locally and this video not only gave me that but also taught me much more about setting up a proper development workflow.

[@getitdonetube]

👍

[@PhamTienPhong]

This is so clever to do all the time wasting tasks of GAS. Thank you.

[@rbsfinger]

Thanks!

[@getitdonetube]

Appreciate it!

[@MichaelOShaughnessy]

This is great however Parcel is on Version 2 now and it doesn't like plug-ins with the word "plug-ins" in it. I would be forever grateful if you could do an UPDATED version of this using Parcel 2.0. I am improving in my GAS skills and really need to start using a more sophisticated IDE like VSCode. BUT my life is creating solutions using GAS so I eventually have to get things back into GAS. So... what do you say... updated version, please??

[@FIRISolutions]

wow incredible

[@ibrahimqassem2254]

Good Explanation

[@rodrigodavalle5738]

Awesome video, thanks a lot!

[@lauraa.3593]

Excellent!! Thank you!

[@kensleylewis]

great lesson, but one thing for sure that was missing from this entire session what figuring out how you generated that marcos URL in a separate tab that represented the HTML page. When you are going through the lesson, its just there on your screen.

[@peterm.miranda6827]

Hi sir, please make a tutorial for script to publish as sheet Ad-On ,without own a website / using a google site. since this is very complicated scopes/verification , also there is no complete tutorial yet, i think this will be a great video . TIA

[@ДенисКобзев-л7щ]

Perfect! I follow u on both chanels!!! But need your help about parcel&gas scriplets like this "" in index.html in vs code. I realy like this redactor, but parcel can't transform gas scriplets code parts. Please show the way

[@getitdonetube]

I pretty much never use scriptlets. That being said, you don't need to translate those. You need your HTML pushed to the server with scriptlets and let GAS handle the rest.

[@truog91]

to open link in command line at terminal, you can use [start "link"](no double quote)

[@linabasuni3411]

Hi I really learned alot from your videos, that's my all time favorite channel thanks alot, how can I work with more than one js file in the js dir? I linked both scripts to the html file but calling functions from the second js file throws an error "userCodeAppPanel:142 Uncaught ReferenceError: myFunction is not defined" ?

[@getitdonetube]

If you watch these 2 videos you'll see how it's done kzbin.info/www/bejne/pZipkIqDr7qkpc0 kzbin.info/www/bejne/rpPPioCAg5lnkKs

[@Exorcisamus]

I love your videos! Thanks for publishing them. I would love to see if it's possible to use pug with appscript. I'm having some difficulties regarding passing server side code with in attributes like href and I just can't find if I can set pug to not transform < into &lt; for example

[@getitdonetube]

I haven't tried pug, I've tried nunjucks and it worked OK. So pug should work as well.

[@Exorcisamus]

@@getitdonetube It worked, but I had to replace (i did it with bash) the &gt; and &lt; (result from pug) back to < and >

[@baliswathi2804]

can you please also share videos on creating google addon using alternate runtime?

[@KuldeepSingh-pl7rv]

As you know there is no websocket kind of functionality on Apps script to live data update of multiple user web app. I wonder can we deploy whole mern app on google apps script webAPP using parcel, clasp ???

[@getitdonetube]

There is no MongoDB or Express available in Apps Script environment. If you're going to be hosting those, then you may as well host react and not deal with Apps Script at all. Don't really see the benefit of using apps script.

[@KuldeepSingh-pl7rv]

@@getitdonetube hmm make sense....because i was wondering the we can't achieve live updating kind of think on web apps script...like if any think updated it show to all who accessing the same web app...kind of websocket for google apps script which is not possible yet i guess

[@morgansolar]

from windows, PowerShell cmd to open a URL is > start ‘domainyouwant’

[@asdasd-pl7jj]

Hi :) Is there any way to ignore using parcel inliner? Unfortunately, the only way I have found is to do the scriptlets directly in the AppsScript project, Which is a bit cumbersome :/

[@SaintHanappi]

Hi, may I kindly ask you if you found a solution to include scriplets?

[@hggoyani]

in this problem with async function

[@karlsteinbrecher1604]

fyi, the parcel inline seems broken now

[@nnij0]

Same problem here. parcel command is not found in my terminal...Did you figure out this parcel problem???

[@nachopuma13]

@@nnij0 same problem here, any solutions found?

[@nnij0]

Parcel runs with "npm start" if you follow this tutorial kzbin.info/www/bejne/iGGVlpuaid-caas But it doesn't work as same as this CLASP video says.

[@MiguelAngel-kg1ni]

In My dist/html file no inyect the js text ir the scss text only the source or scc link :( any solution ?

[@getitdonetube]

which version of Parcel did you install?

[@MiguelAngel-kg1ni]

@@getitdonetube The lastest versión.... should be an specific versión?

[@getitdonetube]

If you have the latest version, scroll down on this page and find "Inline scripts and styles" & use that example. It should work without installing anything else. parceljs.org/languages/html/

[@karls3085]

@@getitdonetube It works with tags like this: @import "scss/main.scss"; import $ from "./js/main.js"

[@ocost3000]

Great video! Is there a way to use npm modules in google app scripts with clasp?

[@getitdonetube]

no, at least not for back end stuff.

[@fernandobrito5316]

For some reason, I have to deploy my webapp everytime I make a change in the code so I can see the updated version of my WebApp, otherwise it loads the old version without the changes. I'm already using the /dev version instead of the /exec one. Anyone got the same "problem"? I'd like to just hit refresh (f5) in the browser after running the clasp push in other to see the updated version of my webapp. P.s: I already said in your other channel once, but I'm gonna say it again, YOU ARE AN AMAZING TEACHER! #BR_STUDENT

[@fernandobrito5316]

Solved by doing the clasp clone againg.

[@franklinrodriguez5427]

This will work for create an addons as well?

[@getitdonetube]

Yes,

[@pichit.raetai]

Thank you

[@truog91]

after i do clasp push, i got "Sorry, unable to open the file at this time. " when i refresh browser ?

[@getitdonetube]

Most likely some error in your code. Or is it possible you overwrote manifest json file? You want to originally pull that file and then push it.

[@truog91]

@@getitdonetube verry thanks you, i resolve this bug by retry clasp clone with manifest checked status.

[@anandpadhiyar6406]

Great sir, amazing content. Thank you so much. I have one question, if we have to work with more than one html file (like different page in web app) how can we setup for that. I can understand that we can change name of htmlFile in util.js and in parcel command and then we can get that file but how can we add that in script tag so that we can get all html files bundled directly.

[@getitdonetube]

Frankly, for apps script web apps I never have more than 1 HTML that needs to be compiled. I may have multiple partial HTML files, but those just get copied to the project with no changes similar to server side files. That being said, one easy solution would be to just open another terminal window for the next entry file. Otherwise you would need a little more complicated setup.

[@anandpadhiyar6406]

@@getitdonetube First of all thank you so much for the reply. In one of your video in learn google sheets (create multiple views) you have created more than one view for web app. But now I actually got the solution, we can modify in util.js and also add parcel command for that html file also and we will good to go. I really appreciate your teaching style, it really helped me to think through different problems and I have also made some project with the help of your videos.

[@ragnarok7976]

You might want to look at this: developers.google.com/apps-script/guides/html/best-practices It doesn't exactly use clasp but you could. Using the techniques here combined with the doGet request object you can make a simple routing system that templates all your code into one file on the fly then serves it to the client all from AppScript. Just make sure you are using the proper scriptlet tags: will copy stuff quickly without escaping user input. This is exactly what you want to use for template building. I have four large pages in my project. Based on the pathInfo variable of the request object I check to see if I have something to show for that path (I just made an object with variables for my pages e.g. routes[pathInfo] would give me data about that route or undefined if it doesn't exist). If I do I make a template that contains most of the code and a navigation bar. I then template in the page body and page specific style and script. I love doing it this way because I can have a global style and script functions that are always available and Ican have styles and functions that are only available on their specific page. Also following their advice about not loading data in the template code means my pages always load in under 1 second and all data is present in under 2.