bennof/django_preact.md

## django_preact.md

      
    Raw
  

              django_preact.md
            
          
    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