Let's Deploy SvelteKit to Cloudflare Workers and Pages

big empty my face there we go oh no okay oh i just clicked on my face and not the uh okay is this going there it is okay i see it tweet okay oh and it's already 10. that happened fast that happened really fast okay um hello everybody uh we got some good friends in our little discord uh discord block party right here anyone want to say hi hello hi hey i thought we all agreed to leave chad hanging i mean i can wait i can wait i'll wait it out i'm not uh i'm not afraid of silence today we've got something super fun and i am super uh excited to hang out with my discord friends um to kind of learn something new today um today so so last week we had played around with a svelte kit app and we wanted to get it running on super bass um so we could use the super bass auth and so we got that all set up and so i have we have this app here now looks like maybe i didn't save everything from last time because i'm lazy but we can work through that later um we have a spell kit app and we wanted to just figure out how we could deploy it to um cloudflare now i know these are a little bit complicated because i think spelt kit it can use like workers and like static and all that kind of stuff and i don't know anything about any of this stuff um and so we thought it'd be fun to just uh you know in the spirit of just learning we kind of just you know go for it and see what happens but failure is definitely an option today as we've seen in the past we may not get all the way through um so yeah let's uh let's get going any any questions before we start from uh you know either our friends in chat or those friends here in discord no okay let's do it here we go okay so uh so as i mentioned on the right i have this code here um we have a an app i think i put it on github too um oh shoot i meant to figure this out i actually don't know how to uh moderate comments which i probably shouldn't admit on stream um is there a page for that ben there's like a special mod view you can enable but legitimately if you just want to mod me i take care of it okay cool cool i might need to do that mod and then bendy myers okay slash oh look at this thank you bendy myers okay i'll i'll take thank you thank you i appreciate it uh exciting times you know i have to say i have been uh so fortunate to have not had to uh think about that much but it definitely uh is something i need to think about in a second um thank you so much ben um okay cool so let's do this um and so then on the left here i have um uh cloudflare pages and um i went right to the site because i do have some projects that are you know kind of um kind of old client projects on the root page so i didn't want to show off any of that stuff um but turn off the sound effects here um but we're going to dive in so right here this is the cloud four flare pages thing i'm to set up while we're in here set up a new project and see what that asks us to do so i have my github account set up here and it looks like i added a repo previously i could do github or git lab and let's see add an account okay so i don't know if i want to add an account but i do want to add a repo from the lunch dev group so maybe i need to so curious uh if your repository is not shown configure repository access for uh cloudfare flare pages okay cool so i think that what i did was i probably limited this to just that one repository in which case i need to not do that i need to add some more put my password in here okay so what does this look like so now that i'm logged in i can kind of set access to all of the repositories that i want now i think that this is just my chantastic stuff and not stuff that i have on different organizations so i think i might need to add another organization let's try that uh next page a bunch of like just makeshift organizations in here all repositories yeah let's just go with all repositories to keep this simple next time by the way i think you just see one of the kind of their latest releases with it which is gitlab okay they didn't have that before this week oh nice nice so this is new yep cool is anyone uh anyone here using gitlab i'm super curious nope it seems to have a lot of cool features i had tried it once but i don't know everything that i everything every project that i use is on github and so i just i've never kind of migrated had any reason to like migrate off we used gitlab uh our own instance of gitlab at the old place i what i will say is i think that gitlab has absolutely nailed the ci cd experience oh really yeah yeah the pipelines were really nice and intuitive to work with interesting in a way that i'm sure you can emulate with github i just haven't seen it yet yeah okay cool lemon podcasting thanks for the follow i know i know you were we saying susie sorry i used to and now i'm with i'm using jira and i like i don't know i like now that i know how tickets are supposed to be broken down quite a bit like we didn't do my last roll um i feel like i probably would have appreciated git lab a little bit more you know i'm not uh yeah i like that i like like kind of like seeing the need in uh in in retrospect yeah um yeah cool i may have to try it just for fun maybe that will be a fun kind of you know thing for us to explore like later on okay so we have our super bass project that we made last time and let's begin the setup um so we have sevipa base uh production main um okay that's what we want um build so this is our build configuration um framework we have svelte but not svelte kit and i know that they're different um so let's just go with what they have and maybe that'll kind of get us closer than nothing um let's see what our command is here i have my mic stand right in the way of my monitor which is bad planning on my part um okay cool so we have package.json what is our script yes felt kit build um so that's alias to build so we're gonna npnrum build is perfect and then where does this uh export so yeah something that might be useful for you michael is that like on the on the blog they kind of kept for like this full stack week on the announcement of full stack pages which is this integration with workers okay like they give like the first integration they actually build with is with spell kit so oh cool maybe anything there i didn't really read that part because i'm not using spell kit but i think it's already built in or something cool cool would you mind um posting a link to that that i could grab i think i have so i have let's see i have this page which is deploy a svelte site um but that sounds like it sounds like maybe they've produced another page that's actually specifically about spelt kit okay uh so luke ed five says that the uh spell kit won't work or svelte preset won't work here okay yep um npm install save dev uh svelte kit adapter cloudflare okay cool now i think that i remember seeing this somewhere in the docs and so i want to make sure that you know you know for repeatability we have uh we find these so let's see um also i love that the spell kit docks are just literally one gigantic page makes it super easy to search without having to have like algolia or something like that in the middle of it um big big big big fan of this um let's see so adapt i'm just going to look for adapter yep adapters um and we have yep adapter cloudflare workers cool now look at five do you know kind of like how this relates to because i know that there's both the worker part of this and then also the static part of this does the work cloud fair workers one handle both pieces of this um for cloudflare like i'm curious if that how that works i just put the link on the discord channel okay yeah awesome uh and there's an ex like that's kind of pretty well explained but basically you need some kind of functions folder like for the more basic uh kind of integration between pages and workers okay cool so we're gonna go here and [Music] oh whoops did i not copy that link right copy link why is it sending me to discord there we go i just copied it wrong okay uh cloud for pages goes full stack cool i know some of these people it's cool to see um let's see generally available how it works okay let me see what we got integration with felt kit out of the box what yes and then this is just like luke said okay spell kit is it i'm gonna read i'm gonna read this uh spell kit is a web framework for building so yeah yeah okay out of the box felt allows users to build projects with complex api back-ends as of today spell kit projects can attach and configure the svelt js adapter cloud for package after doing this the project can be added to pages and is ready for its first deployment with pages your felt kit project can deploy with api endpoints and full server-side rendering support better yet the entire project includes the api endpoints um can enjoy the benefits of preview deployment too uh this even okay google so there's an example here oh shoot i hit space uh there we go what are you gonna say martin yeah would you want to say that you got an example is that you is that you luke look at look at both sides both sides i love it uh okay so um so the adapter cloudflare worker adapter is building only for workers it's the entire sk application inside a worker um static assets and all the new oh okay the new adapter cloudflare just released is targeting pages which is compiling the sk application for pages with its new workers functionality okay interesting it's a one-to-one for workers targets but you get the benefits of pages interesting interesting well it's a pleasure to meet you thank you for jumping on and pointing us into the right direction so if i'm not mistaken then these let's see so they're these are two different adapters so there's the adapter cloudflare workers and then there's this new one which is spelled js adapter cloudflare cool this is this is good i i am the type of person who like just kind of misses a lot of that uh nuance um and so i might have thought that these were the same thing for a really long time uh let's see uh okay so there's a demo application let's see if we can get this working with what we have so far so um i'm gonna follow uh luke's instructions uh let's see so actually i need to commit the rest of what we have here which was just some of this super bass stuff good commit super bass set up okay so we got that we can push that up um and then we're going to run through these instructions um so let's see in this demo okay so this is felt next i don't know if we did next but we'll see if it we'll see if it works if not we can always update later so actually um oops oh i probably need to save that to dev whatever let's see did it put it um yeah put it here i'll just move it up i guess i'm probably breaking things that is uh that is my my process break things until they work uh i forgot to update the spell kit website with a new adapter um okay cool cool cool okay let's try this so okay so what do we do here so i can stand okay so we go installed attach to the the only change is is that has been installed and attached to the svelt config js okay uh cloudflow pages automatically deploys this repository here are the settings for pages project okay so framework preset none okay so i kind of screwed that up a little bit i guess and then i said oh no wait i haven't screwed it up yet so we're gonna go preset none look at i'm so glad that you're here thank you so much for pointing us in putting us on the successful path um okay so uh npm run build okay cool we got that that's right here um build output directory is going to be dot sveltkit slash cloudflare okay do that and then environment variables node version 16. i did run into this actually i was trying to deploy um the react podcast felt site to um pages and i was just doing it statically um using the static adapter um and i did run into this where it was trying to build it with node 12 and i was using some node 14 features so this is a good a good call out um cccc where we at root directory environment variables i love that you can add the environment variables right here on setup that's really clever okay is that it we're good i think so forgot to update this okay yeah yeah okay saw that okay let's save and deploy maybe you've noticed that but uh luke has actually joined us in the call oh cool hey luke welcome hello thanks for uh thanks for joining our our discord yeah thanks for just uh free like freely giving out the link to people it's pretty risky but you know we have some wonderful wonderful people and um we we've been very fortunate i think we've oh shoot i didn't i didn't say this uh we've been really fortunate i i feel really blessed to just be surrounded by awesome people who are like-minded and want to see um just friends succeed and be uh be happy and you know kind of kick out bad actors yeah that's awesome okay luke tell us a little bit about um about this integration are you working at a club cluffler yeah so i'm a developer advocate here um and i'm also on the cell team so it kind of it's nice i kind of shuttle this through a little bit but um yeah i mean like like i've been so i have been shuttling this because it's you know it's a real nice pairing like you have spell at the edge it renders really nicely uh svelte kit has all the pre-rendering stuff in place so you don't have to do a bunch of you know repeat useless work uh and just this whole pages with functions or pages of workers functionality it's like honestly it's like a match made in heaven it really is it's kind of wild yeah okay i realized that i didn't actually uh push the config to get so i'm going to cancel this build because i don't think it's going to work anyway and uh we'll try it again okay so build ad site okay i'll try it again yeah so could you tell me a little bit more about i'm still i i am i have come from like design systems and like component design and all that kind of stuff so honestly even all of these like very um kind of like guided path tools are a little bit outside of like my normal depth like when it comes to like deployment and whatnot so i'm curious how does this um like could you describe like a worker to me like kind of the concept in isolation and then kind of like what the actual integration looks like between pages and workers now that they're more closely tied together sure um so for the explain a worker are you is that like what a worker itself is yes yeah i think that's the like that's a question that is kind of like curious to me because i i you know i've had experiences with like servers in the past and so like the notion of a worker like i kind of maybe understand a lambda a little bit where it's kind of like this on-demand function um that runs like aws lambda is it kind of the same kind of concept where you don't like you just have this like dedicated thing that you know responds to some type of input and does some type of action yeah so the way i like to tell people is workers is kind of what serverless was meant to be and that's not just because i work at cloudflare it's just like it that's kind of the ex the uh logical extension i guess of surplus so serverless right is you're running your code on servers that you don't necessarily own or need to operate someone else's servers it's just your stuff the platform is responsible for orchestrating the server spinning it up when it needs to be spun up and giving your application the right stuff at the right point so from a lambda point of view that's where google cloud functions like there's let's say serverless v1 also for the record if you're having issues with the pages thing um i know you had i deployed yeah i cancelled it and so i think that yeah so this is so just going back out to pages yeah it looks like it's going now yeah cool uh so yeah back to serverless v1 like i like to explain it it's not entirely true but i like to explain it as if you had a node.js server that you used to run or whatever okay what it is it's aws or google or azure like more efficiently setting that up like on an as needed basis and then throwing it away when it's done right but like the efficiency there is that it can do it in a way that it knows it's going to have to do it again so it's basically caching it so it can be done more frequently or more cheaply on their end and on your end and so with that they're able to basically stamp out your application code on their node.js servers or their python servers whatever you wrote your stuff in sure um in different regions uh that you selected right but that's still a hey i want my code to run here i want my code to run there like please use all this configuration glue to make that stuff happen for me okay thanks bye okay and that worked right like luke edwards is here we got anthony in the room now too awesome what's up luke good to see you here man hey yeah someone sent me a link and then got another link and all of a sudden i'm talking on a stream i love it the rest is history you know i have to say this has been one of my favorite things about doing these is is this exact thing happening it's like we just opened the door and we're like hey we're going to figure this out and then we have people come in who actually know stuff and it's it's really amazing or pretend to know stuff at least for me it's the best we can all hope for honestly i i just i don't even pretend anymore i just i i i admit that i know nothing um so you're describing so that's so that's uh serverless v1 was kind of like a slightly more efficient kind of node process is that right yeah just you know this is the part where it's untrue it's like more in it more the more inefficient node servers that's the like i'm doing air quotes node servers that um someone else is spinning up for you and then you don't care how they do it or when they do it as long as it's done and you pay for that like request execution and uh that dovetails into like well eventually there's an inflection point where serverless is no longer cheaper because you know it'd be better to have a this is a i'm going to stop myself early that's another side conversation i do this a lot so that again that fine is fine it's worked for a number of years and still works for a lot of people but the reason i say workers is like the extension of what serverless was meant to be is there are no node processes running anymore what workers is is it's a step down it's like taking just the the essence of node let's say right like it's yeah taking the essence of node which is this va isolate which is what node is actually running under the hood two um it's taking that isolate and using its run time which the workers run time which is you know how instead of spinning up and spinning down node.js servers or processes to do this stuff how can we do the same thing but with much smaller components and those components are the va isolates which is gotcha you know this thing that always existed that chrome uses that node uses is just part of v8 and so because that v8 is you know written c plus plus you know the workers runtime can speak the same language and do everything on a much more efficient level and have all the same caching stuff involved uh uh sorry i'm looking at what you're doing now no no no no it's fine i just realized that i had an error and i was realizing last wednesday we had the benefit of you know having uh justin noel do a a educational stream with us and it was super interesting and he also mentioned the v8 isolate thing and um it's such an interesting concept to kind of like go down even like a level like lower than like what node is doing um to kind of get that even faster performance but that's like kind of the like i guess like version two of of serverless as you would describe it yeah it's version two because it's like you have much smaller pieces which you know we can just think of as being more modular right like it's easier to manage easier to move around and because of that this this workers run time is literally able to just stamp your stuff around all over the world even on an as needed basis with like exceptionally low latencies um and it's able to do that because the isolate uh model i guess like the isolate it's the death of the lambda lift we're getting rid of the landlord oh my gosh i can't with i can't with these like derivative like it's so funny that there's like the monolith and there's the derivative term of the landlord which is like totally nonsensical except for it's like it's so meta hey i've written a lot of lambda lists in my day it's a thing is there a workers equivalent because i've written some worker worker lists it works they still run well so the worker lift um okay so uh it looks like we're failing on so let's see i'm always bad at reading errors so i want to like look at this so we have it looks like everything's going smoothly yeah one of the one of the first parts of like the looks demo on the readme it talks about a spell dot config file yeah let me see yeah i lost some air time while i was switching oh no worries um let's see so let's go into i imagine that this is going to be like in the root um we do have it and then i guess do we need to hook up the build somehow uh so the the spell kit build is reading this file automatically okay um can you open your package.json just to verify you actually installed it yeah so we have um let's see okay great yeah yep so that's in there it doesn't get picked up automatically because of npm dependency linking stuff okay that's a pain so we do have to come into this felt config file and uh this kit subspace like there's the target in there we have to add a new property okay which is uh adapter colon and then import the adapter you installed gotcha um so in my example i just call this cloudflare and at the top i have import cloudflare from guess you can look at my actual file yeah so uh shoot i know you mentioned this um where is this it's a good call out i should do that but it's called kit oh cause this is this is a whole repo right so i can open up this felt kit config file um okay cool so i don't know i won't let me select that um so we're gonna add this adapter line okay and then we need to import this triple click ain't working for me today okay like that yep and so what this is doing now is when spell kit next builds uh your project it's invoking this adapter which actually changes the output and that's kind of like the secret sauce of sveltkit is that everything is basically uh a veep plug-in or like a roll-up plug-in whereas it's taking a whole bunch of inputs and then generating an output specific to the adapter target very cool so by default it's building for a node.js server and that's why we have to opt in with this adapter be like hold on wait a minute let's produce a worker file yeah four pages killer okay thank you for that okay cool so we have so we have it set up now so now this so this was the magic that we needed we um thanks martin for calling that out we were missing the the configuration um so it's not going to happen automatically we got to connect it and so we did i did run a build locally and it looks like it's now picking up that configuration it's configured properly so let's try this again git add add spell dot dot yes uh that's enough adapter i know it's not even a different word if we remove that e right okay push the hardest part is felt is like spelling and pronouncing it and finding other s words for like alliterations i remember um shoot his name escapes me right now why is that scott celinski s alliteration what oh yeah like so i remember scott telinski like laboring for like weeks trying to figure out some something to do with uh to maintain to name a spelt show oh what's up ben holmes welcome yeah my ears perked up because my whole career is s alliteration [Laughter] yes alliteration okay so we're going to go back out to savopa base and see that it looks like it got picked up so we got a new build um and it looks like it's the right hash so should be good let's go into view here if we get this this is going to be good this is a good omen i think for first felt we were having some trouble deploying some other frameworks not saying that that you know they're bad but just you know it was remixed [Laughter] i'm just saying you know having having luck having good fortune with a framework is a pretty important thing i'm i'm just saying not saying they're bad just just worse you know that that's all we're trying to say really i'm just saying worse for me in this moment but you know maybe maybe next time around i'll have good fortune the next time but this time it's just you know it's it's gone pretty smoothly in terms of luck and happy paths felt has always been like it's always surprised me it is true everything that i think will work has always worked i haven't built anything that extensive though so correct me if i'm wrong if things get crazy with like a weight syntax i've heard is fun to deal with i have yeah i have enjoyed it there have been a lot of things where so i was working i've been working on building a svelte app for react podcast which yeah irony is i know um i've been i wanted to learn about it and so i've been playing with it and all the things that i needed there was documentation for like first class documentation for and like that is a huge win like really big win okay so let's see where we're at so this also failed let's see why okay so it's also complaining it's complaining about the same thing and so i think that this may be a path problem um but i'm not sure why it would have built locally though um so let's see what's going on can we check out your build uh settings in the pages project yeah absolutely all right oh look maybe they didn't get saved or i'm sometimes people get a root directory build output directory so no that all looks good cool yeah and i think i think it is something with this auth.felt so from source oh you know what it is i think it might be these path aliases so let's see what are we doing so what is importing this this is source route index felt so um index felt uh what oh from okay cannot resolve others felt from source routes oh i see i see you ready for this there we go yeah so all of your file names are lowercase but it's looking for an uppercase yeah we didn't i how did this how did this how does this ever work the first thing i turn on so you're on a mac right i am yes insensitive but this is building on linux and it's not um so the first thing i always do for every single project even if i don't use typescript is i turn on force case sensitive something or other in the ts config in ts config yeah okay so let's see jsconfig okay jsconfig um okay so what is this for force what is it let me get the name it's okay in typical ts config stuff it's a very long name your first problem was using typescript [Laughter] anthony you've chosen violence [Laughter] i love it i love that you hate typescript so much i absolutely love it okay so it is force consistent casing in file names the irony is that there's like six capitalizations in that property name yeah okay so uh oh my gosh this is monstrous force consistency consistent casing in file names okay wow what a what a brave property okay um and so this will be complex this will be yeah right uh i assume that this is gonna be in compiler options yeah yeah so it won't actually do anything for you but it will hopefully like give you some red squiggles like throughout your project okay gotcha yeah so we still have to go through and update so the import so that they're lowercasing so i changed that to auth hmm okay oh oh i guess it just went really slow for some reason it should be right now i don't know i don't know why it's not loving me about 30 times a day i do restart ts server inside of ds code demetrius welcome good to see ya bite size code welcome good to see you christian yes thank you for thank you for being here okay cool so let's uh let's do this um okay cool we have uh yeah let's let's let's try it let's restart it let's see what happens um yeah that has always been that has always been a problem i was very like i i renamed them and i probably because i really like the lower case and i've gotten to this problem before um and but obviously i didn't uh change the demo code which imported the uh the different ones so uh let's see so we have that where's another place we're looking for auth dot svelt is it just that one it's just that one and then i guess profile is going to be problematic as well obviously so i don't have a formatter set up some i feel like something happened when i launched vs code today and it's pissed yes code is not on my happy path i guess vs code and i usually have some words i i know i'm weird and this is not everyone's thing but i turn off all auto updates that vs go tries to do so i'm probably running vs code from like 2019 at this point but oh the auto updates can be very aggressive that is for for certain okay so yeah it like it updates but then it restarts vs code and then crashes and then restarts again i've had that for three years am i crazy no no no that is definitely part of the process it's just like all of a sudden i'm like what is happening to vs code like why is it why is everything so sluggish and terrible and then all of a sudden it's like oh i get that like new readme for like the version i'm like that's right it was updating against my will and uh now it's about to crash right now it's weirdly this front matter plug-in that's very aggressive i like check out the latest release notes on front matter it's front matter what else is their release okay i'm pretty sure i forgot to move my vs code into applications and forever i would just open up one or the other and it was always like you want to update i'm like didn't i just update this i think i had a war of vs code going on inside of my computer vs code wars i've i've also get used to that like system so like the flow is like it fails then you got the readme and then you're like okay let's keep going let's go we're back in business read me and go let's see so if expect capitalization with uh auth oops auth and profile all right let's try this again we're 40 minutes or you know getting there not too bad thanks for all your help friends demetrius good to see you thanks for popping in your your voice was so silky smooth over discord when you were just talking a second ago you like that whoo the most felt voice i've ever had svenny thing is possible i could easily do commercials for svelte let them let rich know i mean can you just like read the phone book right now while we wait say look how old you've become [Laughter] oh demetrius yeah i i i you know how they have those things like read the docs to me like you know or like read this article to me like a lot of people will have those like auto-generated like reading through the article i feel like i would i would do some you know demetrius reads the docs you want me to be your audible like vocalizer i could easily read you books docs bedtime stories you let me know i'm i i'm ready for it yeah like well i think we know what demetrius is doing with he eventually hopped on something you know that that might get a lot more people reading um accessibility docs you know if if there was this really nice sultry smooth voice kind of going along with them just you know just saying i'll do it for free ben let's make it happen let's make it happen we're on it be the screen reader please now chantastic will wait for his build and it will deploy got an alternate voice for voiceover that's just demetrius and please you go to a new line and it's just like let's go you are now on a button you you definitely don't want hype screaming in your ear to meet yours right now definitely not oh i you know i i'm serious demetrius reads the docs as a as a stream game over let's go we'll do it we'll do it under the launch dev brand listen i'll dm you let's make it happen let's make it happen [Laughter] i will launch my docs on audible if you help uh okay um supa bass url is required this is interesting i'm curious how okay i i'm gonna do something real quick npm around dev that's how i run this thing locally right it's very possible that we committed this or i left this in a bad state um okay so let's just click around a little bit home about to do is that all works um not that this matters but um that works uh magic link there's my email if you want to spam me um let's see i don't think it was a super base url is that an environment variable it let's see oh yeah i think you need two different environment variables for super bass yes yes yes we haven't set anything up like that on we have not have we ah this is a i think this is an important feat thing of like dot and dot n stuff is exposed in your application but you have to import it a very different way yeah so i assume that's what you're trying to do is get an environment variable client side uh yes we need to we didn't actually put the environment variables in yet so i have environment variables and so okay they're right there they're just not there um so let's see what we have environment variables um this is this is good i also love that the preview and the production have separate environment variables that's super clever as long as i remember to put them both in there yeah that's the big tricky part um oops okay this is our app url i'm gonna add the these ones with all these special characters are so hard to grab okay this is i'm sure this is like pulling teeth if you're watching oh my gosh just grab the extra dot just grab the extra dot you can do it um and then uh shoot i can get some of these let's do this and variable i feel slightly responsible for not catching this but in my defense this has been like a very like hangout vibe so i'm not really thinking about the uh oh no potential roadblocks here oh gosh we build real stuff on these streams we don't mess around we want to put chan as much pain as we possibly can in the span of one hour i feel like that's like also his own goal is to put himself in as much pain as he can in one hour it is true like i these these are really just about me being willing to follow my face and hit all of the roadblocks so that when someone else comes along they're like oh yeah i watched that idiot do this thing for a while and uh now i know everything that i could possibly know about deploying this thing like the entire week shipping things that might be kind of exhausting look right yeah a week long of announcements is a lot to keep up with every i mean every time cloudflare has an innovative innovation week i i feel like i read 30 pages of blog posts which is great but it's definitely like more than i typically read in a month yeah yeah it's a lot you all are going full force full stack even [Laughter] [Music] damn now that was smooth or svelte as they might say full stack even we didn't we didn't rehearse that one dumb please keep it up i mean we're waiting for builds it's just pun time right now waiting for builds [Laughter] that's i don't know why i'm getting closer to a whisper every time i do it but you know we'll let that slide you're just you're feeling it out you're feeling out what the show's going to need from you i i i like it waiting for builds with dom demetrius i think for builds with dom that is definitely the next stream are we still waiting for builds.dev yes that's right it's just one page it's just a big white letters in the middle yes with the microphone to listen to the word yes yes yes in the background there's this dom like going through the whole like zombo calm diaper oh my god zombo dom zombo dumb i could utilize a green screen and just be pacing back and forth on the web page are you are you familiar with the original zombicom sitegum i'm not i will send you a youtube video we are i i you not that we are making this happen is it not still alive well uh it required flag i think they might have uh seen that's it maybe i i looked at this back in middle school i'm gonna be honest i i think they might have pivoted to like him back um but yeah no it was it was a parody of like the like over the top like flash sights there it is that's the loading narration it is glorious and we are recreating this for zombie i'm ready i dumbo i wish i could play the audio but i don't think it's going to come through over here but i'm listening i'm listening to zombocom right now this is zombocon anything is possible on zombocon see i don't know when you became christian bale's batman but i appreciate it oh zombo dumb it's happening whoa wait wait while we were zombo-doming i think we got success the build has finished [Laughter] okay okay okay okay so uh okay so we got a preview url oh this is the moment so actually that's not well i'll let you have your moment once no no no no no no squat squash it for me what's up i just wanted to correct the preview url so every single page's deployment has an atomic url so even though this was this is a production deployment uh it will always be accessible at this seven six whatever it was uh sub domain right and so because of that um we we don't have any other successful deployments here but if you like click on these uh the three dot menu like you can instantly roll back to any of these previous production deployments um and what that's doing is basically like oh we already have this pages deployment ready to go now including the workers that deployed with it and it will instantly roll back to that version so if you want to you know a b test or whatever right like cool back to some previous version it's there waiting for you at any point interesting okay cool cool cool so we have okay so this is always there and we're basically just pointing our like production to it exactly so that top box is saying like the domain is spoopa bass i can't pronounce it nobody can that's why it's fun and it's it's currently pointing to that 76a 2d thing uh which is at the bottom row of that card gotcha okay yeah cool gotcha gotcha okay cool so so what we're seeing right now is exactly the same thing at both of these urls this uh you know 7682 dd8 um subdomain um and but then also the savapabase.pages.dev um which is cool now as we continue to deploy to this we're going to have different uh hashes here but um we can point this at whichever one we want so maybe there's a bad build we can point it back to the previous build um pretty pretty quickly and there's a question actually from christian of like how instant is instant like as soon as i click it does it point to the previous build um it's within three to five seconds okay cool cool effectively instant and is there a limit to history like does it like everything that i deploy is going to be there now and for forever that's a good question um all of my pages projects the initial commit appointment is still available okay and that's well over 150 commits for my largest pages project so i imagine there's eventually a limit but i have not run into it okay and i don't think there's going to be a limit anytime soon that is so cool you know this is um one thing that i've really enjoyed about this is like these preview urls which you know seem to be like more and more popular which i love is you know like friends um i think i experienced this the first time actually like you know ben here today sent um sent me a preview url for one of their blog posts before it went live and it was like really cool to just be like oh yeah this is like on the internet i don't need special privileges i just have this blog post available to me um to like you know read and whatnot and then you know it it goes live when you point to that that you know successful build which is a really neat way to kind of collaborate i think right so pages will automatically by default auto update your like root domain okay the most recent successful build um if you want to opt out of that you do that by rolling back to something and then manually like promoting a successful build to like your your current root domain gotcha but by default it's always there and then uh what we call actual preview deployments are like like uh deployments that build for non-main branches or for pull requests okay so those invoke the preview environment which may have different environment variable values yes and those because they are behind this preview environment they get optional access uh integration very cool very cool if you are building something right and you don't want jane to find it you can put access in front right and then only people who authenticate um with access whether it's like a at cloudflare email or whatever that they have access to the actual preview url cool awesome um well this is super exciting so it sounds like basically like a branch workflow is a really great way to um like utilize this so we're going to be you know as you have branches which let's see i guess we could let's see how much time do we have we got like a couple minutes let's let's make a branch push it up and then kind of see that experience i don't think we need to actually see it build um but let's let's just kind of see what happens um we've got an about page let's just change this um let's just oh okay something's definitely wrong with my plugins because i lost bim uh get check out branch um excite make more exciting okay we're gonna push this up and we should see a new build starting from the branch right look at that cool so now if i understand correctly these are these production builds or this production build is always going to take the latest main like from the the default configuration is always going to point to the latest main build but we can have these these um we can have what preview builds from branches is that right yeah okay it's cool definitely a mouthful but yes [Laughter] preview builds from branches um okay cool um i think that's it uh anyone here in uh anyone on twitch chat have any questions anyone here have any questions or one thing they want to try before doing this where we all kind of good i'm honestly so delighted that we didn't fail that we uh did all this in an hour uh huge thank you um luke edwards was that did i catch that from anthony edwards yep cool luke thank you so much for for leading us through this this is super fun and um i'm sure this has been an exhausting week for you but i appreciate you coming and you know diving in and showing us how to do this stuff uh any remaining questions for anybody no no okay christian's good i think we're i think we're good fork it thank you so much for following i appreciate it um yeah i think we're good hey that's all folks i was i was gonna wait until he was done but are you are you ready i'll definitely sign you off you let me know i am ready i i'm gonna hit i'm gonna hit the stream off button as soon as you sign us out dom thank you all for coming to the launch dev stream today we touched on svelte and cloudflare we built things and it succeeded thank you for coming this is us signing off

Channel: lunchdev

Views: 154

Keywords: games, twitch

Id: -tFf0wGzxMQ

Length: 58min 35sec (3515 seconds)

Published: Wed Nov 24 2021