search

hotwired-laravel / turbo-laravel

This package gives you a set of conventions to make the most out of Hotwire in Laravel.
https://turbo-laravel.com
MIT License
793 stars 48 forks source link

How to install turbo-laravel ??? #113

Closed alnux closed 1 year ago

alnux commented 1 year ago

The installation guide does not install turbo, becouse after follow steps on https://bootcamp.turbo-laravel.com/installation#content-installing-turbo-laravel and write on console browser the word Turbo it shows the next error. im using valet link and secure with Laravel v10.14.1 (PHP v8.2.7)

145:1 Uncaught ReferenceError: turbo is not defined
    at <anonymous>:1:1
tonysm commented 1 year ago

Hey @alnux

I just tried the Bootcamp install instructions, it works. Are you trying to type turbo in the console while you're in the welcome page? If so, that page doesn't include the scripts. If you try either in the login, register, or dashboard pages, you should see the Turbo object available there.

I'm gonna close the issue for now. Let me know if you still think there's something wrong here.

alnux commented 1 year ago

hi @tonysm I was trying in many ways, and I was confused about compiling with npm and the importmap package but in the end I was able to install it in an already functional application. And for those who are confused with this great package, here are the instructions to install it.

1.- First of all and in order not to use the npm compilation we are going to install importmap-laravel first. It is important that you install this package first in order for Turbo-laravel to work because the browser will give an error of with /, ../, or ./ and it will not run in the console.

composer require tonysm/importmap-laravel

and after php artisan importmap:install

finally php artisan storage:link

Note: if you finished your project you have to optimize it and you want it for production you have to use (php artisan importmap:optimize)

2.- Now we can install turbo-laravel composer require hotwired/turbo-laravel

then php artisan turbo:install

3.- In you main blade layout (the one that has html and header tags) add the next inside header tag

<meta name="csrf-token" content="{{ csrf_token() }}">
<x-importmap-tags />

4.- Open the browser go to your app (http://domain.test) and open dev option, refresh your page, if you see a error talks about reading 'FormData' is becouse axios has problems working with ESM and importmap (read here) so we need replace axios with a old version, to do this we need to do next:

php artisan importmap:unpin axios

and pin the old version

php artisan importmap:pin axios@0.27

that's all, be careful with some browsers, it is necessary to clear the cache of these so that the page loads correctly (for example yandex browser)