Skip to content

Commit 8d972a2

Browse files
Rafał Dzięgielewskigitbook-bot
Rafał Dzięgielewski
authored andcommitted
GITBOOK-99: Add migration documentation for @adminjs/bundler
1 parent 141bff2 commit 8d972a2

File tree

1 file changed

+47
-0
lines changed

1 file changed

+47
-0
lines changed

installation/migration-guide-v7.md

+47
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,53 @@ locale: {
369369
}
370370
```
371371

372+
## @adminjs/bundler
373+
374+
`@adminjs/bundler` is a library which allows you to prebundle all AdminJS browser assets:
375+
376+
* `app.bundle.js` 
377+
* `design-system.bundle.js`
378+
* `global.bundle.js`
379+
* `components.bundle.js`
380+
381+
It is especially useful when you are deploying AdminJS to a server which doesn't grant you write access which AdminJS needs by default to create `components.bundle.js` which contains your custom components. `@adminjs/bundler` is a package which exports an in-code `bundle` script which you can use to solve the mentioned issue by:
382+
383+
1. Pregenerating all bundle files.
384+
2. Serving them as static files on your server OR uploading them to a public storage such as AWS S3.
385+
386+
With the release of version 7, this package is now ESM-only and `ComponentLoader` support has been added. The script's usage has been simplified because we'd removed `customComponentsInitializationFilePath` and `adminJsOptions`. You now simply have to provide your `componentLoader` instance. Example:
387+
388+
```typescript
389+
import { bundle } from '@adminjs/bundler';
390+
391+
import componentLoader from './component-loader.js';
392+
393+
(async () => {
394+
const files = await bundle({
395+
componentLoader,
396+
destinationDir: 'public', // relative to CWD
397+
});
398+
})();
399+
```
400+
401+
Now either serve the contents of `destinationDir` publicly on your server, example for Express:
402+
403+
```typescript
404+
app.use(express.static(path.join(process.cwd(), 'public')));
405+
```
406+
407+
or upload `destinationDir` contents to a storage of your choice (it has to be publicly accessible).
408+
409+
Now, remember to set `assetsCDN` option in your `AdminJS` configuration:
410+
411+
```typescript
412+
// ...
413+
const admin = new AdminJS({
414+
// ...,
415+
assetsCDN: '<PUBLIC_ASSETS_URL>'
416+
})
417+
```
418+
372419
## Demo Application
373420

374421
Our demo application at [https://demo.adminjs.co/admin/login](https://demo.adminjs.co/admin/login) contains all the changes described above. If you're still struggling with the migration, you can take a look at a pull request which introduces these changes to our demo app: [https://github.com/SoftwareBrothers/adminjs-example-app/pull/68](https://github.com/SoftwareBrothers/adminjs-example-app/pull/68/)

0 commit comments

Comments
 (0)