How to Configure WhiteNoise in Your Django Project: Step-by-Step Guide

welcome guys to my YouTube channel today we are going to talk about weight noise I will be showing you how to configure your white noise to your jungle project white noise is a package that helps you to Ser your static files in your jungle project so the first thing we do is install jungle project and to do that let's open our command line our terminal right here here first thing we do is create virtual environment that is virtual andv remember EnV is is the virtual environment name you can see here it has been created the next step is to activate it so to activate it you have to run this command Source EnV remember EnV was our our virtual environment name if you go to Virtual environment name bin you will see activated so we are executing this script right here so hit enter you can see our virtual environment has been activated once you see something like this on your terminal this shows that your virtual environment has been activated successfully so the next step is let's install jungle install jungle give it a couple of minutes or less to install Okay taking long okay it is successfully in installed so the next step let us create jungle project to create jungle project you have to run jungle admin start project and give it the name of your project for me I'm going to give it as config White Noise White config white noise is the name of my project that I'm create creating so you can decide to give it any name you feel to give it so let's hit enter to create that project you can see here you have created that project and if you open that folder you will see uh other files that have automatically been generated by Jung so the next step is you have to to change directory into the project directory so what I mean is we need to be inside our project base that is you change it to CD and then now we are inside our project we are inside our project you we list the files you can see these are the files that were generated by jungle when you are creating the project okay you can confirm them right here clear okay let's now see if our jungle project has been successfully installed and created so to do that we need to run the server if it was successfully created there will be no errors here so you can see we have even given the link so if you go to your browser and paste that link there you you will see the install worked successfully congratulations so that means first we have installed our jungle successfully and created the project successfully the next step now we need to know what is white noise and why do we need white noise in our jungle project and how to configure it in our jungle project the best way so for me I normally like to read the documentation of any packages that I want to to use so uh we will going we will go to piie piie that is python package index piie python package index. org right here I will search for white white noise okay so you can see white noise is right here the First Choice let's click it you can see if you want to install it this this is how we will install it we we have a project description right here brief description on what is white noise and why we need it so you can read this to know that white noise allows your web app to serve its own static files making it selfcontained unit that can be deployed anywhere without relying on N Amazon S3 or other external Services okay you can see it at the end here there is document so this is where we want to go because documentation gives you more information about the package you want to use and how to correctly install it and and how to correctly use it so we will go to documentation the documentation they have given us um extensive description of what it is you can see white noise takes care of best practices for you for instance serving compressed content setting far future cash headers on content which won't change okay so things like our images those static images that we add in our websites and also our CSS those are the things that right noise will be handling so requirements you can see if you have python 3.8 to python 3.1 you are supported but anything less does not support and also it supports Jango version 3.2 to 5 .0 okay so the first stage of configuring white noise in our jungle project is let's install White Noise first of all we copy that and go to our terminal let let me let me stop the the server and clear and then paste it right there hit enter now it is it is installed so good to your project directory we need to deal with the settings because we are going to set our white noise so we are going to only interact with this file settings dopi okay then we go back to our documentation and scroll down you can see they give you specific instructions edit your settings.py file and add white noise to the middleware list above all the middleware apart from Jungle security middle so we will copy this white noise middleware exactly as it is and then head back to our our editor look for middleware list right here and then add the white no middleware just below the security midw like that okay can comment it out as well and say White Noise White Noise mid mid yes and then we go back to the documentation again and see what else can we configure this and if you want white noise to cash your files and also compress them you need to add this line in your settings.py so let's copy it and head back to our edit on settings.py file again add that line right here okay you can place this line anywhere these these in these settings py but I prefer to do to paste that line just below static URL or at the end of the file so for now I think we are set from the documentation I scroll down uh I don't see anything that we need to add unless we move to next okay right I think we are set so the next thing we need to to create a folder at the base at the root of project so let's call that folder static static static so the reason for this this folder this is where we will have our all static files s such as CSS create another folder inside that call it CSS another one JS this folder will go contain all javascripts and this CSS folder will contain all our CSS files you can as well add uh inside static you can as well can as well add images images images these are the files that don't need to change so we need to tell jangle get our static files from this folder which is static to do that we will add these lines static static files equals to remember this is list tell you at our base of our at our base of our um at our base that is the root directory of our our project inside static folder that is where you will get our static files you see this is root project folder and inside it we have static that is exactly we have told Jango that get our static files from this folder okay the last step we need to do is define static root okay static root so we will do that by typing static root equals to base directory static file so we want to tell them that once you have collected all those static files from static dump them into this folder okay so for this if I leave it like these these static files will be created at the base of our project you see so I don't want that I want it to be created inside this static okay so you can decide to leave it like that or point it to a different directory as I'm doing that is static static files so if I leave it like this these static files will automatically be created inside static once I collect the Statics so the last stage is we collect the static okay we collect the static python manage. py collect static okay you can see it has collected 126 static files and they have been copied to static static files so you can see static files was successfully created inside static okay so to confirm that our wiess is is uh is rendering any static files from this folder let's create an app and try to load the static into our HTML templates so to do that first of all we have to config to tell J to find our our templates let's go to do and say we want you to get our templates at the root at the base of a project folder that is say Bas base directory and then get it now a folder called templates templates okay so we create that folder called templates at the root of our at the root at the root of our project that is templates so inside this templates we need to create a base template which will be inherited by other by other by HTML templates so this is how you do it [Music] HTML okay and then let's generate a boiler plate HTML 5 can see here let me say title you White Noise White Noise Okay and let's say here block content block and block block okay so we have to use any files inside our our our our static we have to load those static here so to load it you have to say you have to say load static okay so that means any file that is inside the static will be loaded here if used okay so let's create an app let's say let's say jungle admin start up and say example exle example that is example and then you have once you create the app you have to add it inside the settings inside the setting come here and add it inside the setting and installed apps so let's call it example the name was example right here so let's go to example and on the views let's define our homepage so let's say Dev home let request taking request and return [Music] render request then say example home HTML so we haven't created this template yet so let's go ahead and create this template so to do that we go back to our templates and then create home. HTML home HTML we are doing this because we told earlier our our our Jango that get our all templates inside templates folder so that is I have created home HTML in our templates okay next so I created the base HTML remember I told you I created this so that we don't have to repeat this head body in every template that we are creating instead let's inherit all this from the base HTML okay so what you do is you extend the base book HTML that is extends extends extends B HTML and then let's say block content let's see and and block okay let's let's just say h h let's say H2 homepage homepage homepage so remember homepage is extending Bas HTML so basically anything within block content and block like this will be r standard inside Bas HTML block content and then block so let me comment this and say content goes here okay so the next step we created the view now we create the URL I normally like to create uh in every app must have its own URLs so let me get the urls.py and then let's see from Jungle URLs import path okay both part then let us import the views from do import views now let's create URL pattern URL pattern okay let's see Parts okay and [Music] Views views yes so path views. home we are importing this function we are using this function home so that is why we said use. home and the name is home and then we have to include this app URL into the project URL using include function so we go to um project URLs then me close some of these project URLs right here and then import include and then parts then say include [Music] include example example include include example URLs okay so this is basically telling Jango that you also need to use examples not URL as the routing so if we go back to our let's run our server let's clear run our Ser see python manage py server okay and then go to to our Ser right here you can see at first first it was like this but now it is L it's showing homepage that means it is R rendering this homepage that we just created okay so we want to to create HTML no not HTML CSS inside our static folder so let's say styles styles. CSS okay and let's style the H2 is let me call it let me give it a class let me say class home home class home so let's go to our CSS file and sty that home and say font let's say font size is 40 pixel and then let's see color is red okay for now if we refresh if we refresh here you can see it is not reflecting because we have not included this file inside our base HTML okay so let's include this file here okay so we will say link and then use the static static and point where we will find the file that we want to use so for example we want this styes CSS it is inside the stting we have already initialized it and also inside the CSS so it will be CSS styles do CSS okay so if we try to refresh we are not getting anything why we need to collect we need to collect but here on the server logs you can see we have 200 that means it is working so let's try to collect collect it again so we do p manage P collect clear let's clear the the first ones that we had collected that and say yes okay you can see the first one was 126 now it is 127 that means it has collected these stes now let's we run our server python MP okay now let's go to homepage that's interesting why is it working try to add type text oh yeah I had a mistake right here so let's say it's home home home home okay yeah you see it is it is changing so basically that is how you configure white noise so if I can edit here as well say let's text align Center go back here you will see changes so basically that is the best way to create that is the best way to create static files and also to configure white noise to serve them okay so that is the end of this video please consider subscribing liking and also commenting thank you bye-bye have a nice day [Music]

Channel: SnipherDev

Views: 47

Keywords:

Id: l9pwQSPucwc

Length: 27min 25sec (1645 seconds)

Published: Tue Jun 18 2024