How to Deploy Wagtail using Heroku (Wagtail 2.5.1; Django 2.2.1; Python 3.6.8)

Hello and welcome back to another lesson on learning Wagtail. In this video, we are going to learn how to deploy a brand new Wagtail site, so not the stuff we have been working on, but a brand new Wagtail site to Heroku. Now for this you're going to need a few different things. You're going to need a free Heroku account. You're going to need the Heroku command line interface, the CLI, and I'll touch on that in just a little bit. And you're also going to need Python 3. 6 because that's the version we're going to be deploying using Heroku. Now before we get started, I just want to make this official. This is basically the video version of Kyle and Chris's blog articles uh from wagtail. io slash blog about deploying Wagtail to Heroku So I had mentioned that you're going to want the Heroku

CLI, and if you just go to this page, and I'll leave this link in the description below, but it's devcenter. heroku. com slash article slash heroku dash CLI. Does not roll off the tongue nicely. I'll just I'll just leave the link in the d description below. Basically you can download the installer for Mac or Windows. Uh I'm going to have to brew tap Heroku because I'm on Mac and I'm also going to brew install Heroku. And if you don't already have a free Heroku account, you're going to need one of those as well. So I just copied that command and let's install. Now this is just going to take a quick second Alright, that is done and through the magic of video editing, you didn't have to watch me wait for that to happen. That took uh about a minute or so to run. Also, as a heads up, you're going to need Git

if you don't already have Git. It is a requirement for Heroku. Alright, so next we're going to need to create a virtual environment. So I'm going to CD into my website. my websites rather and if I do an ls-la you can see that I already have a website in here called my site and that's from all of our other tutorials. In this one I'm going to create a brand new directory, mkdir, and I'm just going to call it Project title. Now this project title is going to be whatever your website is called. So I'm going to CD into my project title Clear that, do a PWD so you can see where I'm at, and just move the text to the top there. For me, I am going to be using PipEnv. Now you're going to want to create a virtual environment

using whatever you usually use. So virtual env, virtual env wrapper. You could even use Docker if you wanted to. I'm just going to use pipenv because that's nice and easy. So I'm going to do not pipenv shell, pip env install. Dash dash Python 3. 6. Alright, so that installed that. Now I just do pip env shell And now I am inside of my virtual environment. And just to double check that I'm using Python 3. 6, there we go, Python 3. 6. 0, although you should probably be using 3. 6. 8. Now the next thing we need to do is we need to install Wagtail, so it's pip install Wagtail. Alright, so let's take a look at Wagtail Pip

Show Wagtail. And we will be using Wagtail version 2. 5. 1. Next we're going to want to install Postgres, so pip install. Psycho PG2? I have no idea if I'm actually even saying that right. Okay, that's installed. Cool, cool, cool. Now we want to do Wagtail Start Project Title. And this is going to create a directory in here called project title. So let's CD into that project title now, and we're going to see. We have basically a Wagtail site starting from scratch. Now I'm going to open this up in VS Code and I'm going to want to find our base. py file. So let's do a search for base. py And we are going to want to change our database connection in here.

So where is our database? I probably scrolled like by yet, there it is. And so we want to change our engine and our name. That's really all we want to do. So this one is going to be Django. db. backends. PostgresQL Psycho PG2. And in this case, I'm just going to call this project title, and I hope I don't already have this existing on my machine, otherwise I'm going to use a different title. Now this name does not need to match your project title name, the name of the project that we started, but for simplicity's sake, I'm just going to keep it all the same so we all know that this is like the same. table for the same project or the same database for the same project. Alright, I'm going to give that a save, open up my terminal again.

Let's clear that out. And let's do create db project title Alright, so I have a database called Project Title. There were no errors, so I can assume that that worked. And next I want to manage. py migrate. Making all the migrations, installing Wagtail from scratch. That was a terrible song. Terrible, terrible song. Alright, migrations are done. Next, we can create a superuser. So let's do this. Instead of manage. py migrate, we're going to do manage. py create superuser. I want this to be Caleb. My email is going to be Caleb at

learnwagtail. com dot com, my regular password for localhost shenanigans, and I have a brand new user. And then lastly, I'm going to want to run server at 000 port 8000 And so that's running, and if I open up Firefox or you know whatever browser you want to, you can open up localhost port 8000. Cool, that looks nice. Slash admin. I'm gonna put in my username and password and voila we are in. So we got a brand new project installed super super quickly. Now this is all good, but Heroku needs a little bit more. Heroku

