Skip to content

Commit 3617d32

Browse files
committed
Add comprehensive example to readme
1 parent 474e8de commit 3617d32

File tree

1 file changed

+54
-1
lines changed

1 file changed

+54
-1
lines changed

README.md

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,57 @@ Manifests are JSON files with at least the following three properties:
9191
* `destination` - The directory (relative to `$config->fileBase`) for the assets
9292
* `resources` - The list of resources to publish, each with at least its own `source`.
9393

94-
See [examples/](examples/) for some example manifest files.
94+
See [examples/](examples/) for some example manifest files compatible with their Composer
95+
sources.
96+
97+
## Example
98+
99+
You want to make a simple web app for browsing and uploading files, based on Bootstrap's
100+
frontend. Start your CodeIgniter 4 project, then add Bootstrap and DropzoneJS to handle
101+
the uploads:
102+
103+
composer require twbs/bootstrap enyo/dropzone
104+
105+
Add this module as well:
106+
107+
composer require tatter\assets
108+
109+
Create manifests and the config file in your project:
110+
```
111+
mkdir app/Manifests
112+
cp vendor/tatter/assets/examples/Dropzone.json app/Manifests/
113+
cp vendor/tatter/assets/examples/Bootstrap.json app/Manifests/
114+
cp vendor/tatter/assets/bin/Assets.php app/Config/
115+
```
116+
117+
Edit your config file so Bootstrap will always load, and DropzoneJS will load on certain routes:
118+
119+
```
120+
public $routes = [
121+
'' => [
122+
'vendor/bootstrap/bootstrap.min.css',
123+
'vendor/bootstrap/bootstrap.bundle.min.js',
124+
],
125+
'files' => [
126+
'vendor/dropzone/',
127+
],
128+
];
129+
```
130+
131+
Run the publish command to inject the assets into **public/vendor/**:
132+
133+
php spark assets:publish
134+
135+
Finally, add the service methods to the header and footer of your view template so the CSS
136+
and JS tags are loaded automatically:
137+
```
138+
<head>
139+
<?= service('assets')->css() ?>
140+
</head>
141+
<body>
142+
143+
...
144+
145+
<?= service('assets')->js() ?>
146+
</body>
147+
```

0 commit comments

Comments
 (0)