Django + Snowpack = djsnowpack
Project description
Snowpack is the fastest and easiest way ever to benefit from npm and imports in frontend code without going full SPA.
What this does
MUCH faster frontend development !
Elected Productivity Booster OS Award 2020, Snowpack is a frontend builder with a startup time of 50ms, which typically can be 30s in a typical Webpack project. It’s so fast I feel like a 300.000% speedup (from 30 to less than 1 second).
Change your CSS or JS and your Django page will reload !
Changing a frontend file will typically not cause a Django view reload because Django doesn’t want to provide JS by default: djsnowpack provides a solution for that.
Demo
# go and make a virtualenv in /tmp
cd /tmp
virtualenv /tmp/djsnowpack_demo
source /tmp/djsnowpack_demo/bin/activate
# clone and install the app and example project
git clone https://yourlabs.io/oss/djsnowpack
cd djsnowpack
pip install .
# install example project dependencies and start server
cd djsnowpack_example
pip install django
yarn install
./manage.py runserverThe green title at the top left of the Django demo page should say “djsnowpack working fine !!!” because that’s what the djsnowpack_example/index.js is like, try to change index.js and see the browser magically update in a heartbeat !
Getting started
Install: pip install djsnowpack,
Add to settings.MIDDLEWARE: djsnowpack.Middleware,
Add to settings.STATICFILES_DIRS: os.path.join(BASE_DIR, 'build').
This allows you to have a Snowpack frontend project inside your settings.BASE_DIR.
You should see a minimal example in djsnowpack_example directory:
package.json: get one from a template project, minimal one is good to just get going without any specific framework or library
index.html: snowpack needs it to work so you’ll just put it there once and then forget about it
index.js: this is the entrypoint that will be served by snowpack
index.css: same but optional and for styles, sass works well with snowpack too
DANGER: you MUST have the following in your index.html to make Django view reload on JS change:
if (import.meta.hot) {
import.meta.hot.accept(({ module }) => {
import.meta.hot.invalidate();
});
}index.html content:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/index.css" />
</head>
<body>
<script type="module" src="/index.js"></script>
</body>
</html>
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
File details
Details for the file djsnowpack-0.1.1.tar.gz.
File metadata
- Download URL: djsnowpack-0.1.1.tar.gz
- Upload date:
- Size: 6.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.2.0 pkginfo/1.6.0 requests/2.24.0 setuptools/41.2.0 requests-toolbelt/0.9.1 tqdm/4.51.0 CPython/3.8.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 1eb1c29fb59ea54674f2f59b1ca6ab0b81aebf2c7e23aefd938f7da46f0a2ebc |
|
| MD5 | 687d28979490eb8df729b1a1de6fd52d |
|
| BLAKE2b-256 | e6d7fafa3da44bc7d4e8e2e09de583cd42064c3890aa69ce2b1716010246e637 |
