DEV Community: Dennis Ivy

Solving CORS errors with Appwrite

Dennis Ivy — Tue, 30 Jan 2024 17:58:56 +0000

I want to address an issue I've seen popping up on Stack Overflow and the Appwrite Discord server and address some of the reasons you may be getting this error, then walk you through some of the steps you can take to try and resolve it as well.

The error message you'll see in your console when trying to make a request to an Appwrite backend will look something like this: Access blocked by CORS policy.

Understanding CORS

Before we start debugging this, let's talk about what a CORS error is.

Without diving deep into the topic, CORS (Cross-Origin Resource Sharing ) is a mechanism that allows a server to specify which origins can access it. By origins, I mean URLs.

Site A, our server sitting at myapi.com won't allow request coming from site B, which is our client app sitting at myfrontend.com.

This happens because our server has not added site B, myfrontend.com, to its list of allowed origins.
Any request coming from a URL that is not listed in our server's allowed origins will be rejected by our CORS policy.
The solution in this case would be to simply add myfrontend.com to the list of allowed origins.

CORS is crucial because it provides a secure way to make requests across different origins.Without CORS, any website would be able to make requests to our server, and this would lead to major problems.
Imagine a malicious third party making a website myfr0nt3nd.com that key logs your user name and password, before making requests to your backend to validate the combination.

Why you are getting a CORS error

Now let's try to figure this all out in the context of Appwrite and why you may be getting this error.
I have listed three main reasons. If more arise, I will update the article to include them.

Origin not set in Console
Origin is set incorrectly
Bad ID on request

1 - Origin not set in Console

First, you'll want to check your Appwrite Console to make sure you have added a hostname and are making a request from the correct hostname.
Make sure you have added a platform in your Appwrite console by going to the Overview tab, select your platform or adding one if you have none, and then ensure you have added a hostname.

A hostname is simply the domain you will be making the request from. In development, this will most likely be localhost. No need to add a port number or protocol here.

2 - Origin is set incorrectly

The second issue I often see is a hostname that is not properly configured. This is usually a typo or, more often, a mistake made when switching between a local domain and live domain. Developers will often deploy their website and wonder why they are getting this error, only to find they still have their hostname set as localhost.

So if you find this is why you were getting a CORS error, you have a few ways of solving this.

Update hostname each time you switch between localhost and live URL. This is not ideal since you would be switching back and forth constantly.
Add a wildcard to allow requests from any origin - Not secure
Add multiple origins - This can be done by adding another "platform" and simply specifying the second and third origins as you add them. - Recommended

3 - Incorrect ID on request

This one happens because of an improperly configured request, such as a typo when specifying a project ID. For example, when using the listDocuments method,
if the project ID is set incorrectly when the client is initialized, you will receive a CORS error.

Without diving into the details about how CORS works, the problem occurs when the browser tries to check if the origin is allowed.
The request returns a 40X response, so the entire CORS check fails.

Other things to consider

In most cases, the issues people face have to do with one of the above reasons listed and can be solved with the given suggestions.
However, if you are still running into issues, I’ll keep an ongoing list of other possibilities and things to check for.

Disabled CORS in browser. (I’ve seen people have this issue with browser extensions)

Additional resources

Visit appwrites documentation, Discord server, YouTube channel, or Threads page to find more resources on this topic.

Learn more from documentation

Join the Appwrite Discord server

Follow the tutorial on YouTube

Search past support threads

Using HarperDB With Django

Dennis Ivy — Thu, 18 Aug 2022 17:18:00 +0000

Before you try to use HarperDB in your Django project there are some trade offs you should consider. I wanna cover some of these first and then if you still decide HarperDB and Django are a fit, we'll get into the "how to".

If you're reading this there's a good chance you're coming to this article as a participant of my August Code Battle Hackathon so I will write with those participants in mind.

Tradeoffs

I'll start by saying that at this point in time HarperDB and Django are not exactly suited for each other. Many of the issues are similar to what I said in my video & article about why MongoDB and Django are not a fit, but luckily for HarperDB its in a much better position.

With MongoDB the biggest issue is that there is no database driver for Django and there hasn't been a succesful implementation of converting Django queries into NoSQL queries. As a result of this, you lose A LOT of the features Django has built.

HarperDB has a simular issue. There is no database driver at the moment so we run into the same issue we had with MongoDB. In HarperDB's case it's a SQL & NoSQL distributed database so building this driver is not an impossible task. Lets hope they do it soon ;)

Meanwhile, consider the following:

