DEV Community: Thom Zolghadr

My Django/React Heroku Deployment Checklist

Thom Zolghadr — Wed, 11 May 2022 22:27:51 +0000

This is a working document and not currently meant to serve as a How-To or guaranteed to be exhaustive/bug free, but rather give myself a centralized set of steps to draw from.

This is "Part 2" of a Django deployment checklist. Part 2 focuses on adding a compiled React App as static files so the two run as one unified application.
Part 1 can be found here

-Update any calls to your back-end to use your Heroku domain
-cd into the react-app front end and run npm run build. This will generate a "build" folder in your react-app project directory.

my-computer/my-react-app/ $ npm run build

Create a folder in your your Django project directory called "frontend" and copy the build folder into this frontend folder. Path should look like my-django-app/frontend/build, "my-django-app" being the root folder for this application.

-Tell Django to look for these static files by updating the DIRS setting in the TEMPLATES variable
settings.py
+Also a STATICFILES_DIRS variable to settings so it knows where to find these static files


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
...

    },
]

# Put this near your other STATIC variables
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend/build/static')]

-Configure urls.py to use a regular expression path with TemplateView. We are using the index.html from our static build files that react generated for us. The regular expression will ensure that our React routing functions correctly.

urls.py

from django.urls import include, path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('mypaths/', include('app.urls')),
    re_path(r".*", TemplateView.as_view(template_name='index.html')),
    ...
]

My Django Heroku Checklist

Thom Zolghadr — Sat, 05 Feb 2022 03:18:51 +0000

A lot of articles seem to be different from what Heroku's documentation provides, and even with Heroku's documentation I had a little bit of trouble on my last deployment. I decided I'd create a checklist for my deployment as a baseline to work with.

This is a working document and not currently meant to serve as a How-To or guaranteed to be exhaustive/bug free, but rather give myself a centralized set of steps to draw from.

Ensure any secret keys are outside of git repo, scrub them from history if needed and store in .env file.
- Its good practice to never commit these, but if you did BFG-repo-cleaner gets the job done.
- I use python-dotenv to access environment variables. python-dotenv documentation
In settings.py set DEBUG to False, Set ALLOWED_HOSTS and CORS_ALLOWED_ORIGINS (if running front end from a separate deployment)


DEBUG = False
ALLOWED_HOSTS = ['your-app-name.herokuapp.com']
CORS_ALLOWED_ORIGINS = ['https://your-frontend-app-name.herokuapp.com']

~~Run python manage.py collectstatic to collect static files. Not doing this will cause a server 500 error.~~ Heroku will run collectstatic during build.
Install gunicorn, whitenoise, cloudinary, django-cloudinary-storage (we install the cloudinary apps if using uploaded media) and add to requirements.txt

pip install gunicorn whitenoise cloudinary
pip freeze > requirements.txt

Add Procfile to root folder with following contents:

web: gunicorn myProjectName.wsgi

myProjectName will be identical to the name of the folder that contains your settings.py and wsgi.py file

Add whitenoise to middleware in settings.py and ensure settings are properly set. According to http://whitenoise.evans.io/en/stable/django.html# whitenoise middleware should be listed immediately after Django's security middleware, before all other middleware.

MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',
  'whitenoise.middleware.WhiteNoiseMiddleware',
  # ...
]

# According to whitenoise docs, we must specify a STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

If we're using uploaded media, we can use Cloudinary for hosting for said media
https://devcenter.heroku.com/articles/cloudinary#using-with-django

https://pypi.org/project/django-cloudinary-storage/#requirements

Add Cloudinary to installed apps and config details. The docs say to put cloudinary_storage above django.contrib.staticfiles but that gave me build errors, probably because cloudinary says to do things differently if you are using their hosting for static, media, or both.

INSTALLED_APPS = [
'cloudinary',
'cloudinary_storage',
# other apps
]

""" 
I'm storing these keys in local .env for local testing, 
but don't forget to add these keys to your Heroku environment
variables so that it can populate these values when running live.
""" 

CLOUDINARY_STORAGE = {
    'CLOUD_NAME' : str(os.getenv('CLOUDINARY_CLOUD_NAME')),
    'API_KEY' : str(os.getenv('CLOUDINARY_API_KEY')),
    'API_SECRET' : str(os.getenv('CLOUDINARY_API_SECRET'))
}
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

