Skip to content

Commit f2907d2

Browse files
committed
Working on assets README
1 parent d0db67b commit f2907d2

File tree

1 file changed

+62
-5
lines changed

1 file changed

+62
-5
lines changed

plain/plain/assets/README.md

+62-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

33
Serve static assets (CSS, JS, images, etc.) directly from your app.
44

5-
The default behavior is for Plain to serve its own assets through a view. This behaves in a way similar to [Whitenoise](https://whitenoise.readthedocs.io/en/latest/).
65

76
## Usage
87

9-
To include assests in your app, put them either in `app/assets` or `app/<package>/assets`.
8+
To serve assets, put them in `app/assets` or `app/{package}/assets`.
109

1110
Then include the `plain.assets.urls` in your `urls.py`:
1211

@@ -22,16 +21,74 @@ urlpatterns = [
2221
]
2322
```
2423

25-
Then in your template you can use the `asset()` function to get the URL.
24+
Now in your template you can use the `asset()` function to get the URL:
2625

2726
```html
2827
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
2928
```
3029

31-
If you ever need to reference an asset directly in Python code, you can use the `get_asset_url()` function.
30+
31+
## Local development
32+
33+
When you're working with `settings.DEBUG = True`, the assets will be served directly from their original location. You don't need to run `plain compile` or configure anything else.
34+
35+
36+
## Production deployment
37+
38+
In production, one of your deployment steps should be to compile the assets.
39+
40+
```bash
41+
plain compile
42+
```
43+
44+
By default, this generates "fingerprinted" and compressed versions of the assets, which are then served by your app. This means that a file like `main.css` will result in two new files, like `main.d0db67b.css` and `main.d0db67b.css.gz`.
45+
46+
The purpose of fingerprinting the assets is to allow the browser to cache them indefinitely. When the content of the file changes, the fingerprint will change, and the browser will use the newer file. This cuts down on the number of requests that your app has to handle related to assets.
47+
48+
49+
## FAQs
50+
51+
### How do you reference assets in Python code?
3252

3353
```python
3454
from plain.assets.urls import get_asset_url
3555

36-
print(get_asset_url("css/style.css"))
56+
url = get_asset_url("css/style.css")
57+
```
58+
59+
### What if I need the files in a different location?
60+
61+
The generated/copied files are stored in `{repo}/.plain/assets/compiled`. If you need them to be somewhere else, try simply moving them after compilation.
62+
63+
```bash
64+
plain compile
65+
mv .plain/assets/compiled /path/to/your/static
3766
```
67+
68+
### How do I upload the assets to a CDN?
69+
70+
The steps for this will vary, but the general idea is to compile them, and then upload the compiled assets.
71+
72+
```bash
73+
plain compile
74+
./example-upload-to-cdn-script
75+
```
76+
77+
Use the `ASSETS_BASE_URL` setting to tell the `{{ asset() }}` template function where to point.
78+
79+
```python
80+
# app/settings.py
81+
ASSETS_BASE_URL = "https://cdn.example.com/"
82+
```
83+
84+
85+
### Why aren't the originals copied to the compiled directory?
86+
87+
The default behavior is to fingerprint assets, which is an exact copy of the original file but with a different filename. The originals aren't copied over because you should generally always use this fingerprinted path (that automatically uses longer-lived caching).
88+
89+
If you need the originals for any reason, you can use `plain compile --keep-original`, though this will typically be combined with `--no-fingerprint` otherwise the fingerprinted files will still get priority in `{{ asset() }}` template calls.
90+
91+
92+
### What about source maps or imported css files?
93+
94+
TODO

0 commit comments

Comments
 (0)