Git Product home page Git Product logo

cookiecutter-django-svelte's Introduction

Django - Svelte Template [optional +Wagtail]

State of the Art django svelte [optional +Wagtail] template focused on code quality.

beta.

as it is only a template you could use it in production anyway, but it needs a little more testing to find out if it works out of the box under all circumstances.

Purpose

This project scaffolds a django svelte project structure. It makes havvy use of cookiecutters scripting features, therefore it stays up to date ( but may only work on linux systems )

Features

  • Always up-to-date with the help of install commands
  • Supports latest python3.11+ and Django 4.1+
  • pluggable wagtail and frontend integration
  • Cutting Edge Tech Stack
  • Slim. Features which come on Top of this stack are not intergrated so you are free to choose.

Tech Stack

  • poetry for managing django dependencies
  • environ for 12 factor methology to configure django (and svelte)
  • whitenoise pretty efficient self-contained serving of static files
  • additional wagtail installation for a highly in django integrated cms
  • Vite Up-To-Date Frontend Tooling for Svelte

Install

python3 -m pip install cookiecutter
cookiecutter https://github.com/glanzel/cookiecutter-django-svelte

Run

terminal 1

cd [project_slug]/frontend
npx vite build --watch

terminal2

cd [project_slug]
poetry run python3 manage.py runserver

You should now see the svelte App delivered by django runserver under localhost:8000

Structure

  • frontend contains all svelte code.

  • backend contains the django main settings and application logic and serves the data per rest framework under [server_url]/api/dj/

  • djjs is a django app which provides the generated svelte code via django server process and optionally django frontend code

  • tail contains the wagtail. this aims to act as a better adminarea but can additionally aswell provide data for the frontend themself via [server_url]/api/w2/

Svelte To Django

When builing Svelte via npx vite build --watch each input configured in frontend/vite.config.js becomes one bundle of assets in frontend/generated. (If you need more then one bundle of assets for a mpa just add several there) Each assets bundle is integrated into django inside the djjs app via the [your_name]_assets.html file. So you can easily build a spa or a mixed app with frontend parts from django and svelte together. A fully working hello world example is included.

Django Organisation

I aim to Seperate django core (backend) from wagtail an django forntend app as good as possible. Therefore both apps provides urls and settings files which can be plugged into or apart from the core system easily. If you want to switch to another frontend framework you can just replace djjs/generated and frontend or even remove the whole djjs folder and build your frontend with wagtail for example if you want a more traditional django wagtail webapp.

more to come

if the template get used (wiedly) i will add additional features to it

  • more documentation / small codechanges
  • routing vor svelte (probably svelte-navigator)
  • convert shell script to python for better portability
  • add optional linters, testing tools and or docker support
  • server side rendering feature

cookiecutter-django-svelte's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.