Install Django-Heroku https://devcenter.heroku.com/articles/django-app-configuration

pip install django-heroku

Add the following import statement to the top of settings.py:

import django_heroku
...

Then add the following to the bottom of settings.py:

# Activate Django-Heroku.
django_heroku.settings(locals())

Follow instructions to deploy via Heroku CLI or GitHub
- I had a problem once where Heroku wasn't properly installing dependencies including gunicorn. Removing pipfile and providing only requirements.txt seemed to solve this. I'm not actually sure where the pipfiles came from since I used virtualenv and not pipenv to create my virtual environment, and I could only find docs of pipfile coming from pipenv.

You may need to run migrations once the application is deployed in order for the application to work. Access your app's developer console through Heroku (currently accessible via the "More" button next to the "Open App" button on the dashboard) and run

python manage.py make migrations
python manage.py migrate

Part 2 about deploying with a React Front-end here

Uploading Images to Django REST Framework from Forms in React

Thom Zolghadr — Fri, 14 Jan 2022 04:56:20 +0000

I have built a number of apps now that use either built-in fetch API or Axios to handle sending JSON data to the back-end. This is usually pretty straight forward with applications like Django REST Framework (DRF). DRF's serializers practically do all the work for you, converting Python data into JSON and back.

An issue I ran into recently was when trying to upload images to one of my applications for the first time. I was getting all sorts of errors such as:

"The submitted data was not a file. Check the encoding type on the form." or "No file was submitted."

This is how I learned about JavaScript's FormData, and that when receiving files, Django REST Framework expects files to come through in this format, with "Content-Type" headers set to "multipart/form-data" and uses parsers to correctly handle this data.

So to minimize digging on my own part in the future, as well as to anyone else who may have spent days like I did trying to understand the problem and figuring out how to proceed, here is how I got image uploads working in my project:

Django

Add media file/set media locations to settings.py
Add media locations to urls.py
Create ImageField on model
Add parsers to Viewset
Add ImageField to Serializer

React

Receive state data from form
Convert data into FormData
Create an Axios call with correct headers
Receive any errors to display on form

Djangoside

1. Add media file/set media locations to settings.py

Add MEDIA_ROOT and MEDIA_URL to settings.py MEDIA_ROOT is where our files are actually stored. MEDIA_URL is where they will be accessed from front end via URL.

settings.py



import os

# Actual directory user files go to
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'mediafiles')

# URL used to access the media
MEDIA_URL = '/media/'

2. Add media locations to urls.py

Add static URL to urls.py in our main project folder. This allows the application to know what folder to access on the server side when receiving a request from the MEDIA_URL. Without this, the application wont know what to do when receiving a urlpattern of 'mysite.com/media/'

urls.py



from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/users/', include('users.urls')),
    path('api/', include('commerce.urls')),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. Create ImageField on model

Next we create our field 'image_url' on the model and set it to an ImageField(). The kwarg upload_to is set to our function of the same name.

models.py




# lets us explicitly set upload path and filename
def upload_to(instance, filename):
    return 'images/{filename}'.format(filename=filename)

class MyModel(models.Model):
    creator = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name="listings")
    title = models.CharField(
        max_length=80, blank=False, null=False)
    description = models.TextField()
    image_url = models.ImageField(upload_to=upload_to, blank=True, null=True)

Don't forget any time we update the models we need to run
python manage.py makemigrations
python manage.py migrate

4. Add parsers to Viewset

Parsers are tools provided by DRF that will automatically be used to parse out FormData. Without this we'll get errors because the data won't be properly decoded for DRF's serializers to read. See 'parser_classes.'

views.py



from .models import MyModel
from .serializers import MyModelSerializer
from rest_framework import permissions
from rest_framework.parsers import MultiPartParser, FormParser

class MyModelViewSet(viewsets.ModelViewSet):
    queryset = MyModel.objects.order_by('-creation_date')
    serializer_class = MyModelSerializer
    parser_classes = (MultiPartParser, FormParser)
    permission_classes = [
        permissions.IsAuthenticatedOrReadOnly]

    def perform_create(self, serializer):
        serializer.save(creator=self.request.user)

5. Add ImageField to Serializer

