laravel - PHP blade template live edit with Idea intellij?

Solution:

If you are wanting this feature, you need to get some service like browserSync running. I think you'll need to use a more real world web server than the build in one, but I'm not sure.

I've had this running by using Laradock locally, once Laradock is set up it's pretty easy to get browswersync running and get live refreshes.

Answer

Solution:

NOTE: The instructions are not dependent on XAMPP. You could use any apache/nginx server setup stack. i.e LAMP to follow along.

This assumes that you're using XAMPP

Install XAMPP.
Move/set up your project to the htdocs folder of XAMPP. (C:\xampp\htdocs)

NOTE: Moving forward, I'll use your-project to mean your actual project name.

Set up a virtual host for your project. i.e:

Open the file: C:\xampp\apache\conf\extra\httpd-vhosts.conf

Then add the tags below at the end of this file:

  <VirtualHost *:80>
      ServerAdmin steve@steve.com
      DocumentRoot "C:\xampp\htdocs\your-project\public"
      ServerName local.your-project

      <Directory "C:/xampp/htdocs">
           Options Indexes FollowSymLinks
           AllowOverride All
           Order allow,deny
           Allow from all
           Require all granted
      </Directory>
  </VirtualHost>

You may change the ServeAdmin and DocumentRoot as you which.

Adjust your hosts file to always route to 127.0.0.1 when you access the project from the browser.

For "Windows Operating System" users, you will find the file at: C:\Windows\System32\drivers\etc\hosts

Open the hosts file and add the line below at the end:

127.0.0.1 local.your-project

Ensure that the necessary PHP extensions are enabled/installed to smoothly run your project.

You may need to remove the preceding ; characters on the respective lines to enable these extensions.

For "Windows Operating System" users, you will find the configuration file at: C:\xampp\php\php.ini

Open your php.ini configuration file and confirm that the extensions below are enabled.

    ; Directory in which the loadable extensions (modules) reside.
    ; http://php.net/extension-dir
    ;extension_dir = "./"
    ; On windows:
    extension_dir="C:\xampp\php\ext"

    extension=bz2
    extension=curl
    extension=fileinfo
    extension=gd
    extension=gettext
    extension=intl
    extension=mbstring
    extension=exif
    extension=openssl
    extension=pdo_mysql
    extension=mysqli
    extension=php_openssl.dll
    extension=php_ftp.dll

NOTE: All commands below assume that your terminal/command prompt is pointing at your project root directory. i.e: cd C:\xampp\htdocs\your-project

Ensure that both MySQL and Apache services are running.

Set up Laravel mix with .

NOTE: The commands below assume that Node.js and NPM are already installed on your computer.

Install browser-sync

npm i browser-sync --save-dev

Install browser-sync-webpack-plugin

npm install browser-sync-webpack-plugin --save-dev

Install any pending unrun dependencies.

npm install

Open the file at your-project-root-directory\webpack.mix.js

Add the configuration below at the end of that file.

// ...

mix.browserSync({
    port: 8089,
    proxy: {
        target: "http://local.your-project/",
    }

});

[OPTIONAL]. If you use sass in your application, you may wish to include the dependencies below.

npm install sass-loader sass resolve-url-loader --save-dev

Compile your assets.

npm run dev

Start watching project file changes.

npm run watch

At this time, if your browser was already open, your project might have loaded automatically. If that wasn't the case, open your browser and search for this URL. http://localhost:8089/

This denotes the port you set up while configuring browserSync.

From this point onwards, browserSync will refresh the page automatically whenever you change a project file.

Next Steps (Moving Forward)

Whenever you start working on your project, just make sure that both MySQL and Apache services are running. Then run npm run watch in your terminal for browserSync to start listening for file changes.

Extra resources

Laravel | Compiling Assets (Mix)

Laravel | Laravel Mix

Source