0

I created my first Laravel Sail yesterday but I've a tiny problem with Vue because creating a frontend in a separated folder caused some headache to me. As there are two different package.json one in the project root and the other in frontend folder. So whenever I need to execute npm run dev I've to use --prefix for pointing to frontend folder. Same issue with npx I've to point to the frontend by selecting the workspace!!!

I definitely suspect there is something wrong with my practice. So may you please guide me to the best practice to use Laravel Sail + Laravel backend api + Vue frontend?

Steps I did to create my project structure:

  1. curl -s https://laravel.build/example-app | bash
  2. Added alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail' into ~/.bashrc
  3. executed sail up from project's root
  4. sail npm init vite frontend
  5. cd ./frontend
  6. sail npm i ---> ERROR because there is no sail in sub-folder
  7. cd ..
  8. sail npm i --prefix ./frontend
  9. sail npm run dev --prefix ./frontend ---> ERROR because it hasn't --host
  10. Modified frontend/package.json to dev": "vite --host"
  11. sail npm run dev --prefix ./frontend
  12. sail npm install --prefix ./frontend/ -D tailwindcss postcss autoprefixer
  13. sail npx --prefix ./frontend/ tailwindcss init -p ---> ERROR npx doesn't accept --prefix
  14. sail npx -w ./frontend/ tailwindcss init -p ---> ERROR there is no workspace configured!
  15. cd frontend/
  16. ln -s ../vendor/laravel/sail/bin/sail sail
  17. ./sail npx tailwindcss init -p
  18. rm ./sail
  19. cd ..

As you can see calling --prefix is really lame solution and the most stupid steps were 13... 18 because I needed to find a workaround by creating a symbolic link then delete it once again... really lame!

BTW, in 17. step although the current path is ./frontend but npx generates the entries in project's root package.json instead of frontend/package.json so I moved them manually from package.json to frontend/package.json !!!

mbnoimi
  • 490
  • 4
  • 21
  • Yes, there's a wrong thing. Don't put frontend app inside backend app. This doesn't make sense, they have different sets of deps, the only thing in common is that frontend `dist` should be copied to backend `public` on build. – Estus Flask Aug 27 '22 at 06:42
  • But if I set `frontend` folder out of Laravel sail app I no longer able to call `sail up` or `docker-compose up` unless I manually modified `docker-compose.yml` which is created automatically by Laravel sail (I don't prefer to take this direction) – mbnoimi Aug 27 '22 at 10:12
  • I see. I believe this container was engineered in an odd way, not sure if there's a good way to handle it. Generally you'd avoid such setup in Node projects, it's impractical. I'm not sure why "sail" command was used for everything that is not sail, i.e. Vue project. Should be "npm i" etc if possible. Any way, this is specific to the container – Estus Flask Aug 27 '22 at 10:18
  • Yup, because of that I'm trying to keep along with Laravel guys (Sail project) – mbnoimi Aug 27 '22 at 10:33
  • Sail auto configure Vite with any Laravel Sail project for that there are already `package.json` – mbnoimi Aug 27 '22 at 10:49

1 Answers1

0

Just call it in the root directory

~/www/your-name-project sail npm --prefix ./frontend install 
~/www/your-name-project sail npm --prefix ./frontend run dev
helvete
  • 2,455
  • 13
  • 33
  • 37
SmereKa
  • 1
  • 1