Add the field definition on our serializer and set it to serializers.ImageField(). Since our model does not require an image_url, we'll add the kwarg 'required=false' to avoid problems when receiving the FormData without an image.



from rest_framework import serializers
from .models import MyModel

class MyModelSerializer(serializers.ModelSerializer):

    creator = serializers.ReadOnlyField(source='creator.username')
    creator_id = serializers.ReadOnlyField(source='creator.id')
    image_url = serializers.ImageField(required=False)

    class Meta:
        model = MyModel
        fields = ['id', 'creator', 'creator_id', 'title', 'description', 'image_url']

That should do it for the back-end! If I didn't forget anything we should now be able to send form-data via Postman and receive either successfully submitted data back, or any errors/missing required fields.

Reactside

1. Receive state data from form

I'm assuming you already have a form and any necessary onChange data. The major mistake I made was not writing a separate handleImageChange or handleFileChange for the file input on my form, since a regular text input is different from a file input.

We use useState hook to create [data, setData] and errors, setErrors

In my title and description input fields you'll see I use just a simple onChange={(e)=>{handleChange(e)}}. handleChange takes the onChange event and appropriately assigns the data[input.name] = input.value.

This won't work for a file though, because files are handled diffrently. So in our file input we need to specify a few things:
We need to set a type of "file" so that it knows to open a file picker dialog box. We tell it to only accept the file formats we want, and our onChange now points to a separate function for handling these files.

This separate function will work almost the same as before but instead of assigning input.value, we're assigning event(e).target.files[0], 0 being the first index of any list of files submitted. We're explicitly only taking in one file here.



 <input type="file" 
    name="image_url"
    accept="image/jpeg,image/png,image/gif"
    onChange={(e) => {handleImageChange(e)}}>

CreateMyModelForm.js



import React, { useState } from "react";

// React-Bootstrap
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import API from "../../API";

const CreateMyModel = () => {

    const [data, setData] = useState({
        title: "",
        description: "",
        image_url: "",
    });
    const [errors, setErrors] = useState({
        title: "",
        description: "",
        image_url: "",
    });


    const handleChange = ({ currentTarget: input }) => {
        let newData = { ...data };
        newData[input.name] = input.value;
        setData(newData);
    };

    const handleImageChange = (e) => {
        let newData = { ...data };
        newData["image_url"] = e.target.files[0];
        setData(newData);
    };

    const doSubmit = async (e) => {
        e.preventDefault();
        const response = await API.createMyModelEntry(data);
        if (response.status === 400) {
            setErrors(response.data);
        }
    };

    return (

        <Form>
            <Row>
                <Form.Group className="mb-3" controlId="titleInput">
                    <Form.Label>Title</Form.Label>
                    <Form.Control
                        type="text"
                        name="title"
                        value={data.title}
                        isInvalid={errors.title}
                        onChange={(e) => {
                            handleChange(e);
                        }}
                        maxLength={80}
                    />
                    {errors.title && (
                        <Form.Text className="alert-danger" tooltip>
                            {errors.title}
                        </Form.Text>
                    )}
                </Form.Group>
            </Row>
            <Row>
                <Form.Group controlId="formFile" className="mb-3">
                    <Form.Label>My Image</Form.Label>
                    <Form.Control
                        type="file"
                        name="image_url"
                        accept="image/jpeg,image/png,image/gif"
                        onChange={(e) => {
                            handleImageChange(e);
                        }}
                    />
                    {errors.image_url && (
                        <Form.Text className="alert-danger" tooltip>
                            {errors.image_url}
                        </Form.Text>
                    )}
                </Form.Group>
            </Row>
            <Form.Group className="mb-3" controlId="descriptionInput">
                <Form.Label>Description</Form.Label>
                <Form.Control
                    as="textarea"
                    rows={10}
                    name="description"
                    value={data.description}
                    isInvalid={errors.description}
                    onChange={(e) => {
                        handleChange(e);
                    }}
                />
                {errors.description && (
                    <Form.Text className="alert-danger" tooltip>
                        {errors.description}
                    </Form.Text>
                )}
            </Form.Group>
            <Button
                variant="primary"
                type="submit"
                onClick={(e) => doSubmit(e)}
            </Button>
        </Form>
    );
};

export default CreateMyModel;

