Skip to content

Instantly share code, notes, and snippets.

@bennof
Last active March 9, 2023 14:29
Show Gist options
  • Save bennof/a412b2fc2f3e7d53d7358f7cd1376150 to your computer and use it in GitHub Desktop.
Save bennof/a412b2fc2f3e7d53d7358f7cd1376150 to your computer and use it in GitHub Desktop.
Django with preact and bulma

Create a Project using Django, preact and bulma

Python setup

Init folders:

mkdir project_name
cd project_name
pipenv --shell
pipenv install django djangorestframework django_rest_knox
django-admin startproject project_name
cd project_name
django-admin startapp app_name

Add app to django ./project_name/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_name', # add the app
]

Create a preact frontendapp

django-admin startapp frontend
mkdir -p ./frontend/src/components
mkdir -p ./frontend/{static,templates}/frontend
cd ..
npm init -y
npm i webpack webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env babel-preset-preact babel-plugin-transform-class-properties --save-dev
npm i preact preact-dom

Edit package.json:

"scripts": {
  "dev": "webpack --mode development ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js",
  "build": "webpack --mode production ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js"
}

Edit .babelrc:

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}

Edit webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

Setup Django

Edit ./frontend/views.py:

from django.shortcuts import render
def index(request):
    return render(request, 'frontend/index.html')

Edit ./frontend/templates/frontend/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
  <title>Django + PReact: Project</title>
</head>
<body>
  <section class="section">
    <div class="container">
          <div id="app" class="columns"><!-- React --></div>
    </div>
  </section>
</body>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
</html>

Edit ./project/urls.py:

urlpatterns = [
    path('', include('leads.urls')),
    path('', include('frontend.urls')),
]

Edit ./frontend/urls.py

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index ),
]

Edit ./project/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_name', 
    'frontend' # frontend
]

Install Bulma

npm install bulma css-loader extract-text-webpack-plugin@next \ 
    mini-css-extract-plugin node-sass sass-loader style-loader\ 
    --save-dev

Edit webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
    },
    {
      test: /\.scss$/,
      use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              // options...
            }
          }
        ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    }),
  ]
};

Based on the work of Valentino Gagliardi and Bulma

@reo6
Copy link

reo6 commented Mar 9, 2023

I think an example repository, or a template repository for this example would be great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment