Moving your Laravel App from Webpack to Vite

 Yesterday, we announced that Vite is now the default frontend asset bundler for new Laravel apps, and so far everyone can't believe how fast Vite is.

If you have an existing app and want to start using Vite today, here is a list of resources to help you get migrated.

Laravel Shift released a free Laravel Mix to Vite converter. This will be the easiest way to update since Shift will automate everything.

Laravel Vite Migration Guide - The official Laravel Vite plugin includes an in-depth migration guide.

Christoph Rumpel wrote a tutorial on moving a Laravel Webpack Project over to Vite.

Freek Van der Herten wrote a tutorial on making Vite and Valet play nice together.

creagia has a tutorial on Laravel Vite with Bootstrap and Sass.

All these community projects and tutorials are sure to help get you started working with Vite and to help you transition over to this bundler.

Read More

The State of Laravel Survey 2022

 Laravel celebrated its 10th-anniversary last year. Today it is the most popular PHP framework used by thousands of developers. The ecosystem around Laravel is huge, and new trends are constantly popping up. This survey attempts to gain insight into the representation of this outstanding community's diverse technologies and behaviors.

Each year Tobias Petry leads a community effort to collect information on the state of the Laravel community by running a survey. It is an effort to gain insights into where we are as a community so that we might understand where we are. It is not something backed by a major corporation, nor is it something that collects the data to sell. Instead, it is a simple way for us as the Laravel community to understand where we are - and how we might be able to move forward. Where the trends are leaning and how we might react to that.

It is a fantastic initiative with honest intention and insights that we as a community need. Let's have a look through the statistics for last year to understand where we are coming from:

Various statistics were gathered from this survey, from location to gender and team size - all of which are interesting statistics. But I am going to focus on a few specifics for this article.

The years of programming experience is interesting, and we have the majority of submissions sitting between 2 and 10 years - with 10-20 years leading closely behind. I wonder how much this will change this year?

Let's compare this to their Laravel experience:

So the trend here is around what you would expect. Many developers with 2-5 years of experience are using Laravel, which is very similar to the years of programming experience. The reason we have nothing over ten years is due to Laravels age. You can see the point in people's careers that Laravel came out - and the impact it has had on people adopting it.

Let's compare the usage of different PHP versions people are using next.

It is good to see this statistic leaning this way. More and more people moving their PHP versions forward is a massive step for the PHP community as a whole. As our language progresses, we are becoming more strict on standards and patching, and this chart shows that nicely. There will always be legacy projects that are impossible to upgrade, or the client doesn't have the budget. But the trend is leaning towards the newer and better versions of our beloved language.

Code editors is another interesting one. What are people using to write their code on a day-to-day basis?

Leading the charge is PhpStorm. It is a fantastic product, and it is good to see so many in the community investing in quality tools. Coming in a close second is VS Code, which is getting better and better with each release - and with the right configuration, it can behave almost as well as PhpStorm. Will this year change at all? How about next year with the price increase of the licensing for PhpStorm?

Lastly, let's look at the Operating System usage.

This is pretty well balanced, and you can see the effect of development tooling being focused around the Mac in the Laravel community having a big impact here. It isn't a huge difference between the main competitors - and I am very interested to see what the 0.18% use 👀

So as you can see, the stats aren't anything that will change your mind - but looking through them, we can understand where our fellow developers are, giving us an insight into our market. We have a highly saturated mid-senior level running on PHP 8 and 7.4, mainly using macOS. The most significant amount of contributions for last year did come from Europe, but the creator of the survey is from this continent, so perhaps it is an inadequate representation for everywhere.

Let's see what we can do this year? Perhaps we can start seeing more submissions from the US and Eastern Europe as well as Australia and Asia? Hopefully, we will see the gender split level out more thanks to the fantastic work of communities such as Larabelles.

You can contribute to this year's survey here, and help get more insights into the community.

Read More

Laravel Blade Hot Refresh With Vite

 The Laravel team updated the first-party Laravel vite-plugin package to support full page reload on blade/arbitrary file changes. Vite will do a full page reload when you edit a blade template (or any other file you configure) that changes. No more manual browser refreshing is required during development!

The basic configuration in your vite.config.js file looks like the following when installing a new Laravel project:

 1import { defineConfig } from 'vite';
 2import laravel from 'laravel-vite-plugin';
 3 
 4export default defineConfig({
 5    plugins: [
 6        laravel({
 7            input: [
 8                'resources/css/app.css',
 9                'resources/js/app.js'
10            ],
11            refresh: true,
12        }),
13    ],
14});

The above snippet is what ships with a brand-new Laravel application; you don't have to do anything to get hot reloads working on a new project.

Note the refresh config–when set to true, the Laravel Vite plugin will refresh the page when you update a file in the following paths:

1routes/**
2resources/views/**

That convention might work for most projects, but if you want to include other paths or files, you can configure the refresh property:

 1import { defineConfig } from 'vite';
 2import laravel from 'laravel-vite-plugin';
 3 
 4export default defineConfig({
 5    plugins: [
 6        laravel({
 7            input: [
 8                'resources/css/app.css',
 9                'resources/js/app.js'
10            ],
11            refresh: [
12                'resources/routes/**',
13                'routes/**',
14                'resources/views/**',
15            ],
16        }),
17    ],
18});

See Working with Blade & Routes in the official documentation for further details on configuration options.

Try it out

Let's set up a demo Laravel application to demonstrate hot reloading. First, let's create a new demo project:

1laravel new blade-hot-reload --git
2cd blade-hot-reload

Once the project is installed, add the following somewhere to the <head/> of the welcome.blade.php file found in resources/views/:

1@vite('resources/js/app.js')

Next, you'll want to install NPM dependencies and run the dev command:

1npm install
2npm run dev

And that's it! If you make a change to a blade file or a route, you'll see something like the following in the console:

Any change you make should reflect immediately, depending on your local development environment setup.

Read More