Boost Laravel Sail & Your Productivity | Octane with Swoole | Hot-Reload | Xdebug | VS Code

speed up your larval sale from this for this with swool more tricks to make your daily dev work more productive [Music] if you haven't set up your lauravelle sale yet click the link above i will start with a fresh project for demo purposes verify the wsl status get into the ubuntu wsl cd into user home directory and create a code folder verify it with double backslash wsl dollar sign in windows explorer cd into code folder and create the fresh laravel sale project [Music] cd into test project and execute sail up-d refer to my previous video if you are a newcomer [Music] the container is in green and it is up and running let's install laravel octane [Music] then initialize the octane enter 1 for swool enter code dot to open the vs code [Music] make sure connected to wsl by the time of this recording laravel octane still not yet support https wool we need to edit the vendor file temporary go to vendor laravel octane then create swoolserver.php observe line 10 make sure it is already updated as shown my pull request is accepted but you have to update to the latest octane version meanwhile you need to update this file manually next edit config octane.php all code snippets can be obtained with the link in the description we paste the config for https swool after the swool table section you can turn on or off https with this flag the ssl cert and key will be generated later [Music] edit the dot env file now adding octane underscore https flag to be true this flag is just for the url generation prefix next we need to customize our docker image publish the docker config files [Music] you can see the docker compose file and docker folder appear under the docker 8.0 folder edit the supervisor d.config to keep swool up and running we need to edit the command copy from gist then paste it from this command you can see our swool server will be on port 8000 the watch option will keep reloading for your code changes we need to install another node library to enable the file watching function now we need to do the port mapping in docker composer.yawn at the port section add dash 8000 colon 8000 then save it finally open docker file in the docker 8.0 folder copy from gist paste the code after the sale user creation on line 47. this will generate the required ssl cert and key for localhost everything is ready now we need to shut down the container and rebuild no container is up we can rebuild now it will take some time any download issue you can run the same command again [Music] build complete let's bring up the containers [Music] on the dashboard it is shown as green you may remove the old image [Music] verify the octane status [Music] [Music] open chrome enter https colon double slash local host colon 8000 the warning appears due to the self-signed certificate click advanced then proceed to local host you should be able to see the laravel welcome page you may also take a look at the self-signed cert [Music] you may notice a pop-up when you launch the vs code to let vs code utilize the php executable inside our container you need some tricks to expose the php click open settings select the wsl tab search for php click edit in settings.json paste the setting this will not work if you try to execute the p h p dash v in wsl it won't work as well we always need to add sale before our command we need the php in this container [Music] so we create the php executable here [Music] paste this code from gist this script will map the php from the laravel app container save and exit then make it executable [Music] try php dash v again it should be working now back to vs code we need to change it to the full path save it then no more error pop up [Music] restart the vs code to confirm no more error pop-up [Music] tired of a manual refresh for every change go to webpack.mix.js paste these codes then map the port 3000 at dockercomposer.yawn rebuild is not required sail down [Music] then sail up dash d again [Music] execute the command to start watching [Music] after the installation it asks you to run the command again change the port from 8000 to 3000 you will see the browser sync connected try to make a change once the vs code auto save chrome will reflect immediately [Music] due to the architectural differences xdbug does not work on swool here is the trick to make it work adding the arguments in the docker compose file [Music] the first one checking the app debug variable in your dot env file the next is the listening port followed by the default value then edit the docker file in docker 8.0 folder paste the code from gist [Music] this section checks the debug flag then install xdebug and configure it [Music] now edit the supervisor d.config [Music] we need to use the php built-in server for xdebug rename the octane instance [Music] copy from gist and paste another instance that serves port 80. [Music] we need to rebuild our container [Music] start the container again [Music] make sure php debug extension is installed press ctrl shift and d click create a launch.json file select php replace it with my code from gist [Music] write some sample code for the demo [Music] set the breakpoints start the debugger go to chrome open localhost it won't hit the breakpoint now we need to install this x debug helper extension [Music] pin it for easy access click debug to start once you see the green bug icon try to refresh the page now it hits the breakpoint you can see the left side for variable content click continue for the next breakpoint you can see the variable has changed click continue again it will return the welcome view you can click disable at any time [Music] the swool is still serving on port 8000 [Music] thanks for watching please press the like button and subscribe to my channel and click the bell to turn on the new video notification see you all soon thank you

Channel: Dogcomp

Views: 5,096

Keywords: laravel 8, laravel sail, laravel sail windows, PHP, Docker, Laravel Sail, windows 10, wsl 2, laravel docker, beginner web development, vs code, laravel docker windows 10, laravel with docker, laravel 8 tutorial, web development, laravel dev environment, laravel development, laravel docker-compose, laravel + docker, laravel and docker, swoole php, laravel octane demo, laravel octane tutorial, xdebug docker, xdebug vscode, laravel mix hot reload not working, https swoole

Id: 0KjyubRdtvA

Length: 11min 8sec (668 seconds)

Published: Tue Jul 13 2021