Skip to content

Commit

Permalink
docs: update asset-related documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
innocenzi committed Sep 27, 2021
1 parent caf6aff commit eb85fa9
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 12 deletions.
10 changes: 8 additions & 2 deletions docs/guide/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ See [Local `https` doesn't work](#local-https-does-t-work).

## Imported assets don't load in the local environment

This is a known issue caused by Vite stripping the hostname of the base URL when developping locally. A way around this issue is to [automatically replace all asset URLs in the code](https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets) with a Vite plugin.
**Make sure you are using Vite v2.6.0+**.

While this fix works in most cases, you may still encounter cases where it fails. In this case use a fallback route to act as an other workaround:
Before that, there was a known issue caused by Vite stripping the hostname of the base URL when developping locally. A way around this issue was to use a fallback route to redirect to the right URL:

```php
// AppServiceProvider.php
Expand All @@ -56,3 +56,9 @@ Route::get('/resources/{path}', function (string $path) {
return Redirect::to(config('vite.dev_url') . '/resources/' . $path);
})->where('path', '.*');
```

This method is deprecated and will be removed in a future version.

## How do I get the path of a Vite -rocessed asset from the back-end?

There is currently no way to get the path of a Vite-processed asset (eg. an image that was imported in a Vue SFC) from the back-end, since the manifest does not reference the original file path. In most cases, this should not be an issue, as this is not a common use case.
10 changes: 0 additions & 10 deletions docs/guide/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,16 +146,6 @@ In production:

If you want to use a directory other than `resources/static`, you can change the [`public_directory` option](/guide/configuration#public-directory).

## Vite-processed assets

There is currently [an unsolved issue when referencing assets in files processed by Vite](https://github.com/vitejs/vite/issues/2196), such as a Vue or CSS file.

A way around this issue is to [automatically replace all asset URLs in the code](https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets) with a Vite plugin.

An other workaround would be to add a fallback route. This can be done by Laravel Vite by calling `Vite::redirectAssets()` in a service provider. Read more in the [troubleshooting](./troubleshooting) section.

Additionally, there is currently no way to get the path of a Vite-processed asset (eg. an image that was imported in a Vue SFC) from the back-end, since the manifest does not reference the original file path. In most cases, this should not be an issue, as this is not a common use case.

## PostCSS and Tailwind CSS

If a PostCSS configuration file is present, Vite understands it out of the box, so you don't need to take action. It is also possible to directly feed a list of plugin to Vite inside `vite.config.ts`:
Expand Down

0 comments on commit eb85fa9

Please # to comment.