DEV Community

Cover image for πŸ’Έ Django Tutorial: Set up Media files in Deployment for FREE
Daniel Diaz for Developer Road

Posted on • Edited on • Originally published at danidiaztech.com

πŸ’Έ Django Tutorial: Set up Media files in Deployment for FREE

In this tutorial, you will learn to manage your media files during deployment, (and even production) for free.

Cloudinary

We will use cloudinary, for that purpose. It will allow us to manage our media (Uploaded files), in Django, with just a few modifications in our settings file.

Differences between Static Files and Media Files

In web development, static files are those files that stay "static", which means that those files aren't modified at any moment of the user interacting with the site.

The main three static files are CSS, Javascript, and images, which are served in our templates.

In Django apps deployment we use, whitenoise for managing static files. Since Django by itself is not able to manage static files during development (Because of performance issues).

Media Files

On the other hand, media files are files uploaded by the users of your application. That means that these files are constantly changing, and therefore require their own way to be served.

Cloudinary storage

To use the Cloudinary storage API, we're going to create a free account, here.

image

Hit in create an account, and verify your account with your email.

You will get a Dashboard with your Credentials, We'll use them later πŸ˜‰.
image

Modifying the settings:

First of all, we will need the Cloudinary packages, to be able to use it as a media manager. So let's install some packages.

pip install cloudinary django-cloudinary-storage
Enter fullscreen mode Exit fullscreen mode

Now let's import, a couple of modules

# At the top of the settings
import cloudinary
import cloudinary_storage
Enter fullscreen mode Exit fullscreen mode

And modify the installed apps

INSTALLED_APPS = [
    # Other apps ...

    # Media Cloudinary
    'cloudinary',
    'cloudinary_storage',
]

Enter fullscreen mode Exit fullscreen mode

Last but not least, paste the following code after, these comments

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
Enter fullscreen mode Exit fullscreen mode

Like this.

# Cloudinary stuff
CLOUDINARY_STORAGE = {
    'CLOUD_NAME': <your cloud name>,
    'API_KEY': <your api key>,
    'API_SECRET': <your secret api>,
}

DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'
Enter fullscreen mode Exit fullscreen mode

But somebody would tell me: Hey, are you crazy? we are putting our credentials in an unprotected settings.py file.

And yeah, that's right!

So the idea is to protect our credentials, with Environmental Variables. That means that we're going to put all of our keys in the server, that we are going to deploy our code, and not in the source files.

You could use os.environ.get("Key"), but as I'm going to deploy my app to Heroku, I'll use Python Decouple.

If you want to learn, how to use Python decouple on Heroku, you definitely take a look at this tutorial.

In that case, our Cloudinary settings would be like this

from decouple import config

CLOUDINARY_STORAGE = {
    'CLOUD_NAME': config('CLOUD_NAME', default=""),
    'API_KEY': config('API_KEY', default=""),
    'API_SECRET': config('API_SECRET', default=""),
}

DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'
Enter fullscreen mode Exit fullscreen mode

Thanks for your time hopefully this tutorial will be useful for you πŸ€—.

Any doubts, or problems? Let me know in the comments.

Top comments (7)

Collapse
 
danidiaztech profile image
Daniel Diaz

Let me know your thoughts, here!

Collapse
 
yairdorantes profile image
Yair Dorantes

muchaaaaaaas gracias, me estaba rompiendo la cabeza lo de los media files y gracias a este post he conseguido mostrarlos en la pΓ‘gina, me has salvado la vida, mil graciassss!!!!

Collapse
 
danidiaztech profile image
Daniel Diaz

Dale, me alegra mucho que te haya servido

Collapse
 
maahad767 profile image
Mohammad Abdul Ahad

This app broke my rest framework app(settings was somehow setting into defaults).

Collapse
 
mohannadabusai1 profile image
Mohannad Abusaif

Hello Daniel,
How can I contact you ?

Collapse
 
danidiaztech profile image
Daniel Diaz

Ping me on Linkedin, Twitter, or GitHub

Collapse
 
segestic profile image
segestic

Kudos, nice tutorial.