2. Convert data into FormData

I have learned to write my API calls in a separate file as a way to avoid violating the DRY Principle and overall keep cleaner code. Here in my API call I know that I need to submit FormData whenever this particular call is made, so we'll handle the FormData creation here.

In the last step you'll see that our doSubmit sends our data to the API call. Here in the API call we receive that data and explicitly append our state data from the previous step to FormData so it can be properly formatted for our back-end parsers.

Recall from earlier that the image is optional. We can't upload null image data though since that will return an error, so we're only going to append the image to the form data if there is one. If not, we'll just leave it out altogether.

snippet from API.js



...
createMyModelEntry: async (data) => {
    let form_data = new FormData();
    if (data.image_url)
        form_data.append("image_url", data.image_url, 
        data.image_url.name);
    form_data.append("title", data.title);
    form_data.append("description", data.description);
    form_data.append("category", data.category);

... 
};

3. Create an Axios call with correct headers

I'm using Axios to send JWT tokens to the back-end of my application, and so there are already some default settings set up for my project. However I need to make sure I'm sending the correct content type with this particular API call.

I import my axiosInstance from my axios settings file and create a POST request at my mymodels/ endpoint, attach my form data, and overwrite my default "Content-Type": "application/json" with "Content-Type": "multipart/form-data" so that we can send this file, and our parsers in Django Rest Framework will recognize it and know to expect/accept a file.

I return the results and check the status. If we have a successful POST, the status will be '201 CREATED' and I know I can redirect from there. If the data isn't accepted and my serializers on the back-end returned an error, these will be accessible via error.response in my catch block.

API.js



import axiosInstance from "./axios";

const apiSettings = {

createListing: async (data) => {
    let form_data = new FormData();
    if (data.image_url)
        form_data.append("image_url", data.image_url, data.image_url.name);
    form_data.append("title", data.title);
    form_data.append("description", data.description);
    form_data.append("category", data.category);
    form_data.append("start_bid", data.start_bid);
    form_data.append("is_active", true);

const myNewModel = await axiosInstance
        .post(`mymodels/`, form_data, {
            headers: {
                "Content-Type": "multipart/form-data",
            },
        }).then((res) => {
            return res;
        }).catch((error) => {
            return error.response;
        });

    if (myNewModel.status === 201) {
        window.location.href = `/mymodels/${myNewModel.data.id}`;
    }
    return myNewModel;
    },
};

export default apiSettings;

4. Receive any errors to display on form

Finally we make sure any errors returned by Django REST Framework serializers can be displayed in our form.

Back in our doSubmit in CreateMyModelForm.js we were awaiting the response of API.createMyModelEntry(). Recall that this API call returns error.response in the catch block if one is encountered. From here we can call setErrors on response.data.

CreateMyModelForm.js doSubmit() function



...
const doSubmit = async (e) => {
    e.preventDefault();
    const response = await API.createMyModelEntry(data);
    if (response.status === 400) {
        setErrors(response.data);
    }
};
...

DRF's serializers will return a JSON object with field names and their corresponding errors. Below is example output of a blank form sent, and trying to upload a .txt file instead of a valid image. Our errors state will now look like the response.data below:

console.log(errors)



{
    "title": [
        "This field is required."
    ],
    "description": [
        "This field is required."
    ],
    "image_url": [
        "Upload a valid image. The file you uploaded was either not an image or a corrupted image."
    ]
}

So now for each our input fields we can can say if errors.[inputName] is not falsy, there must be an error associated with it that field. Below I am using React-Bootstrap to render my title input.

isInvalid is set to errors.title, which means if errors.title is truthy/has data, then the field will be marked as invalid. Below that we're using JSX to say if errors.title is truthy then to render out a tooltip underneath the field with the text of errors.title.

You can see the other fields doing this in detail back in step one of the React portion of this article.

CreateMyModelForm.js Title input field



...
<Form.Group className="mb-3" controlId="titleInput">
    <Form.Label>Title</Form.Label>
    <Form.Control
        type="text"
        name="title"
        value={data.title}
        isInvalid={errors.title}
        onChange={(e) => { handleChange(e);}}
        maxLength={80}
        />
     {errors.title && (
         <Form.Text className="alert-danger" tooltip>
             {errors.title}
         </Form.Text>
     )}