No more Django ORM — With no database adaptor we'll have to use the HarperDB python package instead of the Django ORM.

No More Admin Panel — Without an adaptor we cant run the proper migrations we need.
Database Connection — The DATABASES connection object in settings.py does nothing for us without a database driver.

No more migrations — Cant run migrations without a database driver.

Authentication & Models — This part I am still unsure about. If we are no longer using the Django ORM, how will authentication work with the user model? This part may have to be re-written from scratch.

My Suggestion

Use FastAPI, Flask or Custom Functions.

See "FastAPI + React JS App With HarperDB Tutorial"

If you choose to use a lightweight framework you'll have the flexibility you need to make whatever database connection you want. You could also bypass building a backend all together and try using HarperDB custom functions to build an API and connect to the database directly from your frontend.

How To Guide

Source code

I'll assume you already have a HarperDB instance setup with a ready database and a blank Django App ready to go. If not, you can follow me in setting this up in the video tutorial for this article

1 - Install HarperDB Package

You can install the HarperDB python package here. This package will give us the tools we'll need to connect to our database and make queries.

pip install harperdb

2 - Connect to Database

Let's make this connection in settings.py just above the default DATABASES object.

#settings.py
import harperdb

...

DB = harperdb.HarperDB(
    url=<YOUR_HARPERDB_URL>,
    username=<YOUR_HARPERDB_USERNAME>,
    password=<YOUR_HARPERDB_PASSWORD>
)

3 - Query Database

We'll start accessing data in our views by first importing the DB variable from settings.py and then accessing data directly.

#views.py
from django.conf import settings

db = settings.DB

def index(request):
    devs = db.search_by_value('hackathon', 'developers', "id", "*", get_attributes=['*'])
    context = {"devs":devs}
    return render(request, 'base/index.html', context)

Now to render this data in our template you would treat it like any other queryset passed through our context dictionary.

<ul>
{% for dev in devs %}
      <li>{{dev.name}}</li>
{% endfor %}
</ul>

4 - Adding CRUD

Return Single Item

def dev_profile(request, pk):
    dev = db.search_by_hash('hackathon', 'developers', [pk], get_attributes=['*'])[0]
    context = {"dev":dev}
    return render(request, 'base/profile.html', context)

Creating Items

from django.shortcuts import render, redirect

#....

def add_profile(request):
    if request.method == 'POST':
        data = request.POST
        db.insert('hackathon', 'developers', [{"name":data['name']}])
        return redirect('index')
    return render(request, 'base/form.html')

Updating Items

def update_profile(request, pk):
    if request.method == 'POST':
        data = request.POST
        db.update('hackathon', 'developers', [{"id":pk, "name":data["name"]}])
        return redirect('index')

    dev = db.search_by_hash('hackathon', 'developers', [pk], get_attributes=['*'])[0]
    return render(request, 'base/form.html', {"dev":dev})

Deleting Items

def delete_profile(request, pk):
    if request.method == 'POST':
        db.delete('hackathon', 'developers', [pk])
        return redirect('index')

    dev = db.search_by_hash('hackathon', 'developers', [pk], get_attributes=['*'])[0]
    return render(request, 'base/delete.html', {'dev':dev})

And thats it for the demo!

Build A Digital Resume & Host For Free

Dennis Ivy — Wed, 10 Aug 2022 19:20:00 +0000

Let's turn your resume into a digital resume ready to be shared with the world!

What we will do in this tutorial is review my personal resume and turn it onto an HTML file with styling and host it with Guthub pages for free. See live demo here.

What you should put on your resume

If you want to learn more about the type of content that should go on your resume and how hiring managers think as they review them, then read "Developer Resumes — How Managers Actually Read Them".

Let start building

I will use this guide in the video version of this tutorial and highly recommend you watch that video here as you read this guide.

See complete source code

Create Folders & Files

I'll start this project by creating a blank folder on my desktop and adding the following files and folders:

digital_resume
│   index.html    
└───assets
│   │   resume.pdf
│   │   
│   │
│   └───images
│       │ 
│       └─profile_pic.jpg
│       
│   
└───styles
    │  
    └─style.css

HTML Setup

