Django + Babel + Webpack + React Tutorial

hey guys what's up so this video is brought to you by Linode if you guys are trying to look into cheap and reliable web hosting turning your web product out there check them out they're a growing company they just recently opened a new data center in Canada they're opening new data centers all the time and I've been using them for eight years so check them out the link is in the description tab below hey guys what's up so in this video I'm gonna be showing you how to get started with django really quickly and this is about how to actually set up a modern django stack so not just actually doing like how do you set up django it's actually how do you integrate django with some of the modern UI tools that everybody's using so things like react but in addition to that you have to actually set up a lot of tooling in order for all that to work together so in this tutorial series we'll see how to get django up and running very easy from scratch and then also we're going to be using node to set up our UI project that will use react and i'll show you guys how to actually set up watchers and everything like that so you can actually use sass if you want although it is optional so first things first is that django is a popular web framework this was used it's still be used by Instagram it was used by Pinterest at first it's used by a lot of different things it was built originally around content sites so it was around like news organizations and from there it actually just expanded into this huge open source project which started to compete with Ruby on Rails it's still relatively somewhat of a niche market for web development compared to a lot of the other popular options out there but it is probably the most popular option for Python the issue with django that a lot of people have is that it is considered to be a monolithic very large web framework and a lot of people these days like to have smaller type of frameworks but ultimately as your project grows your framework is going to get larger but you know both if both frameworks allow you to plug and play and they're both very modular so I think both of them give you quite a bit of option and flexibility so this tutorial is actually going to focus on just actually setting up your modern stack and then from there you can then branch off into the individual technologies to say ok I need to learn more about SAS if I want to use that where I need to learn more a little about you know JavaScript pre-processing I'm using things like babel and webpack because I'll skim over a lot of that stuff but we'll see how to actually set it all up and get it working so first things first is in order to get started with Django since Django is Python code you have to have Python installed on your machine so you need to go to your pythons website if you have internet and then download the latest version for your operating system and then make sure it's installed and if you know that you'll know you have it installed correctly if you open up a prompt and then type Python it should actually you know do the interactive console so you can actually type Python code right in there and get the output so if that's not working it means pythons not installed correctly and most likely it means that you didn't add python to your path so if you have Python installed though you're good to go now a lot of people in this tutorial gonna ask about pip environment like a lot of Python hipsters I'm sure and I like pip environment great project but right now it's too buggy for windows for me to use it for this tutorial it just won't work not not correctly so in the I have this tutorials Django example folder we need something to write our code in and for this tutorial series I use Visual Studio code which you can also go to Google and just type that and download it alright so here's my folder here this Django example I'm gonna select this folder here to open visual studio code into that project there's not any files inside of here but in order to get started with Django we need to go ahead and install that so I'm gonna open up my terminal and then from inside of here there's something called pip which is the package manager pip environment eventually is gonna replace pip but for right now we're gonna use pip and I'm not even gonna set up a virtual environment if you guys want to look into that you can but for beginners just getting started that's more headache then it's probably worse so pip install and then just simply Django that's all you have to do all right so now in order to get started with Django we're gonna do something called a Django admin which because we have Django installed now it's gonna know what that is and then we're gonna do something called start project which is a command I could spell it right and then this is what we're gonna give it the name of our project because there's gonna be a blog example I'm gonna call it blog and this will spin up all that the starter code that you need and you can see now on the left hand side we now have this folder that has everything that we know we need in it there's this manage dot P why this is actually how we actually spin up the project so in my terminal if I go into my blog and make sure you're in the folder with the manage dot PI file in there we can now use that we can say Python to execute it so python managed that py run server this is how you kick up the Django webserver from inside Visual Studio code if you hover over the link and then ctrl click it should open it up into a web browser alright and here you can see that we have the working Django installation all right so now what we want to do to get up and running with a modern Django stack is we need to go to our root directory and we're gonna create a new folder that we're gonna call our templates and we need to modify the base code here because we're gonna add a file called the views dot py this is considered your back-end controller type logic area for python django because it follows more of an MV t Model View template kind of thing instead of Model View controller but anyway inside of your your views this is where your your actual logic you're dealing with your request response objects is gonna occur so what we need to do is we need to say from a Django dot shortcuts and pour render alright and then we're gonna go ahead and define our starting point for our application every endpoint needs have a request incoming request object parameter and then inside of here what we're gonna do is just say return a render and then we need to return the request object first and then the template and we're gonna go and create a index.html template alright so let's go and do that and then inside of our templates let's go ahead and create a new file and we'll create index at HTML and side here we'll go ahead and spell all this out [Music] all right so now that we have this file this template we need to go ahead and modify the URLs this is the actual routing all the routing occurs inside of here so it's going to create a new route for our starting point and it's just gonna simply be an empty string so you know the root directory will match this and in order for us to be able to use the views we need to go ahead and say from a dot which means we're directly import views and then we can go ahead and use that now we could say views dot index that's the method and then make sure there's a comma here because this is just a list here of different URL endpoints and Django alright so this is the views URLs and then we have our templates and then we need to go ahead and do one last thing which is modify our settings so we're gonna be using something at the top of the agenda starting project called base directory so make sure you know where that is and then inside this templates directory there's a template it's a it's a list and then there's also an object and then object has a key value pair of directories and that's a list of values that you could have for where Django should look for templates okay so like there's a stacking order you can look into that but anyway we're gonna go ahead and add the template directory that we just added so we're gonna say OS path dot join mother F my phone keeps going off sorry about that join and then we're gonna go ahead and use that base directory variable that you saw and then let's go ahead and say templates okay so it's the templates directory that can be found that we just added so we should be good to go I'm not sure when I'm in right now I'm gonna close that so go back to your root directory of the project so that we can do the run server and run our Django project again click on the root directory and then we get a big fat template does not exist alright and that's what happens when you actually put your templates in the wrong directory I wanted to put it in the root directory of the project but not inside the app that gets create as the starting app module of your Jenga project in a nutshell when you create a Django project we named it blog it's going to create an app or module called blog which is the project name you're gonna create different modules for all kinds of different things that you do you might have a module for movies artists all kinds of different things and ultimately though you're gonna have one outer root directory which is your project name and then a module that matches your project name and then a bunch of other modules most likely depending on how big your project is and then the way we set this up here is we told Jango to look inside to this directory and you can see templates is not sitting there so I'm going to drag it into the right folder and then we should be good to go and but that is the ultimate you know the the feedback you get from Django when there's a problem and it's kind of spelled out for you for instance this thing tells you the error exception type is template does not exist so it could not find template and then it tells you where it was looking so it looked into this this wrong folder no I so Python path anyway I don't know let's refresh it but now it works okay I don't know why I'd see ya that anyway it works alright guys so now we need to go ahead and get our static content working so that we can actually deliver CSS and and see all that working so inside of our root directory of our project we're gonna create a new folder called static and this is a convention that they use in Django so I want to follow that so in the static directory let's go ahead and create a CSS the hell is that I just copied and pasted it somehow won't that be CSS good all right so we have a CSS folder inside of this static and now I'm gonna create a main dot CSS file and we're gonna create our h1 and we're gonna turn it to a color of red so we know that it's working alright so now we have our CSS and if we go to our template what we're gonna do at the top is we're gonna use a a special like curly brace syntax here where we're gonna say load static and this allows Jango to deliver the actual static content so in order for this to work we do have to go to our static or I'm sorry our settings file inside of our main app and we're gonna add a static file directory listing so it's gonna be static files underscore d'oeuvres short for directory and this is going to equal a Python list so let's go ahead and use the OS like we did before path join and then we're gonna use the base directory same variable that we used before and then here we're gonna say that the static content can be found inside the static folder of our root directory which is right here so that tells Django how to find it so now our template though needs to go ahead and load the actual H the CSS file so it's going to do that now we're gonna say link relation equals stylesheets H ref is going to be pointed to this is where we're gonna use the another curly brace syntax where we can say static and then inside the static we're gonna go ahead and just point to where it can be found so we could say CSS main CSS and then close off that curly brace syntax so now we're loading our actual CSS and when you close the tag there as well so now we're loading the CSS and our temp so when we go to fire up the server again if everything goes well the h1 that we had before that used to be black should be red and when we look at it we can see it is red bone just like that alright so now we have static content working inside Django alright guys so a little bit about the history of the web and how to get Django up to date with the modern web development tools and this is where things get a little bit more complicated because what you've seen to date is just what Django offers out it out of the box but modern web development these days if you're gonna build the next inch Instagram or Pinterest or something like that they're using tools like babel to compile their JavaScript code they're using tools like webpack in order to tie all their their modules and JavaScript code together they're using things like typescript when they want to actually have type safety from within their development if that is considered a priority for them which is it's a considered a priority for a lot of major projects and that's where JavaScript really starts to struggle and then finally I'm also going to show you guys how to get set up with sass because a lot of companies these days are writing their CSS with sass and this is an optional feature though so if you just want the right raw CSS you can but SAS provides a lot of benefits that that you know CSS just doesn't have alright guys so in order to proceed from here what you're gonna need to have on your machine is no J us no J us is going to give us the ability to install things like react and all that other stuff that we need for our project Babel web pack and all that other stuff included all right so now in order to get everything up and running after you have no js' installed what we want to do is go to the root directory from within our static folder we're gonna create a new folder that we're gonna call our Jas but inside this static folder let me go ahead and just say open in a terminal so I'm inside my static folder and then from here what I'm gonna do is say NPM and knit and NPM is a package manager tool that comes with node that we can use to install all kinds of different dependencies we're gonna give this thing a blog project name I'm just gonna press ENTER for everything else now that I've done that we're gonna have to install a bunch of dependencies in order to get everything up and running and really you just have to kind of follow along here but we're gonna say NPM install - Andi for development and it's an uppercase D it stands for development because when we created a new project we now have inside the static folder this package JSON and this is going to keep track of all the dependencies that our UI needs so by saying - D this is going to say that the tools that we're about to install are all development tools and not something the actual project means just stuff that we use to develop it so the first things first is we need the Babel core project so Babel gives us the ability to compile javascript - older are two newer JavaScript we need the Babel a preset environment project this env for and in space and so the preset environment is actually going to give us the ability to write modern JavaScript and then compile it to older JavaScript then we need the babel preset react project for when we want to add react to the project alright and we also need the babel loader because if we're going to be loading javascript files that need to be compiled and babel needs to be able to compile them so it needs to babel loader project in order to do that we need a CSS loader so if we want to actually have CSS and multiple files and then load them as we need them and then that's what we need that for if we want to use sass we need to have node sass installed if we want to use webpack we obviously have to have that installed and there's also a command-line interface tool that we want to have installed for web pack as well so that's web pack CLI and then finally because we're gonna be doing well you know what that should be fine actually for right now all right now we're gonna go and press enter.this have to install a lot of stuff so it could take of you know several minutes so again because we installed all those with a hyphen D they all got put under the developer dependencies of our package JSON and it keeps track of like the exact package that we're using alright so next what we need to do is go ahead and create our web pack dot config and this is gonna be a new file it's gonna be in the root directory of our static so we're gonna create a new file called web pack dot config AS and the first thing we need to do is we need to go ahead and create a path variable that we're gonna go ahead and require the path module from node so just like that that comes with node by default so you can use that now we need to say module dot exports equals and this is going to be a JavaScript object we need to give an entry point which is an object and this entry point is going to say what the starting point should be so the starting point we're gonna say is gonna be the source index yes that's gonna be a starting point next we want to go ahead and say that we want it to be watch equals true that way we don't have to continue to like recompile our stuff every time you make a change another thing we want to do is add a dev tool of source map and you guys will thank me for this so if you guys have to do tutorials to get caught up on source Maps like there's no other way to debug modern web apps so this is something that web pack provides you alright so the next thing is we need to go ahead and out define the output object the output object is gonna have a few things we have the file name this is gonna be the name that actually gets created for us and by default because our name is app it's gonna be called app bundle j/s that's gonna be a name of our compiled J's file that we want but then we also need to tell it where it can actually find that file so it's gonna be able to find it by saying path dot resolve their name which is a shorthand for the directory of the route and then we're going to say put it in a dist directory so a distribution is what that is short for next we can go ahead and find a defining module and the module gives us the ability to do different things I use the babel loader that we installed earlier because remember I said when we want to import es6 javascript code that has to be compiled as its imported then you need to have your babel loader configured so that's what we're doing right now so we're gonna define some rules for this module to say hey whenever this rule is fired then we want you to implement the module so what we're gonna tell this thing is to use a regular expression we're gonna say any J's files that you encounter and it should be ending in a jf any J's files you encounter and we want to go ahead and say excluding the node modules because we don't want to be looking for that because there's a million node modules out there we want to say if you match the J s and you're looking to be loaded and we want you to use the babel loader that we installed earlier alright so that should be good for our module and then finally we need this to say that when you run into a javascript file that we want you to actually handle it with webpack so we're gonna say extensions and this is where you can say what extensions you want this thing to listen for in our case we're just gonna say JavaScript extensions all right so if we go back up you can notice that if we have our entry point if you if you look at the entry point it has a source starting point so let's go ahead and create the source folder inside of our static folder and this is gonna be the source of our UI and we're gonna create a new file in here called index J s and then here we're gonna use some new syntax which is the constant keyword of es6 which is a modern JavaScript syntax and babble the tool is going to take this syntax and it's going to like actually turn it to older syntax that works in all kinds of different browsers let's just go ahead and create a X variable and say this is a test all right and then we're just gonna alert X all right and then now what we want to do is go to our templates and since we're gonna be building an app bundle we want to go ahead and load that app bundle here and we're gonna use the shorthand static shortcut that we have here and we can go ahead and specify that we want this to be this is gonna be inside the dist if you remember app dot bundle J s alright and then let's go ahead and close off the script and this should be just before the closing body tag that way all the Dom elements were loaded before the JavaScript is firing all right so now what we need to do is we need to go to our package JSON and we're there's a scripts object here we're gonna add a new key value pair and we're gonna give the key the value of webpack or the key is gonna be webpack and the value is also going to be webpack this allows us to actually execute the local web pack that we have running so it's going to look for a web pack config so if we were to go ahead and run that now from our static folder all we have to say is npm run web pack and this will execute the web pack script and it will execute the web pack that we installed locally to our project so it'll look for a node modules folder and then now it created a dist file with the app dot bundle so if we go to our scripts here you can see that we've you know we're installing and referencing the app dot bundle here so if we go ahead and we run the server let's go ahead and go to a command prompt here and my backup a directory I'm gonna say Python managed server alright so he's gonna fire up the server again and now we get the actual result of our bundled JavaScript code so we're using webpack to actually bundle that javascript code if we look at the code that got executed for us or that got created if we go to inspect and look at our sources and we can go into web pack here because we're using source maps we can actually look inside of here and you could see the actual code before it got compiled but if we were looking at what the browser is rendering and we were to click on not that but we were to click on the app you could see that this is what web pack is building for us there's a lot more going on there in the actual code here is is actual code that got compiled to older standards that that older browsers still understand so you can actually write modern-day JavaScript code using babel but it will compile it to older versions but then you can also still put breakpoints and stuff like that from within your your console alright guys so let's go ahead and see how to get up and running with react so let's go ahead and kill this server by pressing ctrl C we're gonna go and make sure we're in the static directories to the NPM package JSON file wherever that's located so the static directory and we're gonna say npm install and here we're not gonna give the - d because these are two projects that we actually say you need to have in order for the actual application to be executed so this is the reactant react on project and this will give you the ability to use react and your project react and react Dom that can be confusing but essentially there are two separate projects I got spun off because like reacts are getting in the react VR and all kinds of others so because this actually got installed in a actual project dependency you're gonna see that it gets differentiated from actual developer dependencies and you're package.json all right let's go to our index touch a CAS file here and what we're going to do is we're going to add the ability to use react so we're gonna say import react from react and then we're gonna say import react Dom from react Dom alright so now we're using both of those developer dependencies what am I doing here alright import all right there we go alright so now we have both of those in the dependencies imported we need to go ahead and use the react Dom and we're gonna use a render function that's attached to that the render function has the ability to say you know what I want you to add whatever sort of HTML inside of here this is called JSX and you're gonna have to learn about JSX but we're gonna say this is JSX alright so you know the difference and then next we're gonna want to go ahead and say you know a document we need to pass an element that this thing can attach itself to because react is gonna build the HTML for us so where we have the h1 here we're gonna replace that with a div ID of route and close that off alright so now that we have the div ID of route react is gonna go ahead and attach itself to that alright guys so that should be it you should be good to go from there so if we go ahead and kill the web prac web pack process make sure you run it again so it compiles the project it should compile a compile every time you make changes if everything is working correctly though and if we go back to our projects root directory and run the Django server again we can now see that the is JSX is being rendered its using the static content it's using it within django Django templates Django framework everything else this div ID root everything from within it is actually rendered via react and you can see when we actually have the react dev tools configure it from within react chrome are not react chrome chrome you there's a chrome extension that you can install for react development also Redux if you want to use Redux with react but anyway you can see here that it recognizes that okay this this is JSX that's actual reaction I owed element so from here guys what you need to do is you need to branch off you can actually go to my website and learn more about react or other web development things that co.com there's also all kinds of free stuff go to reacts free website there's all kinds of documentation there that's going to get you up and running on react you're also going to branch off into all kinds of different things as well so with node most of what you're going to do from here is going to be building JavaScript react modules you're going to have different Django end points that have Django templates that are going to be rendering different react modules that you're building I even have tutorials to show you how to set up multiple modules from within a web pack config so you could have like ten different modules from one different project from one watch command but anyway guys let me know what you think and thanks for watching thanks for all the support make sure you guys subscribe and have a good day bye

Channel: Chris Hawkes

Views: 8,391

Keywords: chris hawkes, Django + Babel + Webpack + React Tutorial, django babel, django react, react tutorial, django for beginners, python django, python tutorial, babel & react, django & babeljs, django webpack, webpack & babel, babel tutorial, django webpack tutorial, webpack django, react django, reactjs django tutorial, react + django, react for beginners, react django course, react django crash course, react babel crash course, babel, react, webpack, webpack tutorial

Id: Mx3ChaYA0Gw

Length: 28min 42sec (1722 seconds)

Published: Sun May 05 2019