Docs

Frontend

Modern Javascript

Before deciding to use a modern ‘high’ javascript framework like Vue, React we suggest you check out these libraries.

AlpineJS & HTMX

  • AlpineJS , a small, powerful client-side javascript framework that does not require a build tool.
  • HTMX - higher power tools for HTML which give you access to AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in your markup.

These are the libraries used in the frontend for the Vanty Starter Kit. We also used them to build the CMS and this very documentation site! Both play nicely with Django templates and will give you most of the same tools you would get from SPA frameworks.

Modern JS Framework & Django templates

For more complex UIs, for example, a chat application it may be necessary to use a modern ‘high’ javascript framework like ReactJS / Vue. If you are building a mobile application you will be better off using flutter.

The Vanty Starter Kit already includes the correct setup for you to add SPA framework components. However, you will have to update replace the current build tool, TailwindCLI as it is only meant for building your style files.

We have written a full tutorial on how to include modern js components (React) in Django templates.

In the tutorial we use ViteJS, but there are other build tools you could use. For example:

Here is an example configuration webpack

This demonstrates how you would replace the current Tailwind CLI build tool with webpack:

webpack.js 

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: process.env.NODE_ENV,
  entry: {
    app: './assets/js/index.js', // entry point
  },
  output: {
     filename: '[name].bundle.js', // output filename format is 'entry name'.bundle.js
     path: path.resolve(__dirname, './static'), // emit output to the static folder
   },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'static', 'js'),
    },
  },
  watch: !isProduction,
  watchOptions: {
    ignored: ['node_modules/**'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
            presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
                {
                    plugins: [
                        '@babel/plugin-proposal-class-properties',
                        '@babel/transform-runtime',
                    ]
                }

            ],
        }
      },

     {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'assets/styles'),
        use: [
             {
                loader: MiniCssExtractPlugin.loader,
              },
            'css-loader',
            'postcss-loader'
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].min.css'
    })
  ],
};

Your package.json file needs to be updated to include webpack scripts and other requirements

package.json 

    "scripts": {
      "build": "NODE_ENV=production npx webpack-cli",
      "watch": "NODE_ENV=development npx webpack-cli"
    },
    "devDependencies": {
        "typescript": "^4.2.3",
        "webpack": "^5.3.2",
        "webpack-cli": "^4.1.0"
    }

If you want to completely abandon Django templates and just use the Vanty Starter Kit as a headless API for your app we have you covered. Checkout the Headless API docs page.

Next
Headless API →