</Form.Group>
...

Here is an example of all 3 fields displaying errors.

That's it! We have the ability to upload files to our Django Rest Framework back-end via our React front end form.

How to Return a Boolean Value in Django REST Serializers Based on Related Models

Thom Zolghadr — Mon, 13 Dec 2021 22:05:56 +0000

I built an auctions project purely in vanilla Django for CS50 Web. I am now rebuilding this project using Django REST Framework and React to practice building a more robust full stack application. I have been learning a lot about how to use DRF to automate much of the API routing process and really enjoying the power and extensibility. However like all new things you come across snags.

I wanted to be able to conditionally render a heart-outline or filled-heart for each listing if a user was watching/following that particular listing (like a watch list).

You can see from the models.py snippet below that Watching model entries are relational models connecting foreign keys: the user and the listing.

I actually realized while writing this that I never did attempt to solve this problem in vanilla Django, as I had only rendered a watch list status on the individual listing pages:

views.py (vanilla Django)

# additional data removed for clarity
def view_listing(request, id):
    listing = Listing.objects.get(pk=id)
    user = get_user_or_none(request) 

    is_user_watching = Watching.objects.filter(user_id=user, listing_id=listing).exists()

    return render(request,"auctions/listing.html", {  
        "watching": is_user_watching,  
    })

listing.html (Django Template)

...
<form action="{% url 'watchlist' listing.id %}" method="POST">
    {% csrf_token %}
    {% if watching == True %}
    <button> Remove from Watchlist</button>
    {% else %}
    <button> Add to Watchlist</button>
    {% endif %}
</form>
{% else %}
    <a href="{% url 'login' %}">Log In</a> to bid on this auction!
{% endif %}
...

models.py

class Watching(models.Model):
    user_id = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name="watching")
    listing_id = models.ForeignKey(
        Listing, on_delete=models.CASCADE, related_name="watching")

I have watch list status on individual listings, how do I get this for all listings in a single request?

Sometimes the hardest thing can be defining the problem in a manner which helps you to ask the right questions to lead on you the correct path.

Eventually I learned you can get the current user in a serializer method by accessing self.context['request'].user. Now that I had access to the User, I could use that to query the database and see if a related Watching entry exists!

In serializers.py I used Watching.objects.filter().exists() to return True or False if such a follow does indeed exist.

serializers.py

from rest_framework.fields import SerializerMethodField

class ListingSerializer(serializers.ModelSerializer):

# returns true if user is authenticated and a Watching instance  
# exists with this user's id and this listing's id
    def is_watched_by_user(self, instance):
        user_id = self.context['request'].user.id
        listing_id = instance.id
        try:
            return Watching.objects.filter(user_id=user_id, listing_id=listing_id).exists()
        except Exception:
            return False

    creator = serializers.ReadOnlyField(source='creator.username')
    comments = CommentSerializer(many=True, required=False)
    user_is_watching = SerializerMethodField(method_name='is_watched_by_user')

    class Meta:
        model = Listing
        fields = ['creator','comments','user_is_watching']

While writing I thought that the serializer method is_watched_by_user could probably be boiled down a little more by using the related_name user.watching to get a smaller data set. This way we could potentially avoid looking through ALL of the listings, and only look at listings this particular user has a relational database entry for.

updated is_watched_by_user:

def is_watched_by_user(self, instance):
        user_id = self.context['request'].user
        listing_id = instance.id
        try:
            return user.watching.filter(listing_id=listing_id).exists()
        except Exception:
            return False

Now when querying the API, the listings will tell me if the current logged in user is following this listing or not. The Try/Except block assumes that if there is an AttributeError 'attribute Watching does not exist' or Model.DoesNotExist or similar error, then the user is an AnonymousUser or there is no entry. Either way we can return False.

Below is a GET request for a logged in user who follows listing_id 1, but not 2 or 3:

GET ../api/listings/

   "results": [
        {
            "id": 1,
            "creator": "Alice",
            "comments": [],
            "user_is_watching": true
        },
        {
            "id": 2,
            "creator": "Bob",
            "comments": [],
            "user_is_watching": false
        },
        {
            "id": 3,
            "creator": "Charlie",
            "comments": [],
            "user_is_watching": false
        },
    ]