 Okay, oh my gosh, praise the Lord, this thing finally worked. Good gracious, I am a terrible, terrible streamer, but I finally got this thing working. YouTube UI is not, not my favorite. Let me see if this tweet went out. Oh good, wow, crazy, it all finally worked. Oh my gosh, now I need to take a nap. Well, thank you so much if you're here watching. Thank you for enduring the pain of me figuring out how to stream for the first time. I really do appreciate it. What we're doing today is kind of over the, at last week I had done a little bit of streaming around this little piece of UI. So at work we have this header and it's kind of inconsistent across our eight apps. And we had two people on our team make a spec for it, Angela and Travis. And what I did was I spent some time implementing this spec. I'm a little bit concerned that I forgot to fix it actually last week. So there's something wrong in here. So that'll be very exciting to figure out. And that's why it's not rendering. Let's see if I can save this again and see what happens. My favorite trick is to like use a prettier to see if I have any formatting issues. Anyway, before I get sidetracked on that, yeah, webpage is running slow. It's all right, we're gonna be moving all of that locally so we'll be able to find out what's going on there. So basically the goal for me today is to move what we worked on there, which is just the desktop implementation. We'll do mobile later into this repository. So this repository is where kind of a growing collection of assets for us for our front end. Oh, hey, look, I got some comments. Just saying hi, I can't say. Thanks, Wix, appreciate it. I said, thanks for stopping by. Thanks guys, love you. So yeah, so that's where we're at right here is we have this repository and the way that it works is it's set up like a mono repo using Lerna. And Lerna is just a way that you can have one repository that has a bunch of components inside of it and or a bunch of modules inside of it and then kind of distribute those all at once. You can version them independently, you can version them all together. It is used in projects like Babel, Jest, Meteor, Ember, Angular. Not sure why I read all those backwards but my dyslexia coming toward me. Yes, there's probably a syntax error. Yes, so hopefully I'll be able to figure that out. I actually quit the live stream last time because I was nervous I wasn't gonna be able to figure it out and my shame was like too deep but I'm feeling pretty confident today. So yeah, so this is how a planning center JavaScript is set up and we have a couple commands you can run, et cetera, et cetera. There aren't a lot of packages in here yet basically our shared top bar is in here and then we have just this URL generator which is, I'll just show you because we'll probably be copying some stuff from that. So it's a really simple file that basically just draws out URLs for each environment. So there's that. Yeah, so the goal today is that I would add an additional package in here for the starting point project that we have with the tabbed component headers and whatnot. So that's what we're gonna do. I'm basically just gonna copy that, put in the project and build everything up how I need it to be. Now here's the thing is that this was made awhile ago so I guess like more than nine months ago I put all this into play and I really haven't added anything since I've done some updates. So this will be kind of like a fresh eyes for me and part of the goal is to be able to document this better so that other people can contribute more easily to it, other people on our team. So before I start that, Sid's asking me questions. Do you take live questions? Don't want to distract you. Was using Lerna over yarn workspaces, a conscious choice or just the timing. So this actually does use yarn workspaces. So if I open up my, oh no, I need my package JSON file. Not the yarn.lock. Good gracious, the internet as I'm trying to stream and do all this stuff is not my friend. Okay, yeah, so that's a good question. So I did have it set up to, I mean at one point too, the intention was to use yarn workspaces and this is all kind of an area of exploration for me. I'm not too familiar with how everything works but basically I'm just using Lerna to publish. So I'm using yarn as the package manager and I'm using it to kind of resolve all of the packages and I'm trying to do better about actually moving all of the nested package is into like the shared route for yarn. But yeah, so that's a great question because I swear I set this up for yarn workspaces but apparently I didn't because I don't see any evidence of that in these things. There should be like a yarn file that kind of sets up the workspaces. Oh no, yeah, here it is. So workspaces, it's in my package JSON packages slash. So yeah, so I'm using yarn workspaces to resolve the dependencies in their shared dependencies but I'm using Lerna to kind of package and send it up to NPM. If there's another way to do that then I'd be interested to hear it honestly. Yeah, so let me kind of start working on this. Okay, so first things first, I'm in that directory. I have the project open here. And I guess I'll just start by making a new folder and kind of seeing where we go from there. So I'll add a folder not there in packages and this is gonna be, I never came up with a great name. Yeah, it's called tab header for now. Oh, Sid's saying that yarn workspaces now has a publishing thingy. Yeah, I've not used it yet. So I'm gonna have to, if you wouldn't mind linking that if there's any documentation for that, that'd be great because I'm actually having a problem with yarn at the moment where every time I upgrade a package and actually let me just open this up. If my computer will even let me navigate, let's see, is that it? There's like a open issue which is super frustrating. I don't know if I can tell just the ones that I'm, yeah, I can't seem to find it. Obviously there's a lot of issues with regard to versioning. But yeah, I have this issue right now and it seems to be kind of like sporadically, very sporadic for people who are using Lerna but an issue where every time I try, every time I make changes to one package and try to publish that, it actually thinks that I made changes to all of the packages which I definitely didn't and I have to publish a version of those too which is super frustrating. I thought that updating would help but even in the latest versions people are having this trouble where they're seeing the same thing and it's a very, I guess like kind of machine dependent which seems like super weird. I don't know. Anyway, this is what we have right now so that's kind of what I'm working with. Okay, so we're just gonna call this tabbed header that seems fine for right now and then we're gonna use this kind of URL thing as a boilerplate because it's the smallest one. Then we might need to kind of do that and react too. So I wanna look at this package.json file just to see how it's structured. This is typically where I would start trying to figure this out. So we have, the biggest things here is that we're using one of my favorite libraries, Microbundle, to actually bundle this up. It's by develop it and it's really an amazing piece of engineering if you make libraries at all. So zero config bundler for tiny modules and yeah, it's pretty simple. Basically you add these commands and it gives you a way to export an ESM, UMD and CJS file from a source file without a whole bunch of hubbub. The only challenge with it is that it doesn't do react out of the box so I'll probably have to borrow that configuration from again another component. So let's start with that. I'm just gonna copy this whole thing, wholesale and add it here. So we're gonna create a new file and package.json. Okay, and so then let's look at the things that we need to change. First, the project name is gonna change. This is gonna be planning center tabs header. And what this relates to is NPM, not the repository. So let me show you these projects on NPM right now. So this is our org scope and you can see that it's auto-populating some of these projects. So that's planning center top bar, planning center icons, planning center URL. These are independent on NPM but they're part of our mono repo for these components. So yeah, there's the documentation for that. So ultimately this would end up at planning center slash tabs header here. That's the package that we're eventually gonna get to. So that's the name here. I'm gonna start with just zeros. I don't know, just something stupid. Okay, now I'm gonna change these URLs where these files are going to live. I personally like to have them have the name of the thing that I'm looking for or that I'm creating. So, that didn't work. Tab header. Okay, now the source file is gonna be index.js. Perfect, this is the repository where this lives. So yeah, planning center slash JavaScript. Great, I'm the author. It's unlicensed at the moment. I'd love to be able to get those licensed even if just for education purposes like this. The files we wanna distribute are the index file and dist. ReadMe gets sent automatically. So I don't have to include that. And the commands are gonna be micro bundle and micro bundle watch. Yeah, we don't have tests yet. So I'm just gonna delete everything that we don't have yet. This I'm gonna keep because this is gonna be, every time we save this and, or every time we deploy this, we want this to build. Actually, no, that's for tests, pre-test, not pre-publish. So I'm gonna delete that too. We can pull that back in later. And then again, the URL for this, the homepage is gonna be packages tabbed header. Okay, cool, that is looking great. So since it's viewing the source file as index.js, let's figure that, let's create that file. Let's see. Okay, so what we're gonna do now, I'm curious if this works on, oh, sweet. So this is one of my favorite additions to VS Code. I think it's in preferences. And it is in features, I believe. I can't remember. NPM scripts. Yeah, I think this is it, but it basically gives you playability of these scripts in VS Code, which is really, really neat. So the package that we're looking for, not symbol, the symbol might be a good reference for us. It's a small package, but uses React. Okay, so the ones we're looking for are in tabbed heading. So we have build and dev, it's picking up both of those. So let's run dev and see what happens. Hit that play button. All right, so it tries to build that. Let's see why it's failing. Microbundle command not found. So what we need to do is we need to install those. Oh, not there. Oh, hey Max, what's up? Oh, sorry, yeah. So I suck at, I'm sorry that I didn't start early. I had attended to, but I suck at live streaming and I couldn't get it to actually start doing the thing. It was just like an empty page for like 15 minutes. I'm sitting here like an idiot just thinking that my thing is going out into the world and not. So that was fun. Anyway, yeah, I'll hit me up tomorrow. So yeah, so we got this, so I'll hit yarn now and see what we got. Anything that has to do with the internet right now is just like crushingly slow. I wish I had jokes or something, but I don't have any jokes. Now, if this is doing its job right, it should be kind of like building up everything and then kind of using the shared versions of things that I'm using in my workspaces, in yarn workspaces to, so Microbundle, let's see, let's open up package. So like Microbundle isn't installed here, but it should be pulling it from my yarn workspaces at the root. So I think, let's see, where's the root package JSON? Yeah, so we have Microbundle here. So ideally, that's what it's doing. So it should have linked all those up now and let's see if we can run that command. So what was it, it was yarn build. Okay, so it's running the Microbundle command. Cool. Now, so what we can see here is just like that it used our definitions in our package JSON to say what the main UMD and module versions are and it put them in this folder called dist. It has all those files. So obviously this is not the implementation that we have yet, but just to make sure that everything's hooked up correctly, it has our source maps and then it has versions for all of those. Now, one thing that I wanted to check out real quick is that I know that sometimes the best practices change from month to month as to how those should be named. So how those files should be named. So I'd like to check that out and how they're referenced, obviously in the package JSON. So usually what I do is I just go to the package for develop it Microbundle and kind of look at what they're doing. So that would be here. Okay, so the package JSON should look like it should have a main, which is going to be the dist regular JS file, the UMD main, which is the UMD build of it with the UMD suffix, perfect. A module. So this changes to MJS. Glad that I checked this. And then the source file, that can be any source file, it can live wherever. We will likely have to change this in order to get kind of JSX support. Awesome, see you later Sid. And yeah, so have a good night's sleep. Okay, cool. So since we did that, I'm going to, yeah, so we're good. Now that we changed that to MJS instead. So let's save this. I'm going to delete this whole thing and build it again. I'll see if I can use this now now that we've yarned up. No, it doesn't like that. It's all good. Cool, call in Microbundle and should give us three new files. Again, this one with the now.MJS extension. Yep, cool, awesome. So that is good. That's good to go. Actually, at this point, to add tab header, I'm going to check out a new branch. I'm going to start committing right away. Okay, cool. So that now is at least set up. This is perfect. I'm going to hide this since that doesn't seem to be working at the moment. So the next thing is I am going to, I'm going to need to get react working. I know that I need react. So I'm just going to import react and see what we get here. I don't want to do too much just yet. Trying to think of what the best way to test this is going to be. So export defaults. Okay, let's do that. Let's see how that works. Oops, already commended. I'm expecting that it's going to give me an error saying that it doesn't, like just a syntax error, not understanding this syntax because I've had that problem with other packages. Oh, wow. No, we're at fancy. Looks like maybe they got that sorted out. Cool. Oh, you know what? It's not with JSX. I remember now. This was something else. So there's a couple of things that we need to, what is it? Okay, so I want to look at the output here because I think that they're react stuff. Yeah, so they default to hyperscript, which is fine. We just have to configure it. We just have to configure it differently. So let me see if I try, if I solve that problem with micro bundle here. So this is another project. This is symbol and I have everything set up correctly. Now the way that I'm doing it in this package is a little bit older. I'm kind of like doing the whole babble thing, which is a little bit aggressive, but basically I have a build script, which is going to run babble and then run micro bundle from the output. So it does like kind of like an intermediate thing. I do that to get syntactic things that micro bundle up to this point has not supported like, spread, or REST spread props or whatever, you know what I'm saying, like the REST spread syntax. So it's very possible we'll need to go that far to get support. Let me see how should I kept that micro bundle page open? And I need like four computers to do the tasks that I'm doing right now. Let's close this, see if that buys us anything. Okay, so I know that there's an issue here. Maybe we should just search for it. Micro bundle. Oh, okay, here's. So there is an option option on micro bundle to change the pragma. There we go, dash dash JSX. Okay, and it defaults to hyperscript. Perfect, so I think we can just add that into each of our calls if we want. Never too confident whether that's supposed to go before or after just kind of like chipping away at this one issue at a time. So the goal from this is that I should be able to open up those exported files and see that now it is not using the h function, the hyperscript function, but now it should be using react create element to be rendering out those elements or returning that call instead of h. Okay, let's see if we got it. That's the source map. Cool, yeah, so it's a return zero. So that's gonna be using the module that it imported. So I think that's right. At least I hope it's right. Okay, okay, okay, okay, hey, let's see. Actually, let's look at the UMD that might make it a little bit clearer. Cool, that looks right to me. Okay, cool. Since that's the case, now we can kind of start okey dokey. Don't need either of those. Let's kill that. Maybe that's one that's stealing resources from me, except I need it open. You know, man, I don't know what I did to my computer this morning, but I really do apologize. It is just raging pissed at us today. I just need to get in here long enough to steal my code. Perfect. Ah, that's not the right one. Please. Oh my gosh, there we go, finally. That was trying, that was trying, folks. Okay, so what I'm gonna do is I know that this module at one point worked. So first I wanna build it and see if we get any errors and see if those direct us to kind of problems that we had. Okay, so we do have something. Can't read property type, okay? I honestly don't know what that means. Type of undefined, okay, let's see. So we're exporting all of these. Let's, this is how I debug. Okay, cool. So when we export nothing, we're fine. Okay, good to know. Oh, this might have something to do with it. This tabs container, tabs container. That's not gonna work. It's probably why our code wasn't working before. Okay, cool. So we got one component out of it. Guessing that's what broke it before. Let's see if that, yeah, cool. Let's just go one by one until something breaks. So we'll make that one available. Awesome. And we are getting some warnings. We can deal with that later. Okay, so this is one that it's pissed at. So re, okay, so page title. It's throwing a fit at. Okay, let's skip over page title. I'm guessing it has to do with the, so none of these are taking props in this way. And I think that's where that kind of tricky bit where we're gonna have to run everything through Babel comes into play. So let's do the ones that don't do that fancieness with props first. And we can solve that problem in isolation. Let's just test that theory. So this is one that doesn't have, or that does that, that rest props. And yes, we're getting that type error. So let's solve that. I updated my operating system. I haven't changed back to the, you have to like disable something to actually let you hold the button down and go up. So I'm like just jamming on these keys like a noob. Okay, so let's add our progress. Okay, next thing. So now we actually need to, we're officially at a point where we need to kind of do something a little bit more advanced with Babel. So I'm gonna jump in there. Like I said, I know that Cymbal is doing that. So let's take a look at how Cymbal is set up in the package JSON. So Cymbal is set up like this. For the source, instead of just using that straight index file, we have, we have source, Cymbal.js. So that's what we have right here. And then again, we're running this, this additional processing on top of it. And then, I mean, this isn't great, but it's the way that I have it set up. It's the way I'm comfortable with. I'm sure there are better ways to do this, but I make this intermediate version of it that is Babel processed. And then I run micro bundle on that. So that's how this is set up. I'd like to copy that. I don't wanna reinvent the wheel from scratch. I just need to get this done. So what we're gonna do, let's copy those, go into our other package JSON here. Okay. So we have this Babel script that's going to look roughly the same. Build is gonna look a little bit different. Let's see. And yeah, so pre-published just builds it. I guess let's leave that, let's leave that in there for now. So build, so we're gonna take this out, but we are gonna have that micro bundle JSX at the end there. Might not be necessary because we're already getting a processed version of that. But what the hell? Okay, I'm gonna build this and see what happens. I think that we're gonna be missing a bunch of stuff in configuration and whatever. Source doesn't exist, perfect. I know how to solve that. So we'll add a source directory. We'll add a new file called tabbedheader.js. And we're gonna basically copy everything that is in our index file now. Put that there. We can safely delete this because nothing is referencing that. And let's try to build it again now that that's gone. Okay, so we got a parsing error, which is great, unexpected token. Perfect, this is where we wanna be. So how do we solve that? Let's go back to symbol. Okay, so we have a lot of Babel requirements. So I think that what we need to do is we need to just add our Babel config. Okay, so those are all of our Babel presets. Now it's probably gonna bark at us because it doesn't have some of those libraries. Cool, successfully compiled one file with Babel. It doesn't look like it's running micro bundle. We can check that by deleting this. Yeah, definitely is not. So let's see what we got wrong. So scripts we have build. This one doesn't have a dev. That shouldn't matter because we're not using it right now. We need to re-yarn. Okay, so we are getting our temp file written. So that's a good start. Ah, I think I know what's going on. We need to change our source to temp instead of index here. So it's gonna be tabbed here. So just for recap, we're running npm run Babel. We're gonna run that on the, let's see. That's gonna run this script which basically just runs Babel on the source directory and then puts everything, anything that's in source it's gonna process and put it in temp. Then what we need to do in order to run this second part of this command. So if this is successful it's then going to run the second part of this command which is micro bundle which is going to look at the source file and then process all of these. So it's a little bit of a headache, but it's all there. So I just need to change the source file. So now it's looking in this temporary directory for the Babel processed stuff. So let's run yarn build again. Cool, so now we have built out our disk directory with all of those files. Let's look at the UMD again. Okay, search for each parent. Okay, cool, so we don't have any of that. So, okay, so we are using create element, perfect. All of this is working swimmingly. So let's see now if we can export one of these ones with this extra little sugar for REST parameters. Oh my gosh, look at that. Amazing. So we'll do this again, just one at a time. Not in a rush, happy to take it slow just make sure everything works not trying to do too many things at once and then get confused and not be able to debug where I was at. I know I'm the weak link in this process, that's fine. Okay, getting there, I think this is the last one. Okay, cool, let's see, what do we do? Okay, cool, cool, all right, that is good. So one thing that I want to do, I don't like the fact that this disk directory is now committed into my project. Now I want those on NPM but I really don't care about having them on Git, it's just kind of confusing to have like a bunch of distribution files. So I need to have a way where I can ignore them in Git but then publish them to NPM. So now part of that is already solved for me because I'm saying very explicitly I want to publish, whoops, in my package JSON, everything I have I want to publish the dist, everything that exists there. But I need to do a little bit of extra fanciness and you can see I've done this in the other packages is I want to ignore these dist and temp, sorry. Vivek, sorry to lose you but yeah, just check in tomorrow. Feel free to hit me up with any questions on Twitter. Just hit me up at chantastic and I'd be happy to answer those then. Thanks for sticking with us this far. Yeah, so let's see, so what do I need to do? Package JSON, okay, so I'm going to do a new file and this is going to be the git ignore and that's where I'm going to, actually I'm going to copy this whole git ignore because there's a lot of stuff in here that I got just by magic of setting up this repo in on GitHub. There's a lot of stuff that I would love to be able to not have in here. Okay, cool, so that's going to ignore that on the git side and I'm going to have to delete those files because they're already being tracked in git. Now what I need to do is I need to not ignore them on the npm side, so I can, there's an npm ignore. Now I'm already forcing that file but I can be super explicit here, so and then we'll do, whoops, not there. Git.npm ignore, whoops, man, I'm so bad at this. Every time I stream I learn something about my process that is just so offensive, not only to you I'm sure but to me that I haven't like streamlined it and made it better, so thank you, you're making me a better person. Okay, npm ignore, we're going to copy I always say, we're just going to say not dist, so we don't want to ignore dist when we're publishing the npm. Cool, we're going to add that, we're going to git, actually we're just going to remove those, so remove dist. Okay, cool, and then I'm going to commit that deletion so we're removing that from the repository and then we're just going to have to make sure that before we deploy we rebuild those assets so they're on, ignored on my local machine so the files are still there or at least ignored as far as Git's concerned. Okay, cool, so let's see, what's the next step from here? Let me again investigate this, so I already have that pre-published task so I was going to run npm build before publish so that should be good to go. Let's see, private is set to false so this should just work for us. Let's see what we get. So I'm going to say, I'm going to go back to my documentation here because it has been a while. See, I'm going to say Yarn, Learner, LS, that should tell me all the projects. Oh, okay, so that tells me all of that command, Learner, LS tells me all of the projects that are in here. I can see that tabbed header is now being recognized as a project being managed by Learner. Perfect, Yarn, Learner, diff, is it? Yeah, so that's not the one that I want. I want to do update it, I think. Okay, so this is the problem that I'm having that I told you about earlier where it is saying that all of these projects have changed even though it's just one and it's an open issue on Learner. So I don't actually know what the solution to this is. So you're going to see me do something really dirty, which is basically just increment the pre-released version of all of these. I know it breaks my heart too, but you know, you got to ship it. So let's look at the command. Learner publish, and I'm not aware of a way to just publish the one package besides kind of like going in there and opting out of all of the kind of tags that you get through Learner by default and just npm publishing that package. So I don't know, if you want to help me, I'm more than happy to accept help on this. So let's see, Learner, Learner publish. So this is going to ask me for all of the versions for everything. Oh, if it works. I think it might be pissed that I have set this to zero. So let me give it a pre-release version number. Okay, let's see if that works. No, I might be SOL today on actually publishing this, unfortunately. Biggest arguments, maybe pissed about that. Get commit, super disappointed right now. Oh, I need to put this on GitHub, I think. Yep, I forgot that I'm on a branch, that's why. All right, so let's merge this in. Okay, G merge minus. We don't have a read me, so that's going to be kind of a bummer as we go through this, but let me push this up. Now let's try this again. If this doesn't work, I have no idea. I'm going to struggle on my own and probably cut this stream because we're at about an hour anyway. If it works, it should ask me for all the versions that I want to publish of all of the different things. Oh, hey, look, progress, progress. Let's see, so again, this is that bug thing, so I'm just gonna, as you can see, I got a pretty big pre-release number on all of these, which is just embarrassing. I should have never started this live stream and admitted my shame to you. Oh, let's see. And now they don't even support those version, the same kind of version numbers anymore. So let's do this. Let's just take whatever they're gonna give me. No, I'm gonna have to put all these numbers in by hand. Zero dot zero, zero, custom. Gosh, this is so infuriating. I feel angry for you having to watch me right now. Again, part of this is research, just for me to be able to get a better process around this stuff and figure out what I am doing wrong. So four dash four, so that's for symbol. Tab debtor, so this is the new one. So we're just gonna say pre-major. Yeah, so this is gonna be a 1.0 at some point, we're just gonna call it pre-major. Maybe I'll regret that, but who cares? URL, custom pre-release. Oh gosh, infuriating. Two dash four, cool. So it's gonna give me a rundown of all of the things that I am publishing. That looks fine to me. Are you sure you wanna publish these? Yes. I really hope that these go out because it'll be really disappointing if they don't. Failed, bummer. Pushing tags, publishing packages to NPM. You must be logged in. It's gonna make me do all that again. I am sure of it. I'm gonna do this on another screen. So you don't see my podcast words. Hey, you know me. Oh, pin, that's probably a bad thing, right? Okay, you know, at this point, I'm determined. It's gonna ask me for all those versions again. Okay, cool. I'm pretty sure that those did not go out. I think that failed and I don't know, I don't know how to read, like retry the previous publish. I don't know if it's possible. You're learning today that I know very little about the tools that I'm using. So that's simple. Was it tabbed header? Yeah, so that did not publish. I'm gonna go through that whole process again. Man, oh man. I think maybe this, we're not gonna have the satisfaction today of actually having made this work, which is a real bummer. But yeah, so I will see verify registry authentication. See, this is, I should have done that because then it would have told me, it would have failed more gracefully than just saying like everything's good. You know, let's just do this. What was it? Package, okay, tabbed header, package JSON. So that's gonna be this one. Let's change this to alpha one. Let's just do that. Oh, okay, I'll do it from the terminal. Oh gosh, all the stupid things I'm doing right now just to make this work. Wow, it really freaked out over that last version. Yeah, let's just call this, call this alpha. This is gonna be, let's call this a pre-patch. Man, I'm just really screwing myself for the future. Okay, so pre-major, sorry, I'm sorry, I'm sorry. I hope that everyone has dropped off at this time at this point. Let's see, pre-alpha two, I like it. D, this is gonna be a pre-patch. Good, man, I really screwed up this version numbers. Cool, yes, I'm doing this all for you. I'm gonna move on with my life. I'm gonna increment all these to major versions if I have to. You must be logged in, wow, what a cluster. Well, I'm really sorry, that's super dissatisfying. I'm really sorry if you stuck around to see the payoff. I guess you just have to check back in to see that. So very sorry, I promise that I will reserve that for video and not just try to fix it on my own. Thank you for watching, I hope you learned something in review, what we did was we kind of add a new project to our monorepo, we copied a lot of settings to be able to do that, and basically the biggest things was we needed to, everything worked great out of the box, except we needed to change the hyperscript to JSX in that config, and also to be able to parse the rest parameters we had to kind of do that whole thing with the temp directory to process out Babel, which is crazy, you saw firsthand that I have a little bit of a cluster on my hands in terms of the versioning of these packages managed by Lerna, open issue, really kind of a bummer, and then I failed because of credentials. Now I know that there's some problems with two factor auth with yarn, I know that it doesn't, at least as far as I know, support two factor auth, so that could be a problem too. There are a lot of open questions, so next time we'll dive into those, thanks for watching, subscribe if you want more videos like this or to know when I'm making some live streams. Yeah, awesome, thanks for tuning in.