Supercharge Your Django Web Development with Vite.js and Tailwind CSS: Step by Step guide

Published: 1 year ago - Updated: 1 year ago

5 minutes - 964 Words

article 'Supercharge Your Django Web Development with Vite.js and Tailwind CSS: Step by Step guide' banner

Summary

Learn how to set up Vite with Django 4.x and install Tailwind CSS with this step-by-step guide.

Related Articles

  1. Automatically Generate ERD of Your Django Models
  2. How to Split Your Django Project Settings

Introduction

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
It comes with two major feature:

  • A dev server with rich features and extremely robust HMR(Hot module replacement)
  • A build command that bundels your code in an optimized assets ready for production

In this article we will setup Vite to bundle and serve our django static files. The process is simple and straightforward to let’s begin.

Project structure

You can follow these steps in an old or new django project without any major changes.
For the purpose of this article we will be using a project with bellow structure.

MYSITE
 > .venv
 > blog
 > mysite
 > static
 > templates
   manage.py
   requirements.txt

Django static files settings

mysite/settings.py

STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static"]
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

Setup npm

In this artilce, I will setup npm in the root of the project. In the terminal run the bellow command.

npm init

This will create a package.json file in the root of your application with the bellow content by default.

package.json

{
  "name": "mysite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

This has setup npm in our project so now lets install Vite and Tailwind Css to our project.

Install Vite and Tailwindcss

npm install -D vite tailwindcss postcss autoprefixer django-vite-plugin

Initialize tailwind css with the bellow command. It will create tailwind.config.js and postcss.config.js files in the root of your application.

npx tailwindcss init -p

Edit the tailwind.config.js to tell tailwind which files it should watch for changes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.{html,js}", "./**/templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

"./templates/**/*.{html,js}"

Watch all html and js file inside the templates folder in the root of our project.

MYSITE
 > ...
 > templates
   manage.py
   requirements.txt

"./**/templates/**/*.{html,js}"

Watch all html and js files inside each app templates folder.

MYSITE
> ...
 > blog
   - templates
      - blog
 > ...
   manage.py
   requirements.txt

Tailwind will watch those files for changes and add/reload necessary css classes.

Setup Vite

Create main.js and tailwind.css files

In the static folder at the root of your project create the bellow files

static/js/main.js

console.log('Js is working')

static/css/tailwind.css

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

Create **vite.config.js** file with the create js and css files as input.

//vite.config.js
import { defineConfig } from "vite";
import djangoVite from "django-vite-plugin";

export default defineConfig({
  plugins: [
    djangoVite({
      input: ["./static/js/main.js", "./static/styles/tailwind.css"],
    }),
  ],
});

add vite scripts to package.json

// ...

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

// ...

Install django_vite_plugin

We will be using this plugin to configure Vite with our django backend project.

pip install django_vite_plugin

add the plugin to installed_apps

mysite/settings.py

# mysite/settings.py

INSTALLED_APPS = [
	# ...,
	
'django_vite_plugin',
	
]

add the plugin settings and setup templates in django

# mysite/settings.py

DJANGO_VITE_PLUGIN = {
    "BUILD_DIR": "staticfiles/build",
    "BUILD_URL_PREFIX": "/" + STATIC_URL + "build",
    "DEV_MODE": True,
}

"BUILD_URL_PREFIX": "/" + STATIC_URL + "build"

The prefix the will be added to our built assets URLs

"DEV_MODE": True

If true, the routes for the assets will use http:127.0.0.1:5173 and If false the plugin will use the compiled version of our assets.

  • True

    • http://127.0.0.1:5173/static/js/main.js](http://127.0.0.1:5173/static/js/main.js)
  • False

    • http://127.0.0.1:8000/static/build/assets/main-9c837c14.js](http://127.0.0.1:5173/static/js/main.js)

Load Vite in templates

create a template file

templates/blog//main.html

<!DOCTYPE html>

{% load vite %}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>My Django Site</title>

    {% vite 'css/tailwind.css' %}

  </head>

  <body>
    <h2 class="text-red-500 font-bold">This is a template</h2>

    {% vite 'js/main.js' %}
  </body>
</html>

I have assumed that you know how to setup urls and views in django

output

desc

Tailwind is successfully setup so lets create a full page

Full tailwind page

Let’s get a full tailwind page from tailwind components for out home page
https://tailwindui.com/components/application-ui/application-shells/stacked

templates/blog/main.html

The output will be

desc

Setup for production environment

Build the assets for production. The compiled assets will be on the folder the we specified in the plugin settings.

DJANGO_VITE_PLUGIN = {
    # ....
    "DEV_MODE": False,
		# ....
}

"BUILD_DIR": "staticfiles/build"

to build the assets run the bellow command in your production environment.

npm run build

If you are using a managed hosting provider you need to change or customize the default build process for your project.

As an example railway uses nixpacks for building your project and detects the framework automatically for you.

The problem with our current setup is that we have bothpackage.json and requirement.txt file by default nix will pickup node js and will try to build it using node settings which will fail.

So to customize this create nixpacks.toml

providers = ["python","..."]

[phases.build]
cmds = ["echo SHTB_first", "...", "echo SHTB_last"]

In the above TOML file, we told nixpack to first use python settings then your auto detected languages/frameworks.

Or if your package.json if inside another folder such as static use the cmds to build the assets after the python settings are done.

Conclusion

We successfully setup Vite and insalled tailwindcss on a django project

Add Comment

Conversations (0)

Sign up for our newsletter

Stay up to date with the latest news and articles.