Django with HTMX Tutorial #2 - Project Setup

Key Takeaways

so in this video we're going to set up the project and we're going to use this GitHub repository which contains some starter code in order to do that and there will be a link to this below the video the repository is called HTM X contact Hub and this contains a jangle project it's called Contact Hub and there's a single application called contacts within that project so this contains the starter code and each video will have a branch within this repository now to get started you need to clone this and you can use the get clone command I already have that project Loc here and I've opened it in vs code and within that Parent Directory we're going to set up a python virtual environment so what we're going to run here is the python DM command and we're going to use the venv module in Python and let's create a virtual environment called venv HTM X and once we set this up we're going to take a look at the starter code and what's provided in that now you'll notice when that command completes we have the virtual environment directory here on the left hand side and we can actually activate that environment if you're on Windows it's in the scripts directory and it's the activate script if you're on Mac OS or any kind of Unix system it's going to be in a bin directory and you can use the source command in order to activate that now on Windows we're going to go to the scripts directory and we're going to run this activate script that will activate the environment and then what we have within the starter code is this requirements. text file so if we take a quick look at that you can see the requirements for the starter code here we have jangle version 5.1.3 and we're also using Jango extensions here as well which is a convenient package for Jang applications and there are some other dependencies that jangle uses here as well so in order to install those what we're going to do is we're going to CD into the HTM X contact Hub directory and we can run pip install and then the- R command and the file name is requirements. text that's going to install all of those into the virtual environment and once that's completed we can clear the terminal and there's two more commands and it's Python manage.py and we're going to run the migrate command to create the SQL light database if we look on the left this creates that db. SQL light 3 file and that's going to be the database for this project and the final command I want to run here is manage.py and it's run server and that's actually going to start the Jango development server and we can then take a look at the application on Local Host 8,000 so I'm going to go to this URL here and you can see here the amazing website we've got here in the Stalter code it just has a header that says contact manager now let's take a quick look at what's in the starter code so in the contacts jangle application we have a templates directory that contains a base template and then contacts. HTML extends That Base template and that is what contains this H1 header and if you look at views.py we have a single jangle view in this application and all it's doing at the moment is rendering contacts. HTML and we have an empty context at the moment we're going to build that up as we progress through this series and we're going to create some jangle views for htx based functionality now one thing we've added to the starter code in models.py is this user model here here so we've extended the abstract user from jangle and that's a custom user model that we're using in the application and if we go to the Jango settings.py in the starter code if we scroll to the bottom here we have the O user model and we're setting it to the user model in the contct application so that's the Stalter code it's very basic and we've overridden the Jango user model we're now going to add a couple of things to the project that we're going to need and that's HTM X itself as well as Tailwind CSS and Daisy UI and that's going to be your for styling the web application so let's start by installing Tailwind CSS and Daisy UI I'm going to go to the daisy UI documentation and da UI is the most popular component library for ta wi CSS if we go to the documentation at the top here there's an installation page and what we can do is install this using the Tailwind plugin and we're going to see an example of that towards the end of the series but just to get up and running we're going to start by using the CDN and note the warning here CDN files are not recommended for production and that's because you can't Purge unused Styles and the file size that's shipped to your clients is going to be very large but we're going to start out by using the CDN now to get started all we need is to copy these two elements and we can paste them into our base template so if we go to the templates directory here we have this base template and here we have the title of the page within the head tag underneath that I'm going to paste these in and that is basically the link tag here for the da UI Styles and we also have the script tag for two1 CSS itself both of these are coming from a CDN but as I said we're going to change that later in the series now let's quickly test these out by adding some Tailwind styles to contacts. HTML so we have this contact manager header here I'm going to add a class attribute and let's make it bigger here by using the text 4XL class and that comes from tail and CSS and we also have text success and that is a class that's added by Daisy UI and let's add some margin bottom to the contact manager as well we can do that with the MB for class if we go back to the browser now and go to this page when we refresh the page you can see the Styles have changed we now have that text success color which is a kind of green color that we have here and the text is a bit larger as well so Tailwind is installed and it's working and so is Daisy UI let's now move on and install HTM X I'm going to go to the HTM X documentation and again there'll be links to these Pages below the video HTM X is a package that allows you to access modern browser features directly from HTML and if you want to more about that you can check out this course here it's called HDMX for beginners and that's on the net ninja website and that's going to give you a comprehensive introduction to HDMX itself and to the basic and most important features of the package now we're going to build out an application from those features so let's get started with that and let's start by installing HDMX itself now again we're going to use the CDN for HDMX at the moment later we'll move that to a build process let's go back to base. HTML and I'm going to paste that in here so we have a second script tag and that's loading HTM X version 2.0.4 so now that we've set up the application and we've added Tailwind Daisy UI and HTM X we're going to get started with building this application and we're going to do that in the next video and we're going to start by building a jangle model that's going to represent a contact in this system so we'll get to that in the next video