Parcel JS Setups Walkthrough and Review

hello and welcome to swashbuckling with code i'm jimmy cleveland and this video is all about parcel which is a popular javascript bundling tool now before i get into a brief description of what parcel is and what it can do for you i want to acknowledge that this is a pretty lengthy video as you've probably seen and that might be daunting to some people or you may just be wondering you know why should you spend your time on it so i do want to start out by pointing out that i do have time stamps for this video and they're going to be covering each of the steps of the build that i'm putting together and the nature of the video is that i'm going to start from kind of a bare bones approach i'm going to put each piece of parcel together with some really common setups which i'll cover in just a moment of all the different things that we're going to go over but at each of those phases i'm going to show kind of what parcel is doing for you what magic it's doing under the hood kind of comparing and contrasting that to other bundlers such as webpack which i've covered previously in a few videos i also make commits throughout the video and the final repository will be uploaded and it'll be in the description in case you know you are jumping around to any different time stamps kind of choosing your own adventure and you want to reference the code at that point the end state of the repo will be the very end of the video so you might have heard of parcel and you might be wondering what it is so i'll give a brief description here it's a javascript bundling tool which is very similar to something like rollup or webpack you might consider it a competitor to those and the thing that it does that stands out is its innovations in sort of magically doing things for you they commonly call it a zero configuration bundler which has some debate on whether it's actually a zero config or not but for most people's setups the parcel team claims that there's no configuration required which is pretty appealing when you're contrasting that to something like webpack which obviously requires a kind of legendary amount of configuration that's very daunting for people now if you're not really familiar with any of those i'll just say that it's a way to use sort of modern javascript and have transpiling benefits so that you can get kind of cross browser support it's a way to do work with frameworks like view or react or spelt or any of those as well as even supporting typescript i think parcel is a great fit for newer javascript developers in particular new developers in general because contrasting that to webpack i don't think they should spend a lot of time learning how to configure everything and get wild with all this configuration before they just focus on making things and getting things done and learning how to actually build things webpack to me is something that you kind of graduate to when you need more customization and more fine grained control that's just personally you know my experience with it parcel is also great for experienced developers i i like it a lot as a sort of prototyping tool when an idea hasn't really proven itself to be worthy of working on for a long time it's just so fast to set up and have a lot of conveniences and you can kind of just get going and start working getting things done but there are also teams that use it for enterprise level apps so i just want to throw that out there as well so let me briefly just kind of go over the list of what we're going to cover in this a lot of those will be broken up into the time stamps that i mentioned previously and then we'll jump into the video so as i said before we're going to be setting up a minimal project from scratch with parcel so that's where we'll start kind of what entry points you need what are the minimum files you need to just kind of get going and what that output looks like right away along the way i'm going to be showing when parcel can sort of magically find dependencies for us and add them to our node modules and to our package json without any configuration or manual package installs which is really awesome and we'll be covering vue react svelt typescript modern js features like conditional chaining and fallbacks for those also using a browsers list to customize those fallbacks for cross browser support importing images in javascript which is a lot of times something you have to set up sas stylus style components pug and multiple entry points as well and a final note is that this entire project is showing many different ways that you can set up parcel it's not necessarily meant to be a realistic app but it is demoing it from the perspective of creating a web app like a single page app or a multiple entry point app so now that you're equipped with an overview of what the entire video is going to be covering let's start coding all right let's kick this off by creating our directory for this new project i'm just going to call it parcel we're going to cd into that directory and then i'm just going to open it in code my editor of choice let me bring that down here okay close that and we have this empty project so what i'm going to do first is i'm going to create a source directory and i'm going to create an index.html in there and then while i'm at it i'm also going to create an index.js file okay you don't have to put this in source it's just what i'm going to do to save myself some time down the road in our js file we're going to do something really simple we're just going to console.log and i'll just say his work and i'll save that and then i'm going to go over here to html and i'll just use the the bang shortcut and come down here and we'll say parcel example is the title and then in this content i'll just put h1 parcel example just so we can see that and then i'm also going to point to that script so this is the minimum necessary for parcel to run you need an entry point which is an html entry point that you're going to point it at and then it also needs to you know load in a script of course so from there we'll just say index.js since it's in the same directory there and that'll be it so the next thing i'm going to do is i'm going to jump back over to the terminal and rather than installing this locally what i'm going to do is i'm going to say npx and we can just do parcel bundler and then we'll point it at our index.html so if you're not familiar npx is a way to kind of download a single time this npm package and run it so at this point it says oh you know what that needs to be source index htvalue silly goose so that's good to know that tells you that no entries are found or run that and you can see that it has built and is already serving us this server which is really nice so i'll click that and go to it and there we go i'm going to inspect this and you can see my console log is working so pretty simple but just to show that's how easy it is to set up you know very very minimal config now this is a server with hmr which is hot module replacement but we do have to enable that which we'll do in just a moment for now i want to show you uh if we come over here into our directory you'll see that we have this dist folder and this cache folder now interesting huh so the dist is just the output as you would imagine but one thing that you want to pay attention to while this is the same index.html file for the most part you can see that this script has automatically pointed it to the built version of our javascript which is going to be right here and this javascript file this is our bundle is actually has a ton of stuff in it now if we were to search really quickly for console.log it's work you can see that's there that's the only code that we have and obviously this is a bit of scaffolding for you know the future and all the other things that it's going to do so it's a lot bigger than just our minimal one but that's the gist of it so that's really cool that uh you know right off the bat this index.html thing just takes care of that for us we don't need any sort of plugins or anything like that it'll just output it and point it to all the right files that it has for its entry point oh i also should point out that uh you get source maps right out of the bat which we'll see like a little more feature full in a moment but just check this out when you look at this uh console log in our browser you pump that up a tiny bit more i'm sure that's fine for now but we'll probably want that in the future this has this where is it telling us oh well it's sourceindex.js even though that's not the script that our server's you know loading it's it's the source map telling us that this is the actual full one so that's pretty cool so next we're going to enable hmr just to show that real quick and i'll briefly talk about that so this is our actual original index file and just minus that for a moment so here in order to showcase that what i'm going to do is i'm going to just add a simple little input field here you know type equals text or whatever doesn't matter and just to kind of showcase the difference between hot module replacement and not so hmr is sort of like live reloading if you're familiar with that where every time you save your document you're going to so it's commonly called hot reloading as well by the way hmr but you know with live reloading every time you save the document is refreshed and so the that's great but the problem with that compared to hot reloading is that you lose all of your kind of local app state or your app state in general so where that's really useful is like let's say you're kind of designing this component and you're filling around with like some state that it takes a user a few clicks or you're filling out a form or something like that every time you save it's going to refresh that state so i'm going to show that real quick so we can show the comparison here so right now if i were to type you know whatever here in this silly small little input it's kind of small for you but bear with me for a second it's going to go away what if i were to go and change my javascript in any way so let's go it's going to be hard to alt tab here but let's go back to this index.js here and then we'll just say we'll change this to it does indeed work now what's going to happen when i save this is that page is going to be reloaded really fast unfortunately i can't tab to it fast enough to show you i guess i could split it but this this little spinner will turn to an x just really briefly but notice that our text is gone here so just taking that away so let's kind of show a contrast to that real quick you know it's probably worth showing honestly this should be good enough even though it'll be hard to read here so if i do this and then i'm going to change this to whatever as well as soon as i save that see that blinks and then it goes away okay so what we can do now we're losing real estate here is we can simply just in this script in this entry point we can say if module.hot so it'll check for that and then it'll say module.hot dot accept there you go and then when we save that that's going to give us hot reloading and so now i don't believe we have to restart the server but change things we save you'll see that this console was cleared that's an hmr runtime so that's a good indicator that it's working correctly so now if i type whatever in here and then i also you know do some nonsense here and i save you'll see that my new log is there but i didn't lose this state and that's going to be true for like everything what's really cool is like css will will kind of be able to be injected it uses like web sockets under the hood but i'm not very knowledgeable about that so i don't really want to speak to that but yeah you can think of it that way that that's kind of like when you change uh your css and your dev tools how the browser doesn't need to reload well it's the same thing going to be with javascript and css now the browser doesn't need to reload every time you're changing that which is really neat now let's actually install parcel and run our scripts locally from some package json stuff so we're going to do i guess we'll probably need an init won't we uh did we already make a package nope we didn't so we'll do mpmn y just to skip all the questions uh yes and now i'm going to do mpmi dash d and we'll do the same thing parcel bundler so now we're just installing it locally which is kind of the recommended way um you know rather than relying on a global one if you want to use the global one that's fine but typically you install it locally in your project so you can run all the commands so now i'll pop back over to here and we'll open our package json right here and in our package.json we're not going to be doing any testing here so i'm just going to make a script and what i'll make a dev script because that's what they do in the docs actually you know what that's going to bug me so i'm going to make it start because it's just easier to type maybe i'll make both and this one all i have to do is run that same command that i ran at the beginning just parcel and then point it at your entry point it's really simple and straightforward now we're gonna run a build script as well at some point and uh this parcel build index.html that's all you do so you're just gonna tack on build onto the command and that's gonna build you a production version of your site which is really sweet and a quick note uh you know keep an eye on this parcel version that i'm using because you know if if you're watching this video in the future and it bumps and you have any sort of issues typically that's the first place you want to look is make sure the versions are all the same and i'll have a repo with this code up in the description of this video for those that you know want to reference it while following along or it'll be the end state of the video basically so if you just want to look at any of the code and see if you missed up any syntax or just want to reference it it'll be there okay so let's make sure our scripts run right come back over to here and the first thing i'm going to do is i'm going to do npm run build and we can see we had no you know i did the same thing again why did that source source the original docs have it in the room and that was what was in my brain sorry so npm run build and voila and it's pretty cool it tells you how long it took to build and the size of them right here you'll notice that our bundle size is already 1.17 kb which is actually probably a little bit bigger than webpack would be at this size but i don't really think that has you know scalability problems to any extent you know i would keep an eye on that but it's going to be you know as the app grows it's going to need a lot of that code anyways and then i'll do npm start start my server up and there you go we're back and running again we can reload and we can see everything is nice now something i want to show from that real briefly is if you go to our dist folder now make this a little bit bigger you'll see that here we have multiple files here the same thing if we go to index.html it's only importing this one but you'll see that there's this file which uh looks a little bit different than before right and then there's this file and each of them have their own map and this is the one that we saw before well that's because uh parcel does not clean right out of the bat it doesn't delete the dist folder every time you run and it doesn't seem to have a command to do that from what i've seen so uh you know you might want to add to your package json um you know whatever your operating system command for like let's say building or something you could do you could do it on both you know rmr f dist or something like that but the thing about that is uh typically it's not really that much of a problem because the server is only going to be running at one time it's going to be running this one command so there's not going to be that issue when you're actually deploying it and if you're running it locally you know you can either delete it manually or you can put your own command for that so i'm not going to do that i just wanted to let you know about that so for now i'm just going to you know get rid of that and i'm actually curious i have the server running so i wonder if i if i like save or something if it's going to rebuild it doesn't seem like it i go to the index html save where's the try right so let's restart that again built the bundle reload the page everything's working and our gist is back to just having that single file or that single javascript file so i think this is a pretty good time to set up a git repo and commit our changes real quick before we start doing some bundle stuff and that'll actually help us track what parcel is changing in the package.json for us because it does that and it's actually pretty neat but you know a little magical so we're going to do a git ignore really simply and we'll say node modules of course and we're actually going to ignore dist as well as dot cache now this dot cache directory um i don't really know a ton about that other than it's what parcel uses to keep the builds quick so you know standard caching type stuff i'm sure it's not standard i'm sure it's very fancy but you get the point so um then we'll go back over to the terminal here and um get in it get add dash a and git commit m and we'll just make this you know initial partial partial setup i want to say parcel they're so bad so you know if you're using the the repo from the description then you can go to look at any of the commits if you want to see that timestamp but there's the name so now that we have uh you know our get set up so we have a fallback a commit to fall back to what i'm going to do is i'm actually going to do npm run build one more time just so that you have the data right in front of you and just remember that this is this size we'll come right back and look at it 1.17 kb for our bundle and let's compare this to webpack just to see so we can actually just really quickly do webpack cli and then we just say okay well the mode is equal to production just to get that you know bundling normally it does that by default but it yells at you so i'm going to add the flag and here you can see this main js is the bundle and it says it's only 36 bytes and let's actually look at the code just to see you know what it would output here go to main.js this is from webpack look how lean that is it really just found you know that that was just a console log and nothing extra so uh you know this isn't to hate on parcel or anything like that uh like you know you know parcel two is coming out it has a bunch of advancements this is web pack five so it's kind of the latest and greatest here but as of right now uh webpack's actually building a much leaner bundle just from this minimal example which is interesting because a lot of people that do bundle comparisons typically they're doing webpack 4 and parcel but they show that parcels bundles are actually smaller and faster so who knows everything changes at scale i'm not trying to start a war between them or anything like that i'm really just trying to you know give you the tools to show okay like this is kind of how we can you know make sure to keep an eye on these things as we're progressing forward in the project and keep an eye on our bundle size okay so i am going to wipe out that disk one more time because i don't care about any of that stuff right now so some common confusion that comes up is that with we are obviously building an app you know we're not building libraries right now and a really common pattern for webpack and parcel is to build a single page app where you have the single entry point and then all of your routing is going to be doing done through javascript whether that's react router if you're using router or any of the other frameworks ways of routing a question that comes up a lot when i was doing webpack videos is you know how do you do multiple pages well typically in a single page app that's going to be handled all through you know your javascript but if you do want to do multiple entry points you totally can so i want to show that right off the bat so in source i'm going to make this folder now a new folder here and i'm going to name it just pages and i'm going to move this index html into that folder here and i'm going to uh copy it i think that'll maybe be slightly faster and i'm going to rename this to about html and so in this about html well actually let's make a link to that just so we can go there really easily so we'll do an a tag and then we'll just say slash about.html now this is an important thing about us or you know whatever i don't know why i picked that name this is a very important thing the html is required here you're not going to get the pretty urls from this and i actually haven't figured out an easy way to do that with parcel there is a plug one plug-in that someone's made but it didn't really have that many downloads so i decided not to include it in the video um so if anyone knows how to handle this i'm not really sure outside of you know on your server kind of hard setting that but you know obviously when you're running your dev server you still have to have this so it's kind of weird if you don't know what i mean i just mean that you can't type like this which is commonly called a pretty url so we have to include the dot html as the point and if we go over to our about html let's just change this to the h1 to be you know about us and you know it'll have an a tag that goes back to slash index.html and then that will just say home they're both going to import the same script for right now just to get it running and i'll get rid of that input because we don't really need that input anymore do we oh and i almost forgot um we will need to actually move the directory up one because our index.js we put this in the pages folder we need to go up one very easy to forget that and i think that should be good so let's npm start start the server up let's see oh you know what we need to change our script haha it's not good so when we come into package.json um you know we told it it's in source index.html as the entry point we want multiple entry points now right so we need to say source pages slash star so we can use this pattern to say anything star.html we can say anything here that says source pages star.html any of the html files and pages pages do the same thing star html let's try that again and that's how i built so we'll come over here we'll reload the page you can see our console log still reporting and now we have this about us page which is kind of weird because we went to the root i've had this a couple of times and it's pretty strange now we're at index html it's like if you go to the root it just like finds the first page in there i guess but now we're going between index.html and about us let me see if we go to the root again what it does yeah i guess it just finds the first page that's interesting so i'm not going to get into fixing that on the server i just want to show you know multiple entry points pretty easily and the thing that you'll want to see right here is when we go to the about us page it has the exact same javascript right and most of the time when you're doing multiple entry points that's not what you want so we'll just really briefly uh you know make another file here and source new file i'll do about.js console.log oops the about page okay go back over here and that should have already reloaded for us and it didn't oh we need to change our range i'm making all sorts of mistakes today go to about html and then here we want to change our index to be about.js come back over here and it is already live reloaded for us in this case it's not hot reloading because i didn't put that hot tag keep that in mind so that's really easy right multiple entry points that are using their own javascript files you'll see some crazy stuff that we can do with that in just a bit let's make another commit super fast i'm just going to add all this stuff and then we'll say add multiple entry points that's where we're at the next thing i want to show is really cool it is that you can have modern javascript features without any configuration as well so let's do this we're going to make an object here and then in that object i'm just going to make up some properties or i'll say a is for apple crisp the light and then b is going to be butter cream and c is actually going to be a nested object for my purposes and so then we'll just you know chain it on cheese danish beautiful and then we're going to console.log that so first we'll just log you know the normal c dot cd so we're doing a regular chain these are properties that all exist i'm not to the super features yet and if we go back to home you'll see i'm just going to get rid of this log because it's silly but you can see we're logging out she's danish not surprising right but if you go into dist and we're going to look at the source file here and let's take a look at our console.logs can't type and you'll see that the code is very normal right keep an eye on this this console log right here object c dot cd nothing fancy no no fancy transpiling or anything right now if we go back to and i'm going to get rid of this one just to keep it clear if we go back here and let's say we want to log that out but we also wanted to log out something that did not exist let's say object dot f dot fa or something i don't know why the letters i chose are what they are but they are what they are now i'm going to do this cool thing called conditional chaining of this question mark i'll explain this in just a moment if you haven't seen this before so what this is going to do is normally when we i guess i should have showed that first normally when we try to access this we're going to get an error right i will show it first why not because this property doesn't exist and we're trying to access something on undefined which is obviously a big javascript no-no but what this conditional operator here does is it falls back safely and it says does this exist okay then does this exist and if anything in that chain doesn't then it will just come back as undefined so first let's show the error on type error cannot read property fa of undefined right and then i'm going to go back to having conditional there and look at that we got a safe fallback undefined now let me show you why i was having you glimpse that before in here notice that now we're in our bundle and this console log is pretty crazy all right so this is transpiling an action it's taking modern javascript features and using babel and um making some cross browser safe you know browsers that don't have this feature yet um just without any configuration at all and that's really nice well i gotta hand it to them for that one that that's really cool and just because i am a sucker for being thorough what i'm gonna do is i'm going to copy paste this because uh you might not know that this works just fine in chrome i'm just pasting that and run the code it works fine right what it's doing this for is something like ie which i'll dreadfully open oh gosh every single time oh go away it's so bad i'm gonna go to about blank so i don't have to look at that okay and then how do i do this again it's been so long f12 developer tools if you have to deal with this every day i'm very sorry um i can paste this code in here run it and you can see that we get this syntax error when we try to paste that code right now if we go back to i know i say right like you can answer me we go back to this and we oh no there we go again so much pain okay there we go so we're running our server which is running our transpiled code and that was the point i was trying to show is that this code runs correctly in ie11 so like i said no configuration and you've got some awesome cross browser support now i'll purge that from my memory so because i'm going to make some changes right here i'm going to do one more commit because i want you to see the diff here so i'm just going to say show modern oops js transpiling for that checkpoint okay so for a quick reference our package json here just has this one dev dependency that we've manually installed parcel bundler okay now what we're going to do is we're going to add some sass just to get straight to it so in my source i'm going to add a new folder i'm going to say that this is the styles folder why not and i'm going to add a new file and then i'm going to call this index.scss and to save you some time i will paste this in so what we have in here is we're just using this main bg here with bisque is the color lovely color and then we're gonna combine that with chocolate for delicacy to remember now this chocolate is using a sass variable just to show that we can i just want to point out that you probably wouldn't have a lot of value from sas variables when you have css variables but you might still like them so you know you do you and then we also have some nesting here that's going on just you know the usual sas stuff that you'd like now what i want to show with this is that i'm going to save this file but it hasn't been imported yet at all okay so the only file change we have is this but what i will do is i will go into go away i'll go into my index js file and we're going to import that in javascript so we're just going to import and then this is typically how you do it you're going to go to styles and then index oops index.css i don't know why vs code can never auto complete css for me i'm going to save that and you saw on the left here maybe that something changed right and if we go over to this a few things have actually changed and i wish i could have all tab to show you fast enough but behind the scenes the server here um went and ran some stuff real quick and actually went and downloaded sas for us added it to our package json it's not wild so let's see if that did anything whoa right pretty cool so uh this is our page as before and it's got all these styles already there if we inspect this um we can see this might be a little big for me but for your sake i'll bear with it that the body knows chrome does this cool thing now where it like shows us flex box it's kind of hard to see that you're hovering over it um so i've added flex um for demonstration purposes to this and you can see here that uh the background has been set there and it's already like you know turned that scss into css and that's why we just have this color chocolate here we're using a css variable but we this was a sas variable and it's been converted even though we're looking at the css notice that it says index scss and that's what i was pointing out before is it has source maps built in without any special config property which isn't that hard to set up in a webpack or anything like that but it's kind of cool that it just comes right out the back right out the box i mean so here we can see the original color was set to this text color and all that good stuff not going to go over source maps too much here you know it's just a way to see the original code if you aren't familiar with that so that we can troubleshoot easily in our own code so it was that easy we didn't even have to install sas i just made a sas file and imported it and it worked i'll also show you really briefly that say you didn't want to install it or import it in your javascript you can actually do the same thing in your index html with a link tag here so if we did you know link css we could then point to dot slash where are we at dot slash styles and then index.css and actually let me let me comment that out just so you can see there's no styles come back here comment that back in and you've got styles again pretty cool right and i guess i could have just showed you that the the link is here but check this out see how that name is different it's doing all of the stuff behind the scenes for us it's automatically building all those links for us and saying okay yeah you imported this in the html file and i know that when i get output that html file i need to reconnect that up to the bundled version which is going to be minified in a production environment so there's a lot of awesome magic behind the scenes going on that i wanted to point out so i'm going to put that back where it was so i would prefer to do it here but just know you can do that now while all of those magical things do come with it that we've shown one thing that it does not start with is browser prefixes so if you go over to this i was going to show flexbox to show that but actually now that i think about it i think that flexbox might be supported in a wide enough browser that the default you know can i use browser list is going to not auto prefix it so to make sure let's use a super modern feature here so i'm going to go into my index sas file and for the h1 i'll add this line these three lines i should say i'll put a break here so we're going to do a fun effect here and we're using this background clip which is very modern and to show you that actually we can go to can i use here and there's this background clip text just to show that and then when you hover over chrome you can see whoops right here you can see it is supported but it's kind of tiny for you only with the dash webkit prefix that's perfect we need a vendor prefix to test that and you'll see when we come over to our styles here that this doesn't really quite look right or maybe you like that but it's not what i'm intending so let's set up some post css to get that working so i'll start by creating a new file and say postcss.config.js this is where you'd normally dump all of your posts css config stuff of course and i'm going to do module.exports equals object and we're going to put a plugins key here and this is just a pretty normal thing if you set up post css is one of the main ones that you usually do and i like to do post css preset dash env which if you're familiar with auto prefix or this actually comes with it it's a bunch of uh presets that they recommend so now when i save that this is one of those times where nothing magical has really happened here we still just have parcel bundler and sas as our changes and nothing new besides that i guess something that i kind of don't like here is while all this stuff is really magical and cool that it's auto doing all this stuff for us right now we're trying to require something with the post css preset and v env and because we're so used to everything kind of handling it for us it's kind of weird when we don't really get any sort of feedback uh here that you know that thing doesn't exist it might be a lot to ask for though so you know whatever you figure it out so i'm going to add that real quick i'll do post css preset env now i'm not going to actually add post css which you would normally have to combine with it and before i install that i'm going to show you that's because if you go to our node modules here and i'll actually just do slash post css you'll see that we actually already have post css that just comes installed with parcel and i've tested that out it comes like with just plain old parcel not any other additions to it so they already have a bunch of stuff that they're including to kind of cover this but they don't happen to have this preset and i'm assuming that this is because uh you know bundle size browser prefixes can add the bundle size so maybe they opted to say that you should have to opt into that so this is kind of the first sort of config that we're really having to do and it's worth pointing out um because there there's a it's a really hot topic what is zero configuration in this world you know the parcel team has stated that you know they see it as you know the the majority of use cases not needing any configuration files consists of or accounts for zero config and some people are absolute in that and they're saying no if you have to do any config it's not zero config i don't really think it's that cut and dry um to me you're setting up you know config for your your own stuff you're not having to configure you know right right now um any of the the babel stuff or any of that stuff unless i want to opt into kind of customizing that my own way and i know parcel 2 is actually setting it up to where they're going to have a config file so keep an eye out for that so let's see now that i've installed post css preset env if i just uh oops if i just run start we'll see if it does anything look at that it just worked that beautiful so now we have this nice gradient behind our text and if we scroll down here we will see oops i'll be on the h1 you'll see that this linear gradient here not the linear gradient what am i thinking background clip background clip added the suspender prefix for us web kit background clip so that wasn't too hard but let's take it one step further with the fact that on our body we had this flex right here and it doesn't have a fallback for that and maybe i want support for that so what i'm going to do is also add a let's go down to here in the root i'm going to add a dot browsers list r c okay a dot is important or you can do config file with js and i'm going to do last two versions pretty standard here i could do one or whatever greater than 0.5 percent i'm just kind of pulling these common numbers out of my head and then ie 11 that's the important part so i'm going to save that and then i'll come back over to here and we'll see if it worked and you'll notice that that didn't do anything okay and so what you could do is you or you might think is you could just like rerun the server this is a common thing uh to see if it added that and notice that i just noticed my head might be in the way sometimes oops sorry it looks like it's okay well i wasn't in the way of that link but uh move this over a bit so this display flex still doesn't have any new webkit properties and i know that it should when it's trying to support ie 11. so this brings me to something that's kind of a weird little quirk that i've found it seems like saving this or saving any of like the entry points doesn't really get it to rebuild but saving this post css config actually got it to rebuild for me and check that out i just saved that i know you couldn't really see it but i pressed ctrl s and now i have all of these vendor prefixes and that'll just be that way from now on it's it's like uh the caching is might might be a little too aggressive it doesn't really know to check that unless you save post css config so there's a little gotcha for you and a solution for it so restarting the server isn't enough you have to actually go and save the post css config file which is weird because i added a browser's list file you know whatever so let's top this section off by adding uh css modules because i had a little bit of a gotcha there too and you know that's a common paradigm that people like to use so let's show how to do it now with the post css modules what we're going to do is i will add an additional h2 here just to get targeted and then i'll say css module example and then in my index.js i'm just going to be really silly and say let's store the h2 as document.query we're just going to grab an h2 and then we will say h2.classlist dot add and you know normally i could add whatever i want here and show that that class was was added just to make sure that you know we know it's working and then what i'll do is i'll make a file that is called css modules js or css let's call it module styles and i'm just going to make an h2 actually i'll make a class i'll make a heading and then i'll say z32 and color is rosie brown that's all i need and then um i will import that but you know we import that as like styles or something that we want to name it and we'll go up it's in this directory isn't it style slash module styles.css and then i can just pass that class in here styles dot and heading okay now i'll just really briefly go over this if you're not familiar with it you know not the purpose of the video to explain every single thing in there but really briefly i can spend a moment it's uh what you're doing here is you are making a regular css file but with css modules what happens is when you import it you can actually access all of these different like properties on it and you normally you wouldn't do it in this way this is a very silly way it's just a quick way to demo it but you would do it in like let's say react you know you could import it and put it on your jsx for example and that will automatically hash the class name so you don't have any scope conflicts and you can reuse the same class names over and over at like a component level scope that's as much as i'm going to go into it but what i want to show here is that you know when i reload this i just get undefined it's a class name so you know that's not that surprising can't automatic magically figure out every single thing we want to do so i will npm i d post css modules so that's the plugin that you usually have to use for post css to use modules that's a common way to do css modules npm start server back up saw it doing some module style stuff let's reload and notice it didn't do anything this is where the gotcha is going to kick in so the docs tell you that you need to go into post css config and i'll actually show you this in the docs in just a moment and say modules true and that's all you need right um then when i reload here it doesn't seem to have done anything it doesn't update that and if i restart the server reload it's not doing anything sometimes you have to like i said you have to save this post css which should have done it there you go one of the saves will trigger it it's a lot easier to see when you have it in two separate windows i'm sorry and you'll see that you get this crazy error post css eight for end users and um there's a post css plugin post css modules requires post css eight it's a lot of sample css and i'll just show that in the docs so you know that i'm not crazy if we go to css um what is it modules true oh here it is i don't know why i didn't find that when i searched it oh because i had quotes around it duh ah since this is json so yeah modules true right here kind of tiny there that's what they want you to have but it actually breaks your stuff unfortunately and that's because it's not necessarily parcel's fault here go back to that error so you can see while i'm talking about it so the issue here i've actually seen this on view forms for view three as well post css moved to post css eight um which was obviously a breaking change to move from seven and a lot of the plugins that you install like css modules by default are now paired with eight but parcel automatically installing post css for us installs seven so i tried to manually install eight but then it causes more problems with some of its backwards compatibility it's a real nightmare so the easiest way to get around this right now for me is to say mpmi d and post css modules what we got really quickly uh what we got when we installed modules was four and we want version you know any three so i'll do carrot three at carrot three okay now i'll do npm start again now that i've installed that let's see if it just works i might have to save it again and there you go look i've got my color my rosie brown and then here's what you really want to look at is this hashed class name so once you know it it's a really easy fix but it was very annoying to figure out so bleh so we've run into one of our first hiccups obviously with uh sort of a zero config thing but i don't really want to hold that against them for that one because like i said view three has problems with it as well though they do a bunch of auto magical config stuff it just seems to kind of be an ecosystem type thing where certain things are moving forward it would have been a lot easier i think if i was you know in something where i'm installing every single thing like i was in a webpack project because i would actually be choosing to install post css and all my other stuff wouldn't rely on that different version but not that big a deal in the end so so let's commit and move on from this one we did a bunch of stuff here we added a browsers list and then we also did post css and we added our sas we did all of that so let's just say add sas ocss browsers list css modules this is too long of a commit name but it's fine there you go so i think next ought to be typescript i just want to show that my server is still indeed running there you go and coming on back to our code what we're going to do here is i'm going to change the index html to point to index.ts now i'm going to have to change oh no that one has its own so i'll just change this one and when i save that it's going to get unhappy because that doesn't exist so let me actually i'll probably get mad either way so i'll just save it i'm going to rename this to a ts file and when i go into that ts file you can see this is just vs code if you ever name something dot ts it's going to automatically start giving you typescript hinting but what we want to see is did it build so we'll need to restart that because we changed some paths that didn't exist that's fine and look at that it says installing typescript interesting and if we go to our package json again look at that so it has now added typescript automatically for us so if we go back over to our index ts file um and i guess i should have showed that um you know the server is actually running again here uh we're still getting our cheese danish lovely console log but uh one thing that's really cool is notice this little hint here so it says property f does not exist um so it you know it's automatically detecting that in our object and we're getting some very nice feedback lovely typescript and this one of course does this is um you know something that you'd commonly deal with you know in in the ecosystem and then this error is just that uh css whenever you import in typescript it gets really mad unless you have type definitions for that there's a way to set that up and i'm not going to go over that that's out of the scope of this video but you'll notice something important here um there are these different errors in typescript particularly this one and uh it's still built just fine well that's because parcel under the hood uses babel to compile typescript and not the typescript compiler and because of that uh babel essentially does not do type checking the phrasing for that people debate what it essentially means is that it's not going to fail your build uh when types fail it just it's really just taking typescript and transpiling it javascript and not doing any checks on the types at all so this is hotly debated in the community in general for typescript but particularly in partial typescript there's a whole bunch of github issues where people are very angry about it and understand if they sell so parcel has kind of made this assumption for you at least in parcel one where they're kind of assuming you're treating it um i guess you would kind of say like a linter where your editor is providing all of the type hints for you and you if you want to actually fail a build you can fail it in your continuous integration with your prs or something like that so people can't merge code i'll just show you a real kind of brief example so you because you have typescript you could do something like tsc no emit and and or whatever depending on your operating system um you have to do this a little bit differently in windows but this would make it to where when we go to build let's just show it you know why talk about it when i could show it and camera build it's going to give you this type failure right here and it's just going to immediately fail oh actually ts config good thing i did that so in order to run that command you will need to at least have a dot json or whatever you want you don't actually have to have anything in that just kind of funny uh i'll just run a build and now you can see uh it failing on this uh module.hot except here and it also failed it should have filled on the other ones oh there they are yeah so your stuff won't build and so you could do that but really that's not great when you're you know running a server and automatically changing every save and all that good stuff it's only going to run right at the beginning of that so a lot of people are pretty understood upset about this understandably because um you know the the community of typescript you know wants that reliability for typescript to fail it needs to be an absolute source of truth that's like hey if i clone this down and i run it and it builds um then i know it's good because typescript so i have not used typescript very much with parcel for these reasons when i went to set it up i found all these things and it was kind of uh turned me away from it so maybe some people have found some workarounds that i don't know about you shouldn't take you know my word is law here this is just my experience for it and it's kind of the downside is that you know the the way that a lot of these um frameworks add typescript support is just through the babel or babel however you want to pronounce it um transpiling which is cool because it's fast but it kind of sucks because it doesn't actually do proper type checking so this might be a deal breaker for you um for me it is i i if i'm going to do a typescript project i'm probably going to do webpacks still maybe it's not a deal breaker for you maybe you're fine with just vs code giving you the hints the problem with vs code of course or any editor is that it's only going to show you the files that you see it's not going to show you all the files in the entire project unless you had them all open i think you've had enough of that rant i just want to give you some context around kind of you know what's going on with that because it is one of the first kind of limitations that i've hit with parcel doesn't mean that i wouldn't use it for other things but just currently i wouldn't use it for webpack and i also want to put it out there that the the parcel team knows about this and is said that they are working on changing the way that they're they're doing it based on community feedback and stuff so you know keep an eye out for some changes there maybe it'll be possible too you know without with all that kind of uh i guess a sort of negativity aside um we did get typescript up and running and compiling at least uh pretty quickly so that's pretty nice if you're just wanting to dabble in it and like i said if you're satisfied with the way it is then that's pretty cool so we'll just we'll check this off as add typescript and wasn't that neat that we just renamed the file ts and it automatically went downloaded or installed typescript for us super crazy now here's where the fun begins so we're going to add view to our app now and uh i should put a disclaimer out this is going to be view two um is at the time of the recording view three is out but it's on the next branch and support for it kind of iffy in different areas especially with the post css bugs that i had before and parcel so i'm just going to do view two for now and probably the most people would be the most familiar with that as at this point so what i'm going to do is i'm going to create a view folder separately here look at that nice little icon they gave me that's cute and then i'm going to make a uh an index.js file and i will also i'll just go ahead and make the app dot view file we're just going to make it a real simple sort of like a view starter here so this part i'll just do you know we're going to import a view from view and i haven't installed it yet keep in mind and i'm going to import app from uh the app.view is what we named it and then we'll just do you know the normal view we're gonna render um i actually don't know what h stands for in this context i've seen it put as like create element i'm not really sure what that is but whatever this is the way that the tool does it uh then we're going to target uh root right yeah let's do root so we're going to mount it to root i'll save that and then for the app view i'm just going to paste in some code to save you some time i should have done that for the other one but okay all right so we've got a few things going on i'm just going to really quickly go through this if you're not familiar with view that's perfectly fine i'm not going to go into every little detail it's going to be a quick overview and with if you are familiar with view then you should be able to decently follow along but i do want to go through it to show you all the crazy stuff that's kind of going on here so uh to start we obviously we we're making our view app and then we're going to uh render the app there doesn't have to be uppercase i almost messed up someone else probably saw that there you go it was like so obvious we're going to render this app this is just a normal format for it and then we have this template and you'll notice that we're using language pug for it so this is pug syntax and uh i i actually like plug a lot i used to use it a bunch but um whenever i'm doing view i kind of like it and um we're gonna have this counter variable that you can see and then we're just making a quick list and actually i am not going to be able to have this just yet but maybe i should show it i'll do i'll delete it for now because i will actually mess it up so we have a template language pug then we move on and we have a script and notice we're using typescript and we are of course getting the hinting here i have purposely said this counter i've said it to be a string but it's obviously a number so it's math and then here just really brief you know data we're going to return counter that's what we're rendering up here and then we have a mounted set interval we're just going to count very simple and then finally down here we're using stylus so i'm kind of just trying to get crazy and we're using scope styles and so i'm setting this up to where it's not just view but it's also got plug and it's got stylus and it's got typescript um you know all built into it and we're just setting up some basic styles this is stylist if you've never seen it before it's similar to sass okay so now that i've saved that let's actually take our pages we're going to take our about one and we're going to commandeer that we're going to set that to view since we're not doing anything nutty there and i guess i need to update the link review and then here this is an index html i'm going to say go to the view app yeah and in view we're going to need an element of root to grab and kind of you know inject all of our view app into we'll have a link to home still why not and then this should say view app goes here and then this about.js we're now going to go into the view folder and uh do index.js boom and let's see if our server held up through all that probably not oh it wasn't even running oh well see it says it really briefly said installing view i don't know if you can see that but i'll show you installing pug installing stylus hot reloading um so let's open our browser and take a gander here we have this link now go to view app ooh and it almost works but the styles aren't working but the code is don't worry i expected that i'm going to show you why so you can see that it's counting which is pretty cool right now you might think that the styles aren't working because stylus or something like that maybe my syntax is weird and you wouldn't be crazy for thinking so but it's not true this is a really annoying gotcha that i ran into and you know i'm in a kind of crazy world of combining a bunch of stuff but if you go into post css config remember how we add to add modules true for that css modules that actually breaks view and it's a known issue so i'm going to get rid of that and that's because they handle like they're scoping their own way i guess i'm not really sure but when you just like i said before sometimes you save it it doesn't work so what i found you have to do to kind of get it to bust the cache is close the server reopen the server and then we'll just go into the entry point and we'll save and i think that typically does it no uh save post css config there we go save that post css config that's the secret whoa and there our styles are all working we've got this lovely counter going on and we have a view app so yeah that css modules can't have that module's true in post css config if you're doing view and you probably wouldn't anyways because you'd be doing it the view way so i'm not going to fault them for that one but that gave me a lot of eggs but pretty cool right so we've got our you know our variables bg styles dark slate gray text aquamarine and then we're using them here just to kind of show stylus in action and uh just a real quick hit on this again um notice that this is an error in typescript but it's still building just fine just to reiterate that in view it's using typescript but it still has the same problem still transpiling with babel oh and how could i forget let's go back to the package json here let's actually do the diff and show that again now this one's pretty wild so you can see that it's you saw adding stylus and pug if you glimpse that really quickly but you'll also notice that it oh i don't want to open that ah go back here uh dependencies has been added and that's because view should be a dependency i don't really know that view hot reload api should be a dependency but they've chosen to put it there but view typically should and then this view template compiler and view component compiler these were all added and put appropriately in dev dependencies along with everything else i messed that up oh really you're going to edit that for me huh so uh yeah that's pretty cool once again um i'm i'm really blown away by the the magic of parcel and how you know just this one file having these references to these things that was able to pick all that up and just go ahead and install all those dependencies just fire away i'll wrap this one up by showing that our post css stuff is actually still working in view though which is good um so if we were to inspect this we should see let's do the where's this this container right here notice that we have these webca properties here still for flexbox um so it is showing that uh post css is still working and even though it's annoying for me i'm going to show you by fiddling with this again so i'll go to post css config and i'll just make this an empty object right and um i don't know if i have to restart the server for that i do so we'll do the old restart the server go back into the code save post css config just to make sure and then reload this and you'll see that those are all gone now the webkit prefixes are not there anymore so just to show that um you know out of the box view isn't coming with that we added that with post css and the auto prefixer so let me throw that back in there real quick shut down the server restart it'll get real mad when you do that as you can see it dumped a bunch of logs out and make sure that that's working again you got to go back in here and save after it's real tricky you get some finicky behavior but here you go okay well i think that wraps up a view for us let us segue by going back and putting this uh line in here that i had before this uh react app now we're going to drop that in our project let's commit this real quick and actually oh i need that to not be there during this commit because it'll actually break the build i don't know if you got to see that let me show you see it actually tries to look up um this page's react.html because we had a link to it which is kind of cool that it's letting us know that but it will actually break your stuff so i'll take that out while i commit this add view and i guess i'll put pug stylus because they came along for the ride oh let me undo that comma real quick do last command thought i added them all i guess i just barely changed that didn't i yeah that looks right cool okay now let's put it back in boom react time so for this we're going to do much the same we will copy this view html file i'm just going to paste it in there i'm going to rename it to react.html and then here in the file please go over to the file we'll change this text of course to say react app goes here we're going to have pretty much all the same stuff except we're now going to look in the react folder for the index.js and we're going to make it a jsx file just to show that that works without any configuration because typically in webpack you have to set up your resolvers for that so that will have us coming over here and building a new folder and we're going to make this folder uh react course and add a file in there index.jsx and then this is just your standard i'll write this out real quick import react from react you could do it with star as react that's how i should be doing it but i haven't updated my snippets and then um i why don't you do that i'm going to go uh react dom and i haven't installed any of it again yet no react installations yet oh we're going to have an app so we'll import app from dot slash app.jsx well it'll be shorthanded and then we're going to render and let's render that app and with the well the use get element by id this time here and we're going to get the id of root and because we don't have an app yet let's make that and app.jsx i'm just going to use a snippet real quick to get this done real fast we're not going to pass it anything we'll just have a div and then we'll have an h2 because we have an h1 on the page and i will make that is react running it's not really running it's just is it rendering should be what it is but now is our server still running here it usually won't be able to hold up to me changing file names around so i'll restart that and you should see it installing react doing some extra stuff too back dom okay let's reload this and we're on the view one and we made this link to react and react is running at least it's rendering right let's make sure by adding some state real quick it's one thing to transpile jsx but uh so what i'll do is i'll just uh i'll do imrus get that going there and we'll make that here and we just call it use date why not and i'll start it off as false and then what i'll do is i'll be really silly and on an h2 i will put an on click and this on click is just going to be an anonymous function and we're going to set state and we'll set that to the opposite of what our state is and then we'll change this to say oops ah that shortcut doesn't work that's so sad um we'll change this to say what is state what is date and then uh we'll render this date and but we need to turn it into a string because otherwise it will just you know false out and be nothing really simple app here right let's go back to here and see got reactivity it's like hard to do that without dragging now we come back to our code um you know the package json you already saw it doing this but isn't that neat in the dependencies it is thrown in here react and react dom so it's done that for us as well i'm kind of beating a dead horse at this point aren't i but i i really think it's worth mentioning how um each of these different frameworks it they've taken the time to handle and install things for you and quite frankly that's amazing so i think the next thing that i want to you know make sure works is images because typically there's some configuration to do that in any sort of bundler right like especially javascript or roll up it's not super hard but um you know you're gonna need them so i'm just gonna copy some images in here and all i've got is just a few different logos all right and what i'm gonna do is i'm just gonna straight up import this and say uh let's call this swc logo from and we'll do uh dot dot slash images slash and it never auto completes these for me unfortunately but we'll do this obviously logo.jpg and then we'll just drop an image tag here and for the source we will make it point why did it not backspace both quotes rude swc logo i'll get rid of that and i don't care about the alt tag right now obviously let's see if that loaded boom no config just got images working from imports okay so that was a jpg let's just really quickly change that to a png and see how that behaves and oh my goodness that is big let's go down here and set the width just to be lazy and set that to like 800 and there you go so you got a png loading right but can i do svgs spoiler again all right that looks the same right so let's inspect it and look it it's output this little file here dot svg so i guess that's a point to leave a quick note here these are all image sources which is super cool that they work but actually rendering svg code like the svg xml code into the dom so that you can change it with css selectors and stuff like that is always problematic for me and in a lot of frameworks especially i've had a lot of problems with it with react you usually have to have some sort of package that converts it to react component and the syntax isn't quite the same as jsx etc etc i've also had the same problems with parcel uh i had a hard time finding out how to like directly render it because if i just render you know swc logo right now it's just gonna be text it's just the path um so if anyone knows like an easy way to do that that would be awesome if you could leave a comment on that because i always struggle to find a good way to render out my species you get it you get it so bam bam boom there you go images cool let's make it commit um add react images react in images that was it now this really surprised me actually now this is cool so um so that we have all the great flavors of css going we've got stylus we've got sas we've got css we've got css modules we're going to put style components in here now and so what i'm going to do is i'm going to import style components from here and then i'm going to create a style component and i'm going to call it container it's just a div nothing crazy and i'll put one thing on it for now just so we've got it and i'll do display flex right i'm going to save that oh i caught it you can see it redoing some fancy stuff and before i go over to the page let's see look at that my mind was blown on that one the react thing the view thing those were all really cool but wow like just an import of styled components and you just detected that and installed it for me that's cool so let's uh change this to a container if you aren't familiar with style components i won't spend much time on that but they're a css and js type of format if you've ever heard that form it basically takes every sort of uh set of styles and turns them into a component so that all the styles are scoped to that component also a very hotly debated thing but i like them so go away so here we'll do uh you know i'm going to type this out just so you can see so um we can do flex direction column so you could do fdc there can you do df or display flex where's that i mean i'm just curious now d f oh you have to do d f l yeah okay anyways i i wanted to show this real quick that um you'll notice that i have syntax highlighting in here and also i'm getting like emit completion you know i can go pic place it doesn't have that one let me show you another one let's do bgc for background color we're gonna do midnight blue um then we'll do color is corn flower blue and then we'll do ffss this is really cool one that i like if you ever just want to do a quick uh sans serif ffss and so what i'm showing here um is that this is emmet if you're not familiar with it i have to do control space for that one for some reason and this works inside style components if you have i believe you have to have a vs code plug-in um so you can actually do p40 here and i've made you watch me type this up long enough so i'll really quickly do it but what i wanted to show was styled components there's this plugin ps code style components and this gives you syntax highlighting and kind of treats it as a language so that you can get the css auto completion for intellisense and all that stuff so you're going to want that if you're ever using style components in vs code all right let's finish this up super fast not much left i will do fc 64 here and then we just need to do an a tag and then we're good 28 for what i did and the color will be alice blue just so it stands out keeps with our blue color theme all right that's that now let's head on over to here and yeah look at that the most beautiful but it's all right so uh this is just to showcase here really that um you know we've got these hashed class names from style components it just works and usually style components works pretty easy because it's just javascript but it's worth showing and it's got all these vendor prefixes these actually aren't coming from both css style components comes with them so if you didn't have post css installed these would uh you know be here automatically but i'm not going to waste your time showing you that so let's add a quick link here we'll do it above the image so we don't have to scroll down so here i'll just do an anchor tag and we'll go we're going to go to um view.html just so we can bounce around and go to the view app and then i guess we also want slash index.html home and i i isn't this cool like you've really easily between look at that beautiful gradient you really easily between all of this um are just jumping around between all these different react apps through multiple entry points um or different uh javascript frameworks with a react app with a view app sorry i was reading the text and it got in my head you go to react app you go to the view app you go to the home and that's really neat it was pretty easy to set all this stuff up and a lot of it was real magical so wild i think that's pretty good let's commit that for a moment so we'll say add react um or no we added sound components we already had react right now let's really briefly this will be fast but i want people to know how to do this let's change it to typescript react typescript so all we need to do here is rename these files tsx and then we'll rename this now if you didn't have typescript already set up it would actually detect this and it would automatically install it just so you know and that's really cool the index or the react html we're gonna have to change that to tsx okay so there is one thing that you have to do here let's go back to index.css and you'll notice when you go into this vs code is actually telling you cannot use jsx without the dash dash jsx flag now that's because you have this empty tss ts config and when we where's my i thought i had on my clipboard when you paste this uh you need compiler options jsx react in order for that to work now that's all you need you go back to app it's working fine this will still be an error because that whole you know when you're importing images or css it doesn't know what type that is but it is now working and running let's make sure we change the file name so of course we have to restart the server uh what did i mess up app.jsx oh that's weird it's app.tsx and it should it doesn't need the extension it'll get mad if you do that oh it sorted itself out it was really weird i just guess i just have to save the file again it is i think it's just really aggressively caching this stuff to save build time which sometimes is annoying but i think you can disable that anyways there we go uh let's reload the page go to the react app oh and our app's broken last no by now oh i think i might not have saved that that's probably why i didn't update oh i'm sorry about that so here we go everything's working just fine and we still have state and all that beautiful stuff so that puts us done with that but you you might want to see just really briefly you know some of the actual react type script stuff working so this will be super fast i'll say typography equals a function that takes children and it spreads its props because we're going to need the action off of that and maybe you want to send class names or whatever and then here we'll do an h2 and we'll spread props onto it normally you shouldn't do this but if you're doing a component library you might that's getting a little long there isn't it no you won't format that for me can you do jerk okay so we have this typography and now we're going to swap out this h2 for that i don't know why i didn't change both my tags and you'll see that we get a typescript error here and it'll say property children is missing in type and then it's got the type oops on click any et cetera and that's because you know you need to do something like this however you want to do it react.fc to say it's a functional component and there you go so i just want to show that type script you know working in intellisense there same thing as before it's babel so it's not actually going to fail the build you get it oh so there you have it typescript and react so let's uh add all this stuff here we had to change this ts config that was pretty much the only thing and i want you to see that so that you know that that is a minimum requirement add typescript and react okay and i think a great way to wrap this up is to add svelte to top it all off here so we will go through this process real quick we're going to copy the react page we're going to paste that we're going to rename it as felt html you can get whatever you want of course and we'll go up here spelt app goes here i probably could just change that one word huh stop being dumb and um here we might as well put some links and we'll say we want to go to uh go to react app i'm gonna be lazy and just put view app whatever react view we still got our route uh i don't think we're going to need that actually i'll leave it anyways though and then here we're going to go to spelt and this is going to be index and don't forget that's just a js file coming up and then we can go over here to our sidebar and i will create at the source level a new folder and this folder is going to be spelt spelt start to type index.js put that in the right spot yeah it did um and then i also need to add another file here and that's going to be app dot say we're just going to use the same pattern and this stuff i will paste for you to make it a little bit faster okay so we're going to be importing the app this is just a normal way to set up um a svelte app we just target document.body and the only difference is we're passing a prop here but the name is felt then in our app spelt we will paste all of this code in here and it should install that automatically it might have let's check our package json to see if it updated it did not ah yes that's right so let me very first go over really briefly the code in here so you can see what it's doing and then i'm going to show you how spelt takes a tiny bit more setup not much but there is another gotcha so we have a script tag this is the normal business we're exporting let name and that is house felt is going to bind to that name or be able to pass that prop in we have a count we have a handle click nothing crazy we have some styles which spelled the scope as well and then we have this uh html here and we just have an on click handle and then you can see we're going to do this this cute little logic you don't really need to pay too much attention to but it's basically just to say how many times the the click was counted and to have a little face and you'll see it in a moment and then we have our links right and i guess that's i don't know why i put those in here i shouldn't even have those in here i should have them in here i'm a dummy and what's kind of cool i just want to show this is like let's say that you got rid of the button um you'll actually get some nice little helper stuff from uh automatically just with vs code and it will tell you that this thing is unused and i really like that about this build it's really dope okay so it's not working right and i'll just let you know even if we restart it it's not gonna make a difference okay this is one of the ones that well go over to here npm start it ran some stuff you know don't take my word for it i'll just show you that right i thought i'd put a link to spell now let me do that real fast react yeah why can't i type that such a weird word spell tap now see the monkey learned and i'll go to the spell app real quick and you can see it's not loading all right so what's going on here is we actually do have to install this one it doesn't auto detect it um and i might know why but we want to add spelt and then we need to add this parcel plug-in spelt and then also a parcel bundler i think it's just parcel bundler not sure why so we're going to install that and i will briefly show you in the docs if you come over to spelt there we go um they tell you to install these as well parcel bundle or parcel plug-in spell and then parcel bundler just so you know now when i run this though it's going to get upset um i'll just briefly tell you that this so what this is is uh it's kind of a funny predicament this also took me a little bit to figure out so this is that the parcel plug-ins felt uh the maintainer i believe didn't tag the newest version that fixes this error and it's from many months ago and so even if you do so i'll do mpmi-d um parcel plugin svelt and i'll do at latest okay i just want to show that when i do that and i go to my package json parcel plug-in spell is at 406 currently and multiple people prodded them to update the tag because they actually took the time and fixed the bug but they didn't uh the package is up on npm but it doesn't show up so you actually have to type it in manually and say 4.0 and there you go that's that and then when we do npm start now this was from a re uh say recent because it was like six months ago but so that ran go back over to here and there we go now it's working so you know before i move on i don't want to you know be crapping all over this open source dev obviously he's doing it for free we should be grateful for his work um but it it wasn't an annoyance that i ran into um just because they hadn't taken the time to tag it but you know life happens who knows what's going on in his life so thank you for all the work you do nameless soldier so oh hi spelt here we go and uh you can see we have this very upset face because we haven't clicked the button yet click the button this is now a jolly face and click through there you go you've got a spell tap you've got react app you've got uh you know a view app can't click things all the different things all sorts of setup and configuration in this and i was actually going to show tailwind with it but there are more of those post css eight difficulties um that like i said the v3 community had problems with it as well and they had it with tailwind and that's how i learned about it so i decided it would just you know lengthen the video too much and i think you get the gist i'll link this in the description just so you know but how you get it working is there's this post css 7 compatibility build that tailwind has because they talk all about it in this little article here like i said i'll link it and so it's a known issue it's not necessarily parcels full here like i said view has the problem as well and i'm sure other things do so i won't go through setting that up let's give you the link and with that i think we can call it here i think we've seen a lot of the power of parcel and how cool it is and i know parcel 2 is somewhere around the corner i thought about waiting for it but you know it's been it was an alpha for like a year and beta and half a year it's been a really long time they've been doing a ton of cool work for it there's all sorts of stuff to be excited about but if you want to get in and use parcel right now you can see that it's pretty dang cool i know we really breezed through a lot of content there really quickly um but i hope it showcased a lot of the really cool functionalities of parcel and maybe you'll be interested in using it for any of your projects i haven't actually used it as an entire like enterprise project yet but i'm really wanting to try that but i use it for development stuff all the time because it's just really fast to set up and i think it can get you really far so you know you might not want to worry about uh setting up all the cool crazy webpack stuff if you just want to kind of get going and start working on stuff right now and you know if you have problems down the line you can convert it to something else later but i think it's really worth using i hope you enjoyed this video and i hope to see you in the next video

Channel: Swashbuckling with Code

Views: 3,149

Rating: 4.9200001 out of 5

Keywords:

Id: D3EZ9dvjuHI

Length: 88min 12sec (5292 seconds)

Published: Fri Apr 30 2021