DEV Community: Taiwo Jazz

How to setup Django + Postgres + Node.js with Docker

Taiwo Jazz — Sat, 09 Sep 2023 16:15:49 +0000

Many Django developers aspire to integrate Tailwind CSS into their projects, but they often find the process a bit complex. In this tutorial, we'll guide you through the steps to seamlessly incorporate Tailwind CSS into your Django project without any hassle.

Our primary goal in this tutorial is to replace the default db.sqlite database provided by Django with PostgreSQL for development purposes. Additionally, we'll show you how to containerize your entire project using Docker, making collaboration and deployment a breeze.

Prerequisites

Before we dive into the tutorial, ensure that you have the following tools and technologies installed on your computer:

If you haven't installed these dependencies yet, you can find installation instructions on their respective websites.

Now, with the prerequisites in place, let's proceed with the tutorial.

Setting up PostgreSQL with Django Using Environment Variables

To ensure a secure and flexible configuration, we'll use environment variables (env files) to manage sensitive database settings, such as credentials and connection details.

Step 1: Create a PostgreSQL Database

First, let's create a PostgreSQL database for your Django project. Open a terminal and run the following command, replacing mydb with your desired database name:

createdb mydb

Confirm your db was created successfully by running:

psql -U your_username -l

Step 2: Install the Required Python Packages

To work with PostgreSQL in Django and load environment variables from a .env file, you'll need the psycopg2-binary and python-dotenv packages. Install them using pip:

pip install psycopg2-binary python-dotenv

Step 3: Configure Django to Use PostgreSQL with python-dotenv

Now, let's configure your Django project to use PostgreSQL as the database while loading sensitive settings from a .env file.

Create a .env file in your project's root directory (if it doesn't already exist).
Add the following environment variables to your .env file, replacing the placeholders with your actual PostgreSQL credentials. I will be using the default postgres database which the need to create one.

SECRET_KEY="your_django_secret_key"
DB_ENGINE=django.db.backends.postgresql
DB_NAME=postgres
DB_USER=postgres
DB_PASSWORD=postgres
DB_HOST=db # Make sure your DB_HOST is set to just "db" without the quote. We will understand why after we set up docker
DB_PORT=5432
DEBUG=True

Next, open your Django project's settings file (usually settings.py) and configure the database settings using python-dotenv:

Your default DATABASE will look like this

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

Delete it and replace it with this:

import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Move the code above to the top of your settings.py file

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': os.environ.get('DB_NAME'),
        'USER': os.environ.get('DB_USER'),
        'PASSWORD': os.environ.get('DB_PASSWORD'),
        'HOST': os.environ.get('DB_HOST'),
        'PORT': os.environ.get('DB_PORT', default='5432'),
    }
}

With these changes, your Django project will now use the environment variables defined in the .env file to connect to the PostgreSQL database while keeping sensitive information secure.

Setting up PostgreSQL + Django with Docker

In this guide, we'll walk you through the process of setting up PostgreSQL and Django within Docker containers, making it easy to manage and collaborate on your project. Additionally, we'll include instructions for integrating Tailwind CSS if needed.

Step 1: Create Docker Configuration Files

In your project root directory, create two files named docker-compose.yml and Docker.

`docker-compose.yml`

version: '3'

services:
  db:
    image: postgres
    ports:
      - "5432:5432"
    environment:
      POSTGRES_DB: ${DB_NAME}
      POSTGRES_USER: ${DB_USER}
      POSTGRES_PASSWORD: ${DB_PASSWORD}

  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/usr/src/app
    ports:
      - '8000:8000'
    depends_on:
      - db

`Docker`

FROM python:3.9
ENV PYTHONUNBUFFERED 1

# set working directory
WORKDIR /usr/src/app

# Copy and install Python dependencies
COPY requirements.txt /usr/src/app/
RUN pip install -r requirements.txt

# Copy Node.js-related files (for Tailwind CSS integration)
COPY package.json /usr/src/app/
COPY package-lock.json /usr/src/app/

# Install Node.js dependencies (for Tailwind CSS integration)
RUN apt update && apt install -y nodejs npm
RUN npm install

# Copy the rest of your application
COPY . /usr/src/app/

Note: If you don't intend to use Tailwind CSS, you can remove the lines that copy package.json and package-lock.json, as well as the lines that update and install npm.

If you however intend to use tailwindcss and you haven't set it up yet, you can read my article on How to setup TailwindCSS with Django.

Step 2: Build and Run Docker Containers

With the Docker configuration files in place, you can now build and run your Docker containers:

docker-compose build
docker-compose up

Your Django application will be accessible at http://localhost:8000.

If after running docker-compose up you get an error like:

django.db.utils.OperationalError: connection to server at "db" (172.26.0.2), port 5432 failed: Connection refused
xproject-web-1  |       Is the server running on that host and accepting TCP/IP connections?

Step to fix:

Check PostgreSQL Service Status: Verify if the PostgreSQL service is running by using the following command:

sudo service postgresql status

If the service is not running, you can start it with:

sudo service postgresql start

Check Listen Addresses: In the postgresql.conf file, there's a configuration parameter called listen_addresses. Ensure that it's set to listen on the appropriate IP addresses or is set to '*', which allows connections from any IP address:

sudo nano /etc/postgresql/<version>/main/postgresql.conf

Replace <version> with your postgresql version. Enter only the whole number of your version. If you version is 15.4, replace <version> with only 15 You can check your version with:

psql --version

If you encounter other errors, you can drop me a comment and i will be happy to help.

Conclusion

You've successfully set up PostgreSQL and Django within Docker containers, allowing for easy management and collaboration. If you're using Tailwind CSS, the Docker configuration includes the necessary setup to integrate it into your project. Now you can focus on developing your Django application with a containerized environment.

Happy coding!

Setting up Tailwindcss with Django: Easy Guide

Taiwo Jazz — Thu, 07 Sep 2023 13:50:57 +0000

In this tutorial, we will walk through the process of setting up Tailwind CSS to work globally for all apps within your Django project. Assuming you have already created your Django project and app, let's dive straight into it.

Step 1: Installing Tailwind CSS

Begin by navigating to your project's root directory, where your manage.py file resides. Execute the following commands to install Tailwind CSS, along with its necessary dependencies, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

These commands will install TailwindCSS, PostCSS, Autoprefixer and generate a tailwind.config.js default configuration file.

Step 2: Configuring TailwindCSS

You should now have a tailwind.config.js file in your project's root directory. Replace its contents with the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app-name/templates/app-name/**/*.html',
    // Add paths to other apps if necessary
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Make sure to replace app-name with your actual app name. If your project includes multiple apps, add the respective paths to their templates.

Step 3: Configuring Postcss

In your project's root directory, create a new file named postcss.config.js and paste the following code inside it:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Step 4: Add the Tailwind directives to your CSS

Create a directory named static in your root directory. Inside this directory, create another directory named src, and within it, create a file named input.css. Add the following code to input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Update your package.json

Locate your package.json file in the root directory, and add the following line at the top of the devDependencies object:

"scripts": {
    "dev": "npx tailwindcss -i ./static/src/input.css -o ./static/src/styles.css --watch"
  },

Step 6: Update your app templates layout.html or base.html

In your app's templates directory, where your .html files are located, update the head section of your layout.html or base.html file with the following code. This ensures that your stylesheet points to the CSS files generated by Tailwind when you start the server:

<link href="{% static 'src/styles.css' %}" rel="stylesheet">

Step 7: Update Django settings

In your settings.py file, follow these steps:

1. Import the `os` Module

Add the following code at the top of your settings.py file, typically around line 13:

import os

This import is necessary to work with file paths.

2. Configure Static Files Directory

Locate the STATIC_URL declaration in your settings.py file (usually at the bottom of the page), and then add the following code right below it:

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

Your settings.py file should now include the updated STATICFILES_DIRS configuration, ensuring that Django knows where to find your static files.

With these changes, your Django project is configured to recognize the static directory as a source of static files. This is crucial for serving the CSS generated by Tailwind CSS. Save your settings.py file, and you're all set.

Step 8: Now open a new terminal aside the one running your django server and run:

npm run dev

With these steps completed, you have successfully set up Tailwind CSS to work globally for all apps in your Django project. Enjoy creating stylish and responsive user interfaces for your Django applications.

Implementing Auto-Reload in Django

If you find manual page reloading tedious while working on your Django project, you can set up automatic page reloads whenever your server code, templates, content, or classes change. Here's how to do it:

Step 1: Install `django-browser-reload`

Start by installing django-browser-reload using pip:

python -m pip install django-browser-reload

Step 2: Add `django-browser-reload` to your `INSTALLED_APPS`:

In your Django project's settings, locate the INSTALLED_APPS list and add django_browser_reload to it:

INSTALLED_APPS = [
    ...,
    "django_browser_reload",
    ...,
]

Step 3: Include the App URLs

Extend your project's URL configuration to include the django-browser-reload app's URLs. In your project's main urls.py (usually located in the project's root directory), add the following:

from django.urls import include, path

urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]

This step ensures that the auto-reloading functionality is accessible at the __reload__/ endpoint of your Django project.

Step 4: Add the middleware:

In your project's settings, locate the MIDDLEWARE list and add django_browser_reload.middleware.BrowserReloadMiddleware to it. Make sure to place it after any other middleware that encodes the response, such as Django's GZipMiddleware.

MIDDLEWARE = [
    # ...
    "django_browser_reload.middleware.BrowserReloadMiddleware",
    # ...
]

With these steps completed, your Django project is now set up to automatically reload the page whenever there are changes in your server code, templates, content, or classes.

Enjoy a more streamlined development experience with automatic page reloading!

Setting Up CS50 Library Locally in Visual Studio Code

Taiwo Jazz — Fri, 14 Jul 2023 19:57:49 +0000

Liquid syntax error: Unknown tag 'endraw'

How to Run Multiple Instances of Google Chrome in KDE Neon Plasma

Taiwo Jazz — Wed, 12 Jul 2023 19:34:15 +0000

If you run KDE Neon plasma, you may have observed that using several instances of Google Chrome with the same user in KDE activity or virtual desktop is a little challenging.

Chrome will always return you to the previous virtual desktop or activity if you open it on a different virtual desktop or activity.

This can be really bothersome, especially if you wish to operate two or more Chrome windows independently and don't want to constantly open and dismiss tabs.

In this article, I'll show you how to avoid that problem and use your profile when using various Google Chrome windows with various tabs. So let's start.

Step 1

Open your terminal and type in cd to switch to the home directory if you are not there already. In your home directory, you should have a Desktop directory. You can hit ls to confirm that.

Open your terminal and type cd to get to get in the home directory if you are not already there. You ought to have a Desktop directory in your home directory. To confirm that, type 'ls' and hit enter.

jazzdev@kde-neon:~$ ls
Desktop  Documents  Downloads  jazzdev  Pictures  snap  Videos
jazzdev@kde-neon:~$

Step 2

cd Desktop will take you to your Desktop directory.

Step 3

Create a new file using any editor of your choosing, give it the name chrome-2.desktop. I'll use vim chrome-2.desktop because I like vim.

Step 4

Copy the code bellow into the file you just created.

[Desktop Entry]
Version=1.0
Name=Google Chrome 2
GenericName=Web Browser
Comment=Access the Internet
Exec=google-chrome --user-data-dir=/home/jazzdev/.chrome2 %U
Terminal=false
Icon=google-chrome
Type=Application
Categories=Network;WebBrowser;
MimeType=text/html;text/xml;application/xhtml_xml;x-scheme-handler/http;x-scheme-handler/https;

Edit the line Exec=google-chrome --user-data-dir=/home/jazzdev/.chrome2 %U and replace jazzdev to your pc name then save and exit.

If you are using vim, press i key on your keyboard to enter the INSERT MODE. This will enable you to edit the code you just pasted.

Once you are done editing, and press Esc key to exit the insert mode and type :x and press enter on your keyboard to save and exit.

Step 5

If everything goes as planned, the file you just produced should appear on your desktop.

Step 6

Back in your terminal, make sure you are still in the /Desktop dir.

To make the newly created chrome-2.desktop file globally accessible on your computer when you search for it, move it to the applications folder. Don't worry, the application folder should already exist.

mv chrome-2.desktop ~/.local/share/applications/

If a new line appears, the file has been properly relocated.

Step 7

We can now use our brand-new Chrome instance. Search for Google Chrome on your desktop. As you can see, the application menu now includes Google Chrome 2.

The same profile that you use for your primary Google Chrome can now be used for several virtual desktops or activities in Google Chrome 2.

If you find this article interesting. You can leave me a remark. If you run into any problems along the road, be sure to leave a comment, and I'll be happy to assist you. Thanks.