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>1 maintainer
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.3.tar.gz.
File metadata
- Download URL: djsnowpack-0.1.3.tar.gz
- Upload date:
- Size: 6.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.2.0 pkginfo/1.6.1 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 |
f93ea88cd0d73defd3b24022b4c1d7a15682cee35f6b05fda82bdaef5e35fea4
|
|
| MD5 |
94d1d5fa49f414dbf33f4d5f70661280
|
|
| BLAKE2b-256 |
638868eeb84e2ce7169f81857071b9b0b1b507d70842612acacfa455efcb61c8
|
