Step by Step Guide on setting up wagtail codebase (linux)

Hello everyone, my name is Umar Farouk and I'll be putting us through on how to set up the Wagtail codebase on your local for contribution purpose and this is a screencast for Linux users. Alright, so let's get Let's get going okay so I will move on and open up my terminal and part of the preroges um of Wagtail is you need two core packages installed that is um python and node so I'm just gonna move on to check my Python version

and you could see I have Python 3. 10 installed here and the next thing will be me to check my node version See that so I have node version 18. 12 so we have these things ready. I'll move on to play my school and you need to ensure that you've actually installed the um virtual environment with your python or any other thing you just need to have a virtual environment which is something really nice so because you you you don't want to install the code globally you want it to be like you are working in a virtual world so basically that's the uh importance of virtual environments yeah mean

I I love the dark mode on the worker so I would just move on here and the step to start is um let's move on to creating our virtual environment. I would just say python dash mm then I'll call it Linux tutorial okay so this will be oops sorry for that Yeah, we are Linux users, so we know that it should be Python 3. Yeah. I made a mistake with that, so move on to play my screen so now once I said um CD Linux tutorial

I have that here Oops, I have the Linux tutorial I would just I'll just try to um I I don't want to use that again because it's a mistake. I want I actually make sure That uh I actually ensure that I have all my um virtual environment in a single direction. So I'm sorry for that. I'll just navigate into my virtual and so this is a directory, it's just a normal directory where I install all my virtual environments. So I'll navigate there and then type the command python 3-m vem then Linux

tutorial Yeah, so um let's wait while it gets installed. Alright, so I've successfully created um a virtual inf called Linuxutor S just ls and then you could actually see I have just I have two directory this is a Linux tutorial You can see I have it there. Now go ahead to clear my screen. So the next thing is we have to activate my virtual environment. So I will see the into Linux tutorial, which is my virtual environment, which I just created. So then now I want to activate it. Now run the command source bin activate bound. So you can see I have

with this indication it shows that I have my virtual environment activated for Linux tutorial. So the next procedure is we want to move on to the um installation so I will just I will need to clone the uh wagtail repo and the best way is it's best for you to always fork this repo to your personal repository before you clone it from your own repository because you setting up a Wagtail code base like this that means you are trying to make contribution in the development part so you always want to uh from the repo to your own personal uh repository

and then you clone your own personal copy from the switch that you could walk and push down then create a copy pull request I think that's nicer and simpler so I just move on and in my Linux tutorial which is the virtual environment I'll just run the command to say git clone the server and I'll run it so okay so it's taken it already I'm downloading and it might take a while depending on your internet speed. So I'll just go ahead to pause the um screencast and when it's done resume from there. Um okay so we are back. Sorry for the delay I kind of

Uh so it's almost done. We're on nine uh seventy-nine percent and uh it's moving, it's give it a few few more minutes to complete. Eighty-six, eighty-seven So it's kind of pretty cool, pretty s uh fast now. So um 93 % and Alright, so coming back to the docs, let's see what next. So the next uh step is we navigate into the Wagtail directory which we just cloned and then we run this command Alright, so let's check that. Is it done? It's on 98%. And then keep it going, keep it going. keep it going okay so it's done uh cloning it's done downloading

wow that's nice so we have this and then Next step is cd wactor, which is the directory we just cloned now, and from this directory we need to run a command. So this command pip install-e this so it helps to install the dependencies for testing and docs when I say docs I mean documentation so we just copy down this command and Okay, so commute paste and then so we're run so it's also going to install several dependencies for the um custom so it's stalling it's it's a really big library so it has

it depends on a lot so Right now we're installing these dependencies and then let's give it few seconds complete. So it's telling a lot, a lot of them , but yeah, so I think it's pretty fast on Linux then other um operating system distributions. So okay let's give it more time should take its time to collect all packages and okay right now it's installing the collected packages which we saw above

so Installing them gradually one after the other. So just give it a few more minutes to complete. Oh nice. So it's done. We are done installing the packages, and the next thing is We need to run our npm command which is this command helps us to install the tool which we use for building our static file. So just move on to paste that and Hit enter, chm C I so okay, so give it some time, press round installs our tools we need. These are node package tools. You know we've run the first two commands which are um

tools relating to the Python. So these are the reasons why we said you need a a Python installed and then you need the node install so those two period sites are the reasons why we could actually proceed with this command because this is a this is a command that runs uh with uh node this is npm stands for node package manager and the previous ones are the um Python commands where we run the peep is a Python package manager which is a peep it helps for you uh to download python packages and npm helps you to download load packages

Alright, so um if you are following this series and the previous screencast I made I already say you will Always get this. You will always get this for vulnerabilities, issues, and then the other issues. So we've actually had this and then Everything looks nice here. So the next part is we need to compile our static asset uh assets. So um the assets are the um static files which are the JavaScript and the CSS files. So once you start making your contribution you should be able to see that um You have a lot, a lot of SCSS

files and uh a lot of SCSS files which this command will bundle into CSS files and then you have a lot of JavaScript files which which this command helps you to work with. So um it's just run this and then we wait for a response. So At the end you could actually see few of the files which I'm trying to talk about. That files from our static files from our admin, from our admin directories, from the uh blog directories and so many. Alright so if we could analyze it you can see we have um uh we have uh See Wagtail, Contrip, Style Guide, Static SRC, Protestant Guide, SCSS.

So you see, it just builds an SCSS files It just build the JavaScript files, build JavaScript files, build tp. css files. So we have a these are the static files which this command helps us to build. We have a lot. We have a lot Yeah, so you see the admin. I told you we have some static files in our admin, which are the SCSS files and SNS. So just move on and then right now it shows that we have the We've successfully set up the Wagtail code base on our local. So to confirm that I'll then I'll just go ahead to clear my screen and then we move on to the next step of installing uh a water

uh site so we try to open this in a new tab and then this is the docs for installing a uh water in a new site so we could actually do take uh multiple step and then so the first command is you type in the work till start uh my site so let's go and say work till Start so Linux demo. So Linux demo is the name of our site. We put that so it has been successfully created and then the next thing is we need to um install the requirements for our site and then um

So I just put that pip install dash r requirements ftxt. So these are the uh requirements oops I should make the mistake so on creating this we've successfully created a Linux demo site so the next step is we see the we navigate into the Linux demo site and then inside our Linux demo site we want to install all pre-record sites of that site so we then we run this command to install that and um all right so it's currently installing and then we try to wait for it to Okay successfully installed we just ignore these two errors so the next step is we need to run our migrate command

and then the migrate command this migrate command helps us to create our tables and help us to compile our models here So when you start making your contribution you get to know a lot about your models and if you're combosant with the Django mode of uh building you know how you work with models and then so many files okay so it shows that we've successfully um run that we've successfully built our models then the next step is we need to create an admin yeah We setting up a site, then we need an admin. We need to know who is the master of all. So we run this command Python manufacturer create

super user which is a Django DC. Then we name it admin is our username then we call uh admin at gmail dot com this should be our mail and then our password Admin with this our password So you say the password is too similar. Do you want to bypass the password validation? Let's just move on to say yes So super user has been created successfully and then the next step is we want to spin up our server to confirm that our site actually works So I will just

uh turn my screen so that we have a NISA interface. Um but I'll be running this on port 7000 because I have um Have another application running on port 8000. So I will just run the command Python manager Pyron server 7000 If you are running, if you don't have anything running on port 8000, you can actually run this command directly and then by default it will launch on port 8000. But I don't want that so I move on to say this then this is what I have it's been spin up uh uh site is running on 7000 so let's try to check that so Just move on to copy the link and then

paste that so bam oh look what we got here I have my white tail site running on port 7000 and I could actually log in as an admin. So I could log in as an admin. So gives me supply my admin details, move on to supply my admin details. Then remember me. Yeah, you could actually remember me. So this is it. You can see welcome to the Linux demo water CMS. This is our home page. We could actually check pages. We don't have pages yet. We don't have images. We just have everything refreshed. So

this is it and I hope you enjoy the screencast. Thank you very much for listening to me again.