Let's get some boiler plate HTML setup and build out everything up until the qualifications list. Make sure to link up all the

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Dennis Ivy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./styles/main.css">
    </head>
    <body>
        <div id="container--main">

            <section id="wrapper--hero" class="section--page">
                <img id="profile-pic" src="./assets/images/profile_pic.JPG">

                <div>
                    <h1 id="user-name">Dennis Ivanov</h1>
                    <p id="bio">Software developer, developer advocate at <a href="https://www.agora.io/en/" target="_blank">Agora</a>, Udemy <a href="https://www.udemy.com/user/dennis-ivanov-5/" target="_blank">instructor</a>, <a href="https://www.youtube.com/c/dennisivy" target="_blank">YouTuber</a> with 166k+ subs and contributor at <a href="https://youtu.be/PtQiiknWUcI?t=6" target="_blank">Traversy Media</a>.</p>
                    <p id="email">👉 dennis@dennisivy.com</p>
                </div>  
            </section>

            <section class="section--page">

                <div id="socials--list">
                    <a href="https://youtube.com/c/dennisivy" target="_blank">Youtube</a>
                    <a href="https://twitter.com/dennisivy11" target="_blank">Twitter</a>
                    <a href="https://www.linkedin.com/in/dennis-ivanov/" target="_blank">Linkedin</a>
                    <a href="https://github.com/divanov11" target="_blank">Github</a>
                    <a href="./assets/resume.pdf" target="_blank">Download Resume</a>
                </div>
            </section>

            <section class="section--page">
                <h2>Skills & Qualifications</h2>
                <ul id="qualifications--list">
                    <li>✔️ 7 Years experience with front & backend development</li>
                    <li>✔️ Extensive knowledge in API & Database Design.</li>
                    <li>✔️ Experienced content creator on YouTube & community leader </li>
                    <li>✔️ 7 Years experience with running Adwords campaigns & SEO</li>
                </ul>
            </section>  
        </div>

    </body>
</html>

Styling what we have so far

Before we add more content lets add in some styling and import a font type that I'd like to use here:

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root{
    --mainTextColor:#000;
    --secondaryTextColor:(51 51 51);
    --mainLinkColor:#0da2b8;
    --mainBorderColor:rgb(218, 218, 218);
    --mainBgColor:rgb(249, 250,251);
}

*{
    font-family: 'Readex Pro';
    line-height: 1.5em;
    box-sizing: border-box;
    color: var(--mainTextColor);

}

body{
    background-color: var(--mainBgColor);            
}

p, span, li{
    color: var(--secondaryTextColor);
    font-size: 1em;
}

a{
    text-decoration: none;
    color: var(--mainLinkColor);
    font-weight: 500;
}

li{
    line-height: 1.9em;
}

#container--main{
    max-width: 700px;
    margin: 0 auto;
    padding: 1em;
}

.section--page{
    padding-top: 1em;
    padding-bottom: 1em;
}

#wrapper--hero{
    display: flex;
    align-items: center;
    gap: 4em;
}

#bio, a{
    font-weight: 300;
}

#user-name{
    font-size: 48px;
    line-height: 1em;
}

#profile-pic{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

#email{
    color: var(--mainTextColor);
}

#socials--list{
    display: flex;
    justify-content: space-between;
    column-gap: 1em;
    flex-wrap: wrap;
}

#socials--list a{
    font-weight: 300;
    color: var(--secondaryTextColor);
    font-size: 0.9em;
    transition: 0.3s;
}

#socials--list a:hover{
    font-weight: 100;
    color: var(--mainLinkColor);
    font-size: 0.9em;
}

#qualifications--list{
    list-style: none;
}

Adding dark mode

We are developers so of course I need to provide a dark mode option. We wont add any toggling or anything like that, just the ability for you to set your preference if you'd like.

For this we will just set some more CSS variables in the same :root only now we will specify -dark at the end, and then duplicate and modify the light mode colors to have a -light extension. In order to set the theme we will simply use the light or dark variables to the variables user throughout the css file.

:root{
    --mainTextColor-light:#000;
    --secondaryTextColor-light:rgb(51 51 51);
    --mainLinkColor-light:#0da2b8;
    --mainBorderColor-light:rgb(218, 218, 218);
    --mainBgColor-light:rgb(249, 250,251);

    --mainTextColor-dark:#fff;
    --secondaryTextColor-dark:#adb0b1;
    --mainLinkColor-dark:rgb(30, 190,214);
    --mainBorderColor-dark:#2b3031;
    --mainBgColor-dark:#131415;

    --mainTextColor:var(--mainTextColor-dark);
    --secondaryTextColor:var(--secondaryTextColor-dark);
    --mainLinkColor:var(--mainLinkColor-dark);
    --mainBorderColor:var(--mainBorderColor-dark);
    --mainBgColor:var(--mainBgColor-dark);

}