needs a little extra package in here So Heroku is actually going to be looking for some various packages, and instead of remembering what all those packages are, we can simply install a package called Django Toolbelt. So pip install Django Toolbelt. Nicely done. And then we want to put all of our current requirements into a requirements file. So I'm just going to show you which directory I'm in. I'm in the directory where there is a requirements. txt file, and all I'm going to do here is pip freeze, and then I'm going to put this into a requirements. txt file. And let's cat that out. We have all sorts of stuff in here. We've got everything from willow to pillow to uh

Django 2. 2. 1. That's the version we're using HTML5 lib, we've got Wagtail 2. 5. 1 in here. So that's in our requirements file, and that is absolutely necessary at this point. Next, we're going to want to create a brand new file to tell Heroku exactly what to use. So Let's create a brand new file and this one is just going to be I'm gonna save it real quick And I'm going to save it right beside the requirements. txt file, and this is going to be called a proc file, P-R-O-C file. Now this proc file, when we give this to Heroku. is basically going to tell Heroku how to run this project. Now I just pasted this line in here

and that is basically saying use G unic unicorn gunicorn. Honestly not sure how to say that one properly And uh just access the WISGI file. So this project title has to match the project title of your site. So mine is called project title. We've got a directory called project underscore title. And in here you can see that I've got a WISGI file. Now if your project title, your project is called something else, change this line or change this piece of the equation here. Just change it from project title to whatever your project is actually called. So if I was launching my site, which is what I cover in all the other videos, I would just simply change this to my site, and this directory name would be my site. So let's give that a save and close that. We no longer need it. And now we need a new file. And this one is going to tell Heroku

which version of Python to use. Now we want to use Python 3. 6. 8, because that's the latest one, and we are going to save this as a file called runtime. txt And you can see that in here where it says runtime. txt. Now if you are wondering what versions of Python can you use with Heroku? I will link this article up and this will show you the supported runtimes with Heroku. Currently it's Python 3. 7. 3 3. 6. 8 and 2716. Although I would highly recommend not using 2. 7 since that's not going to be supported for much longer. Uh 3. 6 is, I mean that's an okay one to use. That's the one we're going to be using. Uh if you can get away with it, maybe try using 3. 7, although I'm not entirely certain if this is going to work with Python 3.

7 right now. So that's untested. by me, but if you want to give it a shot, by all means give that a shot and maybe report back. Let me know. Alrighty, heading back over to our editor, let's open up production. py. We can see that this file doesn't have very much in here. So we are going to basically just put a bunch of stuff in here real quick. And I actually already have this in my clipboard, so I'm just gonna paste this in here, move that import to the top. And all we're doing is importing uh DJ database URL and we're going to get that config. We're going to set the default database and we're going to use HTTPS. We're setting allowed host to anything because we don't know what our Heroku URL is going to be yet. So we're going to say we can use anything.

Next, we're gonna want to create a brand new file again, and this one is going to be a git ignore. Git ignore And we want to put that right beside our runtime and our Docker file and our requirements. And it's just called gut. git dot gitignore. There we go. And in this git ignored, we're basically ignoring uh DS Store, which comes with basically everything on a Mac , SWP files, media, static, venv. and a bunch of other things. You can change this to be whatever you really like. We are really just saying don't commit certain things at this point. And we're doing this because we don't want Heroku to have everything. We don't need to give Heroku, you know, SWP files, for instance, or our DS store

files. We don't need Heroku to have those, so we we're just gonna say. Don't have them. We also don't need to store them in git, so why store them at all? Alright, next I'm gonna create another new file, and this one is going to be called dot env. So dot env And that goes beside the runtime, proc file, requirements, all that stuff. Yes, use a dot file. And in here we have our Django settings module. So we're basically saying. Enter the project title directory, that's our project title here, go into our settings, that's this directory here, and find our production. py file and use this one in production. Now our secret key is a secret key that we're going to want to get from dev. py. Now I'm just going to use this one. You should probably roll this.

Or use a different one, but I'm going to use this one for now. And if you ever need a Django key generator, I will leave that link in the description below as well. Alright, so in our env we have Django settings module and a secret key. Cool, that's really all we need. Close that and close that. And let's open up production. py and let's paste a bunch of new stuff in here. So we are going to need some extra stuff. We are going to want from future. Now this is a tricky one. This line, this line in particular, needs to be at the very top. Future is always imported before everything else. Now we're also getting the end from an operating system. We're basically getting it from our. n file that we just created. We 're assigning that secret key so that our Django instance will run properly. And

everything else is what we added just a few minutes ago. Alright, I'm gonna give that a save, open up my terminal, and let's just make sure everything runs here. So let's do do do do do do do where was it right there Managed. py run server zero zero zero zero port eight thousand Looks okay. I mean it's using the dev settings, so we're not really going to know if this is going to work or not, and we can tell that this is using the dev settings because it says right here, project title settings. dev Now a thing that I forgot to mention earlier, again in that n file, where it says project underscore title, whatever your project name is that matches this particular folder name

Change it to that. So again, for all my previous videos, that would be my site. For yours, it might be your website name. In my instance, it is simply project title because this is a demonstration. Alright, let's open up our terminal, let's cancel this, and let's do some git work. So first we need to init git. Alright, that's cool. So ls dash la and we will see we have a dot git folder. That's good news. Next git status We have all sorts of stuff in here, so git add, and we can do a git status again, it'll show us all the files that we're adding. And you can always sort of do a quick glance comparison review against your git ignore And we're simply going to commit this.

Git commit first Heroku commit. And I've got a fancy command here that allows me to see the git log nicely. Well, I mean if I make this smaller. Allows me to see the git log nicely in one line instead of the gross git log that we usually get with git. Maybe I'll leave that in the description too because that is a nice little command to have. Next we're going to need to create a Heroku instance. So Heroku create. Alright, I guess it created an instance. Now if you're unsure of what this is doing at any time, you can always just go to Heroku. com, Heroku. com.

And I now have an instance here called Desolate Forest 53241. Real memorable, I gotta say. And that matches Desolate Fortress 53241. Rokuapp. com. So that is simply where my site is going to live now. Next we want to push this. Now we're you don't need a GitHub account, you don't need a GitLab account. We just need to push this to Heroku. So we're going to do a git push Heroku Master. We're pushing things to Heroku. Let's go see what this is doing in here. So I've got a build in progress, that's good. Alright, through the power and magic of video editing, I just skipped through that so you didn't have to watch me install that.

But basically, everything is deployed, it says. And we can always check that in our browser as well. And it says deployed. Alright, cool. So now we have our stuff up on Heroku. We just have a few extra commands to run. So let's run Heroku. Plugins, we are going to want to install a plugin. So plugins colon install heroku -config Alright, that's installed. Next we're going to want to push this config, so Heroku config push. Successfully wrote settings to Heroku. Thank you, Heroku. And now we want to run some Python commands. So we need to create a super user. We need to do our migrations. Alright, so now we want to create migrations or run migrations rather on our site. So let's run Heroku.

Run Python Manage dot py migrate And this is simply going to connect to Heroku and then run python manage. py migrate for us. And if there are no problems with our application, the migrations will start running now. Okay, those migrations are done running. So let's clear that so you can actually see some text at the top here. We need to create a superuser. So again, we're going to run Heroku run python manage. py create superuser. And this is going to connect to Heroku and then it's going to say, hey, do you want it to be some strange username? And you say no, so I'm gonna wait for this to connect and then I will walk you through this.

Do I want the username to be U35601? Nuh-uh. I'll just be Caleb. Caleb at learnwagtail. com. Password. And once more. Cool, now we got a super user. And lastly we have one strange command to run here. Heroku ps scale web is equal to one. And this is simply going to ensure that at least one dyno in Heroku is running for our application. Scaling dino is done, now running web at one free. So we have one free dino running Now if we head back to our browser and click open app , ta-da! Look at that, we have a Wagtail site. Now the static assets are not loading properly, and this is because we're not using

Nginx to serve any sort of static assets like we like we usually would. In this case we're going to use something different. We're going to use something called white noise. So let's head back to our console, or our terminal rather And we are going to want to pip install white noise. So I'm using white noise version 4. 1. 2. And let's do a pip freeze, pip, freeze, and let's put that in our requirements file. Now with white noise 4, we don't need to change anything in our WISGI file, thankfully. All we have to do is change our middleware. So let's open up base. py And you might want to adapt this to be in production. py. And we simply want to add our middleware

below the security middleware, but above everything else. So in here we're just going to have. White noise, white noise, dot middleware, dot white noise middleware Alright, that's good. Let's go back to production. py and we're going to need to change. Well, maybe not change, but add some things. So the first thing we want to change is our static file storage, and I actually just have this in a clipboard over here instead of watching me struggle and type that. So we are simply going to change our static file storage to use white noise storage compress manifest static file storage. That is quite the name, isn't it?

And we also want to add Compress offline is equal to true. Compress CSS filters. So we've got some CSS filters in there. Compress CSS hashing method. Content. Alright, let's save that, head back over to our terminal, and let's do a get status. Let's get add all of those. Git commit. Adding white noise. Alright, now to deploy we simply do git push heroku master And this will build our source for us, and this will, fingers crossed, work, assuming I don't have any typos in here. And if it doesn't work, it simply just does not work. It's totally okay. But it looks like everything is running totally fine.

Alright, through the magic of editing once again, you didn't have to watch me do that, so that's great news. Now let's head on over to our browser. And let's simply refresh this page. And we will see. Ha ha! Look at that! We have a Wagtail site running on Heroku. So now let's go to slash admin. And the super user that I created was named Caleb. with a password of you know whatever my password is and we have an instance of Wagtail running on Heroku just like that So that is actually pretty nice to have. With just a few minutes and knowing a few commands, you can pretty easily deploy a Wagtail site on Heroku. Now this is a free instance of Heroku

as well. So, I mean it's basically a free site at this point, that's pretty cool. Uh you don't have to worry about server management or anything like that. And if you ever wanted to upgrade your version of Python, for instance, you could always go to where is our runtime file? Change it to 3. 7. 3 is what I believe it said in the runtime page Python 3. 7. 3, so you could give that a shot. Again, that's untested. I haven't tested that. I don't know if that works, but you can always give that a shot. And if it doesn't work, well it doesn't work. You simply roll it back Now there's just a couple other things I want to quickly go over here. The first one is let's take a look at Heroku help. We have a few commands in here. So let's type

Heroku. One sec here. Heroku, apps, and we're gonna put colon list and this will just list our application. So we have Desolate Fortress 53241. Now if I wanted to delete this application, I absolutely could do that as well. And I could do Heroku Apps Destroy. And let's just copy that. And this will ask me to confirm. Basically it's saying do you want to delete this? You're going to have to retype this or type dash dash confirm in order to delete it. All you have to do is type in again that name of your Heroku instance, hit enter, and it will be instantly deleted.

So, there's that, that's pretty cool. And there's one more thing we need to go and explore here. So, white noise is great for serving static images, and that's just all the stuff that's collected from static. But what if we uploaded a brand new image, right? So I've got this image in here called Cody. png and I click update. Looks like it worked, but if we go into our images, we'll actually see that the image does not work. And so at this point, you're probably going to want to use Amazon S3 or some sort of drop-in replacement. Digital Ocean or Wasabi Storage are two drop-in replacements for S3, which I think both are actually cheaper. Wasabi is definitely cheaper than S3. And you can go to this blog post, I'll link that in the description down below.

But this blog post uh will tell you how to use Amazon S3 to store your media files. And so now you basically have A great, in a sense, content delivery network or an object store to store all of your media files. And this image will start working. So you just have to follow this tutorial if you're interested in that. Otherwise, we are done. We have deployed to Heroku. Now, once you do this a few times, this gets a lot faster. And once you actually have it set up, deployment is one command away. All you have to do is git push HerokuMaster And all of a sudden you're deploying to an existing website. So you don't have to deal with fab files or Docker or virtualMs or anything like that. It's just all taken care of for you through Heroku. It's pretty amazing.

Alright, that's it for this video. I'm going to leave the link to this git repo that I've created in the description down below. So don't forget you can always check that out at any time. Instead of Writing all this code, uh, you can always just go over to my repo and just copy the little snippets of code that you need. And while you're there, I would really appreciate if you could just star that repo. That would be fantastic. Hey there, my name is Caleb Tallinn, I am a Wagtail Core Team member, and I just wanted to say thank you for watching this video about learning Wagtail CMS If you enjoyed this video, there are plenty more where this came from, all available on learnwagtail. com. And if you would like to dive into any particular subject you can always go to docs. wagtail. io. And hey, if you like this video, don't forget you can always share, subscribe, or leave a comment down below.

I love hearing from the community. And I look forward to seeing you in the next video.