Before deciding to use a modern 'high' javascript framework like Vue, React we suggest you check out these libraries.
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.
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:
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.
Success
Error
Warning
Info