Tech stack

Just bellow the Skills & qualifications add the following HTML & CSS

<section class="section--page">
    <h2>Tech stack</h2>

    <div id="wrapper--techstack__items">
        <div class="card--techstack"><span>Python, JavaScript, NodeJS</span></div>
        <div class="card--techstack"><span>Django, Express, Flask, FastAPI</span></div>
        <div class="card--techstack"><span>React, Next JS</span></div>
        <div class="card--techstack"><span>Postgres, MongoDB, MySQL</span></div>
    </div>
</section>

#qualifications--list{
    list-style: none;
}

#wrapper--techstack__items{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-size: 0.9em;
}

.card--techstack{
    border: 1px solid var(--mainBorderColor);
    border-radius: 5px;
    padding: 0.5em 1em;
    align-items: center;
}

Work History

Add the follow section bellow the Tech Stack section.

<section id="work-history-wrapper" class="section--page">
    <h2>Work History</h2>

    <div class="line-break"></div>
    <div class="card--work-history">
        <strong>🚧 DEVELOPER ADVOCATE | AGORA.IO</strong>
        <p>11/2021 - Present</p>
        <p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
        <ul>
            <li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
            <li>Produced educational video content which resulted in 300k+ views on youtube</li>
            <li>Produced SEO campaigns and content to gain market share for related keywords.</li>
        </ul>
    </div>

    <div class="line-break"></div>

    <div class="card--work-history">
        <strong>🚧 INSTRUCTOR | YOUTUBE, UDEMY, TEACHABLE</strong>
        <p>11/2019 - Present</p>
        <p>Produced content showcasing new tech, tutorials & interviews with top developers.</p>
        <ul>
            <li>166,000+ Youtube Subscribers</li>
            <li>30,000 course copies sold</li>
            <li>12+ Million views on Youtube</li>
            <li>Made regular contributions to Traversy Medias youtube channel (1.9m Subscribers)</li>
            <li>Tutorial videos included projects such as social networks, Ecommerce, real time video, stripe & paypal integrations and more </li>
        </ul>
    </div>

    <div class="line-break"></div>

    <div class="card--work-history">
        <strong>🚧 SENIOR DEVELOPER | FOI LABS</strong>
        <p>10/2017 - 10/2019</p>
        <p>Designed and developed a laboratory management system. My system
            provided an interface for lab technicians and customers to view and
            track data from samples tested in the lab.</p>
        <ul>
            <li>Designed prototype & pitched original idea for new lab management system (LIMS)</li>
            <li>Built entire code base and brought version 1 of LIMS system to market as a solo developer</li>
            <li>Onboarded and trained customers (Webinars & Conferences)</li>
            <li>Managed a small team of developers in expansion of LIMS system</li>
        </ul>
    </div>

    <div class="line-break"></div>

    <div class="card--work-history">
        <strong>🚧 DIGITAL MARKETER | UNIFIVE DIGITAL</strong>
        <p>2014 - 2017</p>
        <p>Started a digital agency building websites and marketing for
            local businesses. Mostly Wordpress sites with small modifications to
            themes.</p>
        <ul>
            <li>Organized SEO & SEM campaigns on a local and global scale.</li>
            <li>Saved a customer $110k a year by reducing Adwords CPC cost with optimization</li>
            <li>70 + websites built with my small team of developers and freelancers</li>
        </ul>
    </div>
</section>

.card--work-history{
    border-left: 1px solid var(--mainBorderColor);
    margin-top: 3em;
    margin-bottom: 3em;
    padding-left: 2em;
}

.line-break{
    background-color: var(--mainBorderColor);
    height: 1px;
}

Projects & Accomplishments

Add the follow code bellow the Work History section

<section class="section--page">
    <h2>Projects & Accomplishments</h2>

    <div class="card--project">
        <a href="project1.html"><span>🏆 </span>Built a Laboratory management system for forensics lab</a>
    </div>

    <div class="card--project">
        <a href="project1.html" ><span>🏆 </span>Documentation website - Lead team to re-build docs for agora.io</a>
    </div>

    <div class="card--project">
        <a href="project1.html" ><span>🏆 </span>Ecommerce platform using paypal and stripe API for payment integration</a>
    </div>

    <div class="card--project">
        <a href="project1.html"><span>🏆 </span>Social Network - open source project</a>
    </div>

</section>

.card--project{
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid var(--mainBorderColor);
}

.card--project a{
    color: var(--mainTextColor);

    transition: 0.3s;
}

.card--project a:hover{
    color: rgb(30, 190,214);

}

Project page

It's best practice to say a few things about every project you have worked on. For this we will create a template and fill in some dummy text for each project. I'll add one template and let you modify as you need.

In the same directory as your index.html file create a project1.html file and add the following code. If followed my code exactly in the last step you should already be linked to this page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Dennis Ivy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./styles/main.css">
    </head>
    <body>
        <div id="container--main">
            <a href="index.html">&#x2190; Go Back</a>
            <h1>Built a Laboratory management system for forensics lab</h1>

            <ul>
                <li><a href="#">Live Demo</a></li>
                <li><a href="#">Source code</a></li>
            </ul>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>

            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look</p>

            <ul>
                <li>Contrary to popular belief, Lorem Ipsum is not simply random text</li>
                <li>making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</li>
                <li>45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem"</li>
            </ul>
        </div>
    </body>
</html>

Making it responsive

It's 2022 your site better be responsive.

Add this to the bottom of your CSS file

@media(max-width:600px){

    .section--page{
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #wrapper--hero{
        gap: 1em;
        flex-direction: column;
    }

    #profile-pic{
        width: 200px;
        height: 200px;
    }


    .card--work-history{
        border-left: none;
        padding-left: 0;
    }
}

Hosting with Github pages

I told you I was gonna make this part as simple as possible. So we wont use any external services outside of github, a platform every developer should be familiar with.

If your not familiar with Git & GitHub I'd recommend checking out this video I made on Uploading Files To GitHub

Github pages

Once your files on pushed to your Github repo you can use github pages to host your static website, this process is easy.

Note: If you want to host for free you will need to make your repo a public repo

In your GitHub account go to select your repo and then click settings --> pages and then select the branch you want to deploy and click save.

This could take a minute so give it some time before you refresh.

Just to be safe, make sure your home page is called index.html to avoid conflicts.

You should now be able to see your domain user Custom Domain. Mine looks like this divanov11.github.io/Digital-Resume

Easily Convert Django Function Based Views To Class Based Views

Dennis Ivy — Mon, 25 Jul 2022 02:44:00 +0000

In this tutorial I will take a simple notes app built with function based views (FBV) and convert them into class based views (CBV).

This post will be used as a guide for a YouTube tutorial so I recommend watching the full video tutorial and referencing the source code.

Our Function Based Views

Let's start by taking a quick look at the views we currently have.

Our views file has views to follow the basic CRUD operations for Creating, Reading, Updating and Deleting Notes.

def TaskList(request):
    if request.method == 'GET':
        tasks = Task.objects.all().order_by('-updated')
        context = {'tasks':tasks}
        return render(request, 'base/index.html', context)

    if request.method == 'POST':
        task = Task.objects.create(
            body=request.POST.get('body')
        )
        task.save()
        return redirect('tasks')

## ------------------------------------------------------

def TaskDetail(request, pk):
    if request.method == 'GET':
        task = Task.objects.get(id=pk)
        context = {'task':task}
        return render(request, 'base/task.html', context)

    if request.method == 'POST':
        task = Task.objects.get(id=pk)
        task.body = request.POST.get('body')
        task.save()
        return redirect('tasks')

## ------------------------------------------------------

def TaskDelete(request, pk):
    task = Task.objects.get(id=pk)

    if request.method == 'POST':
        task.delete()
        return redirect('tasks')

    context = {'task':task}   
    return render(request, 'base/delete.html', context)

Keeping our class based views raw

Class based views have a level of complexity to them not because they are difficult to use, but because there is a layer of abstraction to them that makes it difficult to understand exactly what's going on and what we need to do to modify them. Django provides us with a number of built in views to use which makes for rapid development, but before you know the ins and outs of the views this can actually make thngs confusing since there is a lot of magic under the hood.

So instead of using the built in views, I will keep things raw and only extend the base view Django gives us and write all the logic from scratch so you can see how class based views compare and differ from function based views.

A few things about class based views

Before we get started there's a few things I want you to know about class based views.

Extending the base View class

Every class based view extends the base View class. Since we are not using any other built in views make sure that you import View and pass in "View" to each class:

from django.views import View
...
class OurView(View):

Separation by http methods

With class based views we separate our code into HTTP verbs. So instead of having to do something like if request.method == 'POST', we simply modify the post method provided by the View class and let that method take care of everything that happens on a post request. The same goes for get requests.

Ex:

class OurView(View):
    def get(self, request):
        pass

    def post(self, request):
        pass

Let's get started with our first view.

TaskList View

Let's comment out the TaskList view and rebuild it from scratch.

We'll rewrite the view as a class now and inherit from the View class. Let's also add two methods to this new class (get & post) and make sure to pass in self before request in each method.

Once we have the class and two methods, lets extract the logic from our function based view and add it to the new class according to each http method like so:

from django.views import View
....
class TaskList(View):

    def get(self, request):
        tasks = Task.objects.all().order_by('-updated')
        context = {'tasks':tasks}
        return render(request, 'base/index.html', context)

    def post(self, request):
        task = Task.objects.create(
            body=request.POST.get('body')
        )
        task.save()
        return redirect('tasks')

Now to use this view we need to reference the class in urls.py and then use the as_view() method.

path('', views.TaskList.as_view(), name="tasks"),

And just like that, we converted our first function based view into a class based view!

TaskDetail View

Now lets do the same for TaskDetail. Again, we will comment out our function based view and extract and separate all the logic we have into the http methods.

class TaskDetail(View):
    def get(self, request, pk):
        task = Task.objects.get(id=pk)
        context = {'task':task}
        return render(request, 'base/task.html', context)

    def post(self, request, pk):
        task = Task.objects.get(id=pk)
        task.body = request.POST.get('body')
        task.save()
        return redirect('tasks')

Then add as_view() to the url path for when we call this view.

path('<str:pk>/', views.TaskDetail.as_view(), name="task"),

TaskDelete View

At this point I'm sure you're starting to see the pattern, so lets do the same as before with the Delete view.

class TaskDelete(View):
    def get(self, request, pk):
        task = Task.objects.get(id=pk)
        context = {'task':task}   
        return render(request, 'base/delete.html', context)

    def post(self, request, pk):
        task = Task.objects.get(id=pk)
        task.delete()
        return redirect('tasks')

path('<str:pk>/delete/', views.TaskDelete.as_view(), name="delete"),

So lets recap what we did.

For each view we:

Changed def to class
Extended the base View class
Separated logic by http methods and added self before request
Added as_view() to each view in urls.py

Easiest Way To Connect Django To A Postgres Database

Dennis Ivy — Wed, 20 Jul 2022 21:52:04 +0000

In this demo I'm gonna show you how to provision a production level postgres database in minutes and connect it to your Django app.

AWS can be complex

In most of my projects and tutorials I use postgres with an Amazon Web Services RDS instance. That works in many cases but I hate the level of complexity AWS has to it. Sometimes it's nice to just get up and running FAST.

So, yesterday while scrolling on twitter I saw a post about railway and decided to give it a shot. I was amazed by the speed and simplicity of the connection!

So without further introduction, lets create a blank Django project, create a database and connect it.

Basic Django App

Note: Ensure you have python installed



pip install django
pip install psycopg2
django-admin startproject railway_django
cd railway_django

Note: Psycopg2 is a popular postgres database adapter for python so we'll need it when connecting django to postgres

In your projects settings.py file change the database ENGINE string from sqlite3 to postgresql and add NAME, USER, PASSWORD, HOST and POST as keys to the default dictionary.



DATABASES = {

    'default': {

        #'ENGINE': 'django.db.backends.sqlite3',

        'ENGINE': 'django.db.backends.postgresql',

        'NAME': '',

        'USER': '',

        'PASSWORD': '',

        'HOST': '',

        'PORT': '',

    }

}

Postgres Database with Railway

Railway has a great free tier so we wont need a card on file to start.

Step 1: Create an account on railway.app

Step 2: In your dashboard (railway.app/dashboard) click "+ New Project" and select "Provision PostgresSQL". It should take a few seconds for your database to be ready.

Step 3: Once your database is ready, select the new database and go to the "Connect" tab. Here you will see your "Postgres Connection URL".

This connection URL may seem like a bunch of random character's so lets extract all the values from this url by selecting the "Variables" tab if you want a more user friendly version of this connection.

Here we can hover over each section and see the actual values in each part of the connection string.

Go ahead and stick to the default values provided and update our connection in our django settings.py file.



DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.postgresql',

        'NAME': '<PGDATABASE>',

        'USER': '<PGUSER>',

        'PASSWORD': '<PGPASSWORD>',

        'HOST': '<PGHOST>',

        'PORT': '<PGPORT>',

    }

}

Migrate and View

That's it for the connection! Go ahead and run python manage.py migrate and view your data in the data tab in your postgres database on railway.

Go ahead and create a new user and refresh the database to see actual data appear.