Front-end scaffold tool for your django project.
Project description
Django-Frontier
The django front-end scaffold tool you requested.
Tired of always having to setup your front end apps (react, vue, bootstrap tailwindcss) for your django projects, not any more. Every django developer knows how annoying it is to setup a front end for your django apps with the latest and greatest frontend frameworks, with django-frontier you get to set up your frontend scaffold with a single command. A breeze 😇
Before you install
Before you install django-frontier, please make sure you have python installed and you have a working django project either with with your local python installation or a virtual environment. We recommend the latter
Installation guide
- Open your terminal and install the django-frontier package using pip
$ pip install django-frontier
- After the installation, add the ‘frontier’ app to the INSTALLED_APPS of your django project settings
INSTALLED_APPS = [
...
'frontier',
...
]
- Now you can use the frontier command by navigating to the root of your project directory, where ‘manage.py’ file is and run the frontier with either preset (vue, react, tailwind, or bootstrap)
for example, a react scaffold looks like this:
$ python manage.py frontier react
This generates a resources directory with your react application scaffold. Your directory structure looks like this:
your_project/
resources/
js/
App.js
index.js
components/
Example.js
manage.py
webpack.mix.js
package.json
.babelrc
...
- Configure your static assets by editing webpack.mix.js file.
const mix = require('laravel-mix');
mix.js('resources/js/index.js', 'static/').react();
NOTE: django-frontier uses laravel-mix js <https://laravel-mix.com>_ to compile and bundle all of it assets. You can read more about laravel mix <https://laravel-mix.com>_ on thier website
- You can then compile your assets by running
$ npm run watch
This spits out the complied assets in a static/ directory at the root of your project
static/
js/
index.js
index.map.js
css/
index.css
index.map.css
You can modify the output of the compiled assets in your ‘webpack.mix.js’ file.
- After compilation, setup your STATIC_URL and STATICFILES_DIRS in your django project settings.
# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static/'] #new in django 3.0 which uses pathlib module
- Setup your template
<!DOCTYPE html>
{% load static %}
<html>
<head>
...
<!-- if your dist folder includes css files -->
<link rel="stylesheet" href="{% static 'css/index.css' %}" />
...
</head>
<body>
<!-- for your react / vue app, set up to include the compiled js files -->
<div id="app"></div>
<script src="{% static 'js/index.js' %}"></script>
</body>
</html>
- For production, run the build command to minify the js and css for a smaller bundle
$ npm run build
MORE: Run the frontier command with -h flag for help and more options
$ python manage.py frontier -h
Enjoy 😇
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
