Easy Frontend JS Workflow With No Framework

[Music] hey what's going on guys so we do a lot of JavaScript on this channel we do full stack nodejs react view vanilla JavaScript but for the most part when we do vanilla JavaScript it's it's a very simple workflow we just have one or two JavaScript files that we directly include into our HTML which is fine but you may want to build something that's larger where you have multiple files where you create you know custom components and stuff without having to use a framework so in that case you need some kind of application bundler and parcel is great for that you have parcel you have web pack I like possible a lot better I think it's a lot easier and you know much less configuration so we're going to create a boilerplate that you can use to create vanilla JavaScript projects that are you know more advanced where you can have different files so you can see in the source folder I have a main app j/s but then I have a components file so if you want to have some kind of component structure you can you don't have to do it that way but that's just an example and we're also going to include sass so that we can use s CSS files directly will be using babel which will allow us to use you know modern JavaScript and compile it down to backwards compatible JavaScript for older browsers and we'll be able to use the es2015 syntax the import syntax alright so let's go ahead and get started i'm gonna just open up vs code here I have an empty folder we're gonna start from scratch if you don't want to go through the tutorial you can just clone the repository I'll have it in the description and I'm open to people making pull requests because the way that I set it up with the components it isn't the best it's just kind of a simple way to do it but let's go ahead and get started here so we want to NPM in it I'm just going to add - why so I don't have to answer any questions and this will create a package dot jason obviously as you can see here and we have some dependencies that we want to install I don't really want to type them out so let me see if I can find them here they are so we have npm install' - uppercase D because these are dev dependencies we have the parcel bundler which is going to take care of bundling everything sass so that we can use as CSS files and sass babble so Babel core we have this babble plugin transform runtime and also core js2 so I'm gonna just go ahead and run that real quick and you guys can copy that if you want and this plug-in that I'm installing here let me just go to this page here so this is the transform runtime plug-in and and this is a plug-in that enables the reuse of babbles injected helper code and saves on code size all right and the we actually need to configure this in the babel RC file so if you've ever worked with babel before you're probably familiar with this file whenever you have any plugins you need to initialize them in that file so i'm going to copy this object right here and go back and you can see those dev dependencies were all installed so in the routes i'm gonna create a dot babel RC file here and just paste that in so we're just describing any plugins we're using which we're using this transform runtime plug-in and the only options we need here are core Jas and regenerator so let's get rid of that now core Jas we installed and we're using version 2 so we just want to put it to here and go ahead and save that and that should be it as far as configuring babel now for our file structure we're going to create a folder called public and this is where our HTML file is going to go so let's create an index dot HTML and we'll set this up real quick just say my app and here let's put a we'll just put a h1 for now and say hello world now the script that we want to include is going to be in our source folder so say so and then we want to go we haven't created it yet but we're gonna go up one level into source and then our app dot J's file so let's create that we'll create a folder called source and in here will be our app dot J s which is our JavaScript entry point so for now I'll just say console.log and in here we'll say it works okay so that's connected now what we need to do is create a couple scripts that utilize parcel one is to run a dev server just like you would with like you know create react app or view CLI and then one is to build out our static assets to deploy so let's start with the dev server here so we want to get rid of all this now we're gonna use parcel to do this obviously so we're gonna run parcel and we want to put the location of our our main entry file our index.html file which is going to be in public slash index dot HTML and then we're gonna have an output directory here so we want to do - - out - der and we're gonna call this directory development and when we run our server every time it's going to create this folder it's also going to create a cache folder now we want to set a port that we want this to run on so we'll do - P and then I'm going to run it on 3000 now one more thing I want to do is at the beginning here before we actually run this command to run our dev server I want to remove the development folder and the cache folder so basically when we run the server it's going to recreate these folders every time so let's run RM dash RF which will delete a directory with files in it and we're gonna do dot slash development double ampersand and then we want to also remove the dot cache folder that's going to be created so dot slash dot cache and then double ampersand and then it'll continue to run parcel and run the dev server now for the build and okay so for build we're just gonna run parcel build and you can run parcel goal you can install it globally and run it that way if you want but this is meant to be something that people can clone and use so we want to we want to do everything locally so we want a parcel build and then we need to put in our public index.html file and then we want to attach an output directory here which will be all of our static assets I'm just gonna copy reiax convention and call it dist and just add on here - - public - URL and then dot slash and if we save that we should be able to go ahead and run this so if we go down here we were on NPM run dev you'll see that over on the side here it created this development folder and then this cash for this dot cash folder and whenever we restart the server it's going to remove these okay and basically recreate them and you can see the server's running on localhost 3000 if I open that up we should see hello world and if I open up my console we see it works so that app j/s is also running okay so I mean just up to this point we now have a dev environment where we can create modules and all that good stuff so the next thing I want to do actually before we do anything else let me show you the build command so if I do npm run build what that does is it just compiles everything into static assets into this dist folder so if I were to open this dist folder if I reveal this in my finder here and I just open up index.html we'll see the same thing and we'll see it works okay so this is the bundled version of our app that we would deploy to a server so it's as simple as that to get set up and we can delete the dist folder it's going to recreate it every time we run npm run build we can also delete the cache and development folder I mean it would delete it anyways when we run the server again and recreate it so I'm gonna run the server again npm run dev you can see that recreated those files here and i want to should we do next let's go to app j s and i want to implement sass so parcel makes it really easy I'm gonna just create inside my source folder a folder called s CSS and in here we'll create a file called app dot s CSS which will be like our main stylesheet or our main sass file and I'm just gonna paste some stuff in here so pretty simple I'm just setting a primary color variable using sass and then just you know some basic styling we have a container and some styling for the header so I'm gonna save this and then in my app J s what I can do is directly import that sass file so I can say import dot slash s CSS slash app dot s CSS and let's go ahead and save that and the first time you import it you do have to reload to get the styling but you can see now I have that styling from the sass file okay so it's as easy as that there's no compiling it down to a CSS file I mean it's a it does all that stuff behind the scenes now as far as let's see our index.html I'm gonna get rid of this hello world and the way that I'm gonna do this is to have a div with an ID so for instance a div with an idea of header and then I'm going to use that as a placeholder for a head our components and then I'll do the same thing with we'll have a user component now the way I'm doing this isn't isn't the best because I'm not going to be able to reuse components like this but you could change things around so you can do that building like a custom framework or whatever isn't really the point of this video it's just to show you how to get this workflows so you can use packages and stuff like that but for now we're just going to go ahead and have these two divs here okay nothing inside them just the divs kind of using them as placeholders now in let's see let's go in our source folder I'm going to create a folder called components and I'm gonna create a file called header dot J s and as far as components in in this little I don't know this little application I'm building they're just gonna be functions so say header and we'll set this to an arrow function and we want to have a template using template literals so we want to use back ticks here and we'll go ahead and put in let's use a header I guess we'll use a header tag here and in here we'll have an h1 and it works sometimes in these template literals but sometimes it doesn't so we'll say my parcel app and then a paragraph see it didn't work there and you can even use like JSX there's a ton of stuff you could do you could bring in style components what I'm doing here is just something very very simple say this is a boilerplate for a simple j/s workflow using parcel all right so that's my template and then from this function i just want to return my template and then we want to export this so that we can bring it into another file so I'm going to export as default header and of course you could use a class you could create you know parent classes and have life cycle methods you can do some really advanced stuff now this header component I'm going to bring this into my app j/s here so let's go ahead and import header from dot slash components slash header and then we can we can get rid of this and we're just going to have a function here called app so this is basically our main function that's going to run and we're gonna grab from the Dom I'm going to use get element by ID header and set the inner HTML equal to our header function our header component and then we need to run this app so down here we'll just say init app okay so this is a very simple way to do things but you can see now we have our header here yeah it's got its styling from our app j/s we don't have the container around it so in the index.html I'm actually gonna wrap our container around these two components here so move those up and save and now it's in the container and obviously you can you can wipe out all the styling if this is just for an example okay now let's create another component for the user and I'm actually going to use an API for that there's an API called random user dot me where we can fetch random user data and I'm just going to stop the server real quick and install a cos okay so this is what's great about this is you can just install whatever you want using NPM and we're on the front end and we're not using any type of framework or anything like that so let's run NPM run dev and in components here we'll create a new file called user dot J s and this is going to be you know structured the same way we're going to import Axios though so we can use that to fetch and let's say const user and I'm gonna use a sink of weight so we want to label this a sink because Axios returns it promise so we'll say response equals a weight Axios dot gets and the URL is HTTP random user dot me slash api and what that gives us is an array with a single user by default so let's say const user equals and in res dot data it's going to give us an array in our an array called results and we just want the first item which will be a user object and then what we'll do is set the template and for now i'm just gonna set the template to just user and return our template and then i'll just i just want to console.log the data right here so console.log user and then of course we need to explore default user so that we can bring this into our main app file just like we did with the header so we'll bring that in user user and then down here we'll do the same thing we'll grab the element by ID user and set this to user now this does return the promise so we have to a sink a weight here so we'll have to label this function async now if i save that see get element by ID user my index.html I have an idea of user if I save it oh there we go okay so now it's just outputting user because that's what we have as our template but if you look down here or console logging the data we're getting back which is you know we have name property with first and last we have email phone all types of stuff picture with large medium thumbnail so we should be able to use that data in our component so inside user here let's get rid of the console log and let's add our template here and you can use HTML templates as well you could integrate those as there's like I said there's a lot of stuff you can do so don't think that what I'm doing here is the best way to do it so let's put an image here just do the avatar source let's see so we have the user dots and then there's a picture object and we want the large picture so if I save that there we go so we get a picture underneath that let's put a class of card body oops that's not what I want to do getting languages mixed up here div class card body and here we're going to have the we're gonna have an h1 and we'll put the users first and last name so we can get that with user dot name dot first and user dot name dot last so I saved that you can see we get the first it's always going to be a random user and then let's put a ul and a list item so we'll do the users email and then copy that down let's do the phone and let's do the location which is an object and then we want the city okay so that gives us the data now we can style this what I'm gonna do is go into my s CSS folder and create a partial so underscore card dot s CSS because remember we have it wrapped in a class called card and I'm just gonna throw that in there so pretty simple just gonna give it rounded corners and stretch the image out stuff like that and then we can bring that partial in to our main app dot s CSS I can say imports card and that should should show port card oh you know what I probably did what happened the last time yep yeah it made this into class name for some reason I think it's the react extension that I have alright so there we go so now it's styled and you can see we have a user card if I reload it's gonna fetch a new user and I'll put that now like I said the way that I did this isn't really ideal because if I were to put another div with the ID of user it's not gonna work it's basically just replacing that you could do like query selector all and go through or you could create a user's component loop through them and then output them in there there's just a lot of different things you could do but I just wanted to give you kind of an example of you know how you can set things up for a pretty simple app but it's it's not really this stuff isn't really important I just wanted you to have this workflow so that you can run your server you can install modules you can import third-party modules you can also import you know other files and it doesn't have to be a component structure or anything like that either all right so I think that's pretty much it as far as what I wanted to show you I do have again the code in the description and if I wanted to build this out I could do NPM run build and we get this dist folder and thus these are the files I would upload to my server and everything would work fine so in fact if I'll just show you real quick if I show this in my finder go into dist and I just open index.html on my filesystem you can see that it works and if I you know view my source code you can see that everything is coming from the JavaScript just like if you were to look at a react app or any single page application ok that's it guys hopefully you enjoyed this and again use it if you want if you want to make some changes to it feel free to make a pull request just don't make it too too complicated I want you know for the most part everyone to be able to understand it but that's it and I'll see you in the next one

Channel: Traversy Media

Views: 89,034

Keywords: javascript, javascript workflow, parcel, parcel javascript, babel

Id: 8rD9amRSOQY

Length: 22min 25sec (1345 seconds)

Published: Wed Apr 15 2020