django with webpack

hi this is Chunkin and I'm gonna show you how to set up Jango with webpack so here's the agenda we're gonna set up the very simple Jango app then we're gonna set up a whole page for it then apply the web pack installed web pack and configure it then we're gonna set up with the web pack dev server and I'll tell you what that is and I'm gonna and I'm gonna configure it for hot module replacement for JavaScript and then I'm gonna show you how to do it for CSS then after that how to get it done with react all right so I'm starting off with an empty directory all it has is my to do list and let's get started so I'm gonna create a I'm just doing getting it so I'll publish this on github after I'm done alright so I the first thing I need to do is set up a virtual environment so well okay so let me activate the one that I am on right now and then let's set it up so python B&B I'll just call it B II and B and then I'm going to activate that so it would be in the okay so I'm gonna set up by pip packages now first thing is to update pip and I'm going to install Django okay then I'm going to run Django admin and start up a SART project I'm going to call it hello and put it into this directory so now this is what it looks like I'm gonna start out an app called app pretty easy to remember and my great set up the database and I should be able to just run it so manage client server and everything is working so let's commit that that's in our to do list we we have a working Django web server and we need a few things to ignore in the forget all right so let's okay so get pad and get commit okay so the next thing is to set up let's go back to the to-do list the next thing is to set up the homepage okay so I'm just gonna go through this pretty quickly I need to create a directory app templates and I need a place to store the JavaScript static Jas and I also need CSS to so Jas and CSS okay so let's greet those files Oh before I do I need to tell it where to find it so if I go to the settings you have the settings file you'll see that they're installed apps and after sure that app is in there so it knows to look for the templates in that directory as well okay so let's go to the app templates and home Oh actually before I do that I'll there's another setting I need to do which is the URLs so when you hit the home page so I'm just gonna do this and it's going to use my home view which I haven't written yet and I need to import that so we're gonna create the home view get rid of everything and from django views generic views views generic import template view and we're gonna create a home view based off of template view and the template name is gonna be home that HTML that's all we need to do for this file so now we have to set up the HTML actually it's a template file so it's a templates home that HTML and for the body we're just gonna say hi and give it a name so span ID name we're not specifying it here it'll be provided by the JavaScript file then I'm gonna put a counter here it's right now it's just an empty div then I'm gonna import I'm gonna load it into JavaScript here and I do that by saying look in the static directory and look for GS indexed is and I need to since I music static I need to import that a load static okay so if I run this now it'll complain that index that J s is not there so we need to do that so app static J s index GS okay so what this file is going to do is let's see it'll get the name element by ID name and it'll also get the counter and get the count so that's going to be a let count equals zero I'm gonna be modifying that so when it first loads the I'm gonna set the name and I'll say alright Chomp and there's set an integral so that every so often it's going to okay this as a function counter inner text is going to be I'm going to increment the count first and then it's gonna be set and I want every one millisecond so every one second save it and let's run this okay so very simple home page back here reload and we see that everything is working okay so a quick set up go back to do we we did the the home page okay now we're gonna set up web pack but before I do that let's commit all this stuff okay so good home page now we're gonna install what that so webpack is is a node module so a node package so we need to set up note so NPM in it yes okay and well we see that there's a new file called package Jason okay we open this up this is what it looks like and NPM install web pack and web pack CLI the command line interface all right so if we go back here we see that the the packets that Jason file has been modified so we're going to set up the script so that when you type one build it'll run webpack okay and we'll just run right now so run build yeah we have some errors because we didn't configure this so the first well there's an error and a warning the error says that the entry module is not found so we need to set that up so we'll go here to the web so the configuration file it's looking for it's called web pack can click j/s and it's set up this way so it's module exports and we specify the entry point so entry is app static J s index that is now that dot slash in the beginning is very important because if you miss it then it's not gonna be able to find that file so that's very important do that will you run it so it's it runs but there's still a warning saying that the mode has not been set so we'll just go here and just apply the mode the mode is development back here run the build it runs clean so it it created a file called name dot yes and if we take a look at our if I don't get status you can see that there's some new files and directories the the dist directory is where it's it's being emitted to so if I take a look at this that's what it looks like and if I take a look at the file you can see that there's a lot of wrapper code around our code and our code is over here at the bottom so you know it contains our code with extra stuff so we need to set this up so that Django knows about this file so instead of loading up the index @gs so let's go back to the HTML file it's the app okay okay so here I'm looking for J s index that yes but instead it's been transpiled into main ideas so it takes all the JavaScript files because one JavaScript can import another JavaScript and it'll bundle it all into one so this is gonna just use main ideas but it needs to find where it's located because it's looking for static it's looking for static by default so let's go to these settings and we're gonna scroll all the way down to the bottom and there's if you read the documentation there is a variable called static files ders and this is the directory where it'll look so we're just gonna add disk to it as well besides the default of static so this way it knows to look in that directory okay that's all you need to do and let's run this sorry reload and it still works and let's take a look at the source and the source it's grabbing it from me no js' okay so that's webpack that hard to do that's webpack okay and let's commit this very simple setup so far we're going to ignore the dist and node modules so let's go back to our git ignore and the dist directory and the dot what is it called well there's no consoles okay add everything look and this was to set up the web pack okay now that we have this file one problem is that if we if we make any modifications we we would have to look for example in the index file if I change the name here then I would have to compile it and for it to actually see the change instead what I want to do is as I change this let me just bring it over here so if I change this to an X and I save I wanted to I want this cake to be refreshed with the changes without having to go and manually run the bill every time so that's where the web pack dead server comes in and it should be pretty easy to install you just do npm install and under the dev web pack dead server all right and we'll just run it seeing the webpack okay so actually that's not it I don't want the package at Jason I don't have okay so it package I've Jason okay this so we have to start and webpack death server okay let's just run this start notice I'm saying NPM start instead of run start okay and it says that the project is running under localhost port 8080 so let's go there so localhost or I could use 127 8080 and you can see that there it that it is a website and if I give it that package the bundle name mean that Jas it'll provide it so this is what we want we want the the Django web server to be able to pick this up so we need to configure that so let's go to these settings and we'll keep everything this the file storage the same but the static URL notice that here see close this okay look at the source the static URL looks like this but we could make it into an HTTP request to someplace else so instead of static we're gonna say HTTP one 27001 on port 8080 and we don't need this okay so I changed the configuration so I need to restart the Pachanga server actually I need to have both of them both of them around so I need to have the web server running so in p.m. actually yeah let me just add something at your NPM install node bond because I'm going to be changing the the configuration a lot so every time I change it I don't want to restart the web pack dev server so what I'm gonna do is in the packet that Jason when we started I'm gonna use node mod to monitor it and watch for the web pack config j/s and execute this when anything changes alright so now I just have to run it once NPM start and forget about it okay and then we need to run the web server manage one server all right so I'm gonna reload so see that it's working and put this side-by-side see let's open up the the index file and let's just change this to my name save it and you can see that the page got reloaded so this is good this is a good start so we have the dead server setup so let's go to our to-do list and we have that so let's just commit this actually I didn't need to stop that okay and see this is the whip packed dead server alright next on the list is the hot module replacement with j/s okay so let's see what if we if we thing do better actually it's let me just start this up npm start and and it's run server okay so you notice that okay you notice that whenever I change something it it did a full reload but instead what I want to happen is if I change just my name I want the counter to continue but before I do that let's take a look at our file our file has everything all here jumbled up together we have the name in the counter and it's better if we split the saw because really there are two components so first let's create a new file let's call it named GS and let's just take this code and this code anything that deals with the name and we're going to import that so import this directory name we don't need to specify GS okay and we need to create a file called counter dot J s and we're gonna take the rest of this stuff and we're going to import counter so it's just separate into two separate files okay so it reloaded and everything nothing has changed the you could see that it's it's still getting it from main that J s because both the the file tree has been bundled together and to mean that GS so everything is working the same way but what we want to do is do the hot module replacements so now when we go to the sea I'll go to the name and change it then only that gets changed and the number is still going the counter is still going to do this we have to enable hot module reloading so I mean replacement so let's go to our packet that Jason foil and we notice that we're running web pack dev server but we have to give it the option hot say that and see I think I need to rerun this because this wasn't a config change it's actually how it's being one okay so so hot is enabled okay which means that if I go to the index page actually nothing that's the name page and I'll just bring it side by side with here okay so if module hot this way if it's production then hot is disabled then it won't run this code so if it's enabled then I'm going to accept it okay I'm just gonna accept the self so let me reload to it it has that code now okay so I'm gonna change the name I save and it did a full reload okay let's see what the error message is when it got reloaded the error logs got cleared out so what we need to do is we need to go to the console settings and do a preserve log to see what the error message was so let's change it back to change it to a why okay so we have an error message the error says that it's trying to do a hot reload but it couldn't find it because it's making the request to our jangle web server instead of the web pack dead server and that's because when the JavaScript is run it doesn't know where it originated from because this the code is running from here from port 8000 so it thinks that this is where it should make the request but you have to tell web pack dub server that no that's not where it is it's at a different location and to do that it's in the web pack config and we have to specify the output and it is called the public path besides well all these options there on the website so if you could just go to webpack j/s org click on documentation and configuration all the information is is here so here's output and you can see how it's used and and public path is right here and you can read all about how it's used so this is okay it's so close this out all right let's just set the URL so it's 127 there's your one out port 8080 80 because that is where the web pack dev server is running all right so we save okay okay so you got reloaded just make sure that it has the latest code so I'm going to refresh and just make this half size okay so let's go back to the name change it okay so now we have another error the error message here says it failed to load because of the access control allow origin now this is a security measure this says that the the place where the JavaScript originated from is not the same place where it's running from and the your browser is not allowing it to be run so what we need to do is we need to tell the web pack dev server to allow anybody to run it so let's go back to the configuration and that is in the dev dev server under headers we have to specify a header for it and I'm gonna copy and paste that see actually where's yeah it's ok it's this whole thing here starting from here copy that and I'm gonna say star which means you could lend it from anywhere okay and let's make sure that this has the latest JavaScript code by reloading it fresh and let's go back and let's go to here and change it and I'm saving it and it worked so that's a hot module replacement with JavaScript it's pretty simple this is a very simple case because there's no state at all here so there's nothing we need to do so if we just accept it it'll just change this one thing and we're done okay so let's take a look at something a little bit more complicated the counter alright so for the counter what I want to do is the same thing which is if module hot then we're just going to accept it okay okay and here I'm gonna set it to thousand save okay it did a see it did a full reload because the initially it didn't have the module hot code in there so it now it has it so I'm gonna change it here back to 0 save it so now this javascript has the hot module hot code okay so you know something very interesting now we have to set timers because when this got reloaded it set up a new set interval but the old one is still there so what we need to do when we accept this is to make sure that the old one is removed okay so the way to do that is well first let me refresh this so it's at a consistent state unknown state actually I'm gonna have to reload it again because I'm gonna change the code so we we're gonna save the timer okay just make it bigger okay we're gonna save the timer and we're gonna say module hot dispose so dispose get gets called right before the old code so you still have your stillness scope of the old code and this gives you a chance to clean up all right so here we're going to specify a function and I'm gonna say clear interval of the timer okay so it'll clean up here and I'm going to fresh reload all right let's let's see let me just make the font a little bit smaller so it'll fit okay all right so I'm gonna set this mm I'm going to save and we we have the expected behavior so it cleared out the previous timer and then accepted the code which sets the the new interval okay so this is so that was that let's go back to our to-do list all right we got the hot module replacement with JavaScript all right so let's commit this should open up a new one all right so see this was the hot module replacement for JavaScript now we want to see how to do this with CSS we haven't created any CSS right now so actually I didn't see this I just saved it to do file so let me just add that back get pad and get commit amend okay save okay all right so let's go back here okay so that we're gonna we're gonna set up CSS for this so let's open up a file called app static CSS and we'll call it hello that CSS and for the counter let's put a little style to it so the width is let's say 100 pixels and the height is 100 pixels and let's specify the border of 1 maybe 2 pixels solid light gray okay say that and we'll go to okay the the template file and we need to add a class to this actually we don't need to specify a class we can actually use the ID instead of a class all right okay so we don't have to change that code at all the the template file now we have to figure out a way to incorporate this in web pack and the way you do that is by importing it so if I go back to the index page I've imported the name in the counter but I could also import that CSS file so it's in the directory above and it's CSS parent directory CSS and it's called hello CSS this will not work because it doesn't know how to handle dot CSS files so actually let's just actually you can see the error right here unexpected character you don't have a loader for this so the loader that we need to install we need to install two of them one is p.m. install the CSS loader the CSS the CSS loader understands what CSS files look like in parse and in parse it then we need a way to inject that CSS into the HTML page and that is done by the style loader and what the style loader does is it basically creates like a style tag and injects all that CSS okay and it's done through the JavaScript so we have that and now we have to configure it so it's no web pack and we need to create some rules here so module rules rules takes an array and the first one is you need to test with anything that has CSS hens in CSS and the loader for that is actually it's an array so because it's an array instead of saying a loader I have to say use and it works from right to left so when it reads the file it uses CSS loader but to inject it to put it into the document we need to say style loader say that okay so now let's see okay cannot resolve star loader there's star loader compilation failed let's see what's going on start yeah cannot resolve style oh i mistyped it style all right all right so now we have a clean build and let's see if it works okay and it does because you can see here that here's the box with the number in there modify the CSS just a little bit okay if I make this 50 and this 50 I save it okay we have the hot module replacement built-in so I'm gonna change the height to 20 look at that so we take a look at to-do list so now we have that we have the hot module replacement with CSS that's done let's commit this HMR with CSS okay all right so the next thing I want to do is to try to do something a little bit more complicated by adding react and by default when you install react it's not going to be hot module replaced it doesn't have HHM are so you can't just replace it so it doesn't get replaced I mean the modules so you need to install react hot loader for that so I'll just give any example so first thing I need to do is setup Babel because babel takes the JavaScript and compiles transpose it together into one so let's set up the Babel so it's the babel notre actually okay and just for reference babble loader will go to the github page and look at the documentation so when you do that it looks like there's a bunch of other stuff that you need to install so you think just this should be good because we have the other so npm install this okay so we have that by the way I'm using webpack for okay and this is an example of how to set it up let's do that alright so the rules for Babel I'm going to copy and paste this starting from there to here a little bit too much alright like to have it dangling curly braces okay alright so it'll look okay actually we don't need to look for EM so anything that starts with J s and possibly NX for the react stuff but for now let's let's not let's just say it's just Jess okay so we're gonna exclude those and there's the loader and the preset is it's set okay and let's just make sure that everything is still running okay let's go back here is this is the app crashed waiting for files for files change in file changes before starting so curly brace line 14 line 14 curly brace that is because I I put in the wrong place it should be up here and there you go and I think I have one too many twelve one too many curly braces well let's let's see Oh No compiled successfully so that's working and the Django server is still running so let's go there okay we don't need this anymore see okay close that out and reload everything is still working the same way actually a little bit better because it's using Babel to you do better stuff with JavaScript okay what this preset does is a preset env is to transpile the current JavaScript that you're writing in and down to certain browsers you can you can set option to say I want to target Safari or Chrome version whatever okay we have that set up and it was pretty simple but now how do we set up we act well when it's transporting the JavaScript you need to set a preset for it and let's let's take a look at we have loader loader look okay so we need to install the react loader I don't think this is the right one no this is this is not right this is the wrong one right npm uninstall reactor it is a babble it's a preset for babble so it's a preset react that's what we want okay so take a look at that and so the preset is is that so under presets we need to include that's env we also need to specify app Babel preset react and that'll understand react code so I'm going to know it's just like error messages here or a while reloading prevented I just reload still have errors we still have hours here failed babel loader preset react cannot find module oh that's because we have to install NPM install at Babel preset react okay go in here and type RS till we start okay and let's take a look here refresh all right so so now we have our transpiler understanding react and I'm going to take our code here and convert it into react so I'm just gonna kind of fast-forward through this actually I'm just gonna include the name well before I do that I need to install react so 10 p.m. 10 p.m. install react and react dog actually I don't even react on she don't even we still need me yeah we should do the counter too actually let's let's just keep it simple it's just through the name okay so now we made this into at least the name part a react component so let's see if there's any error messages there's a warning here imported as name but not found in the oh that's because we forgot to export it so let's go and export default let's go back and everything compiles fine and just reload this page and everything works as before it's a react component let's see what happens if we try to modify it so the usual method that we used was if module hot then module hot except okay so I'm gonna reload make sure it has the JavaScript code gonna change the name okay and nothing happens so in order for the react component to be hot you need to install here npm install react hot loader and when this is okay when this is installed all you need to do is just say import hot from react hot loader and instead of doing this you just have to say hot module name okay and it's just a full reload on this and now we can go here and change the X and you can see that it works so now you have hot module replacement in react so let's I think that takes care of everything let's take a look at our to-do list so we installed Babel we installed react and react hot loader okay so let me just commit this react okay I hope this was beneficial to you that you learned a lot and so see you next time

Channel: Chong Kim

Views: 4,852

Rating: 4.8139534 out of 5

Keywords:

Id: A2vEazcfJ7U

Length: 45min 50sec (2750 seconds)

Published: Sat Sep 29 2018