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
]
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"
}
}
]
}
};
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
]
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