Today, I thought you might like to come along as I publish the beta release of Laravel Mix 4. And specifically, we'll talk about the basic workflow and commands you need to run to publish it on both NPM and GitHub. This can always be a little confusing, because you want to be careful that for a beta release, when users say npm install, in my case, Laravel Mix, well, we don't want them to pull in the beta release. They should still stick with the stable version. So they need to opt-in to the beta release. Let's figure out how to do all of that for any NPM package.

So they need to opt-in to the beta release. Let's figure out how to do all of that for any NPM package. The first step is, well, real quick, Laravel Mix version 4 upgrades the code base for Babel 7 and Webpack 4. In the latter, Webpack 4 does include breaking changes. So we need to make sure that we stay in line with that and do a full major release. Okay. So if I switch to the terminal, you can see I'm on a branch called v4 for version 4. All of the tests are passing if I were to run that. So I'm going to switch to my master branch and go ahead and merge that in.

All of the tests are passing if I were to run that. So I'm going to switch to my master branch and go ahead and merge that in. Okay. And of course, at this point, you would want to run all of your tests again. But in my case, it takes about a minute for all of these to run. So I know they're passing. I'm going to keep that closed. All right. So anyways, I'm going to switch back to package.json, and we do want to bump to a major release. So in general, for your releases, you have patches, like 1, 2, 3.

So we'll specify it as a beta release, version 1. And then if we're still not ready for the 4.0 release, we can keep bumping this up, like so. Okay. So if I run git status, we've changed that. So let's add it and commit with a message of our new version. Next, while we're here, let's go ahead and tag it as well. Okay. So at this point, let's go ahead and push it up to master. But remember, this is pushing our code to GitHub.

So at this point, let's go ahead and push it up to master. But remember, this is pushing our code to GitHub. It's still not available on npm. So for example, if I were to say npm info for this package, you'll see the latest version is 3.0, which means if I were to install it, and in fact, let's just do this together to make it crystal clear. Let's just make a project called testing npm. And then we'll run npm install layerfile-mix. Sure enough, you can see that it did pull in version 3.

Sure enough, you can see that it did pull in version 3. Okay. So if I open a new tab, let's go back to my mix codebase. And I will publish this to npm, but I want to make sure that I tag it. So I will be specific that I'm publishing the beta tag, or under the beta tag. Okay. It's now up there. So let's give npm info another run. And this time you'll see that the latest version is 3.0. But if I do want to pull in the beta, I can now do that.

And this time you'll see that the latest version is 3.0. But if I do want to pull in the beta, I can now do that. Okay. So let's give this another shot. npm install layerfile-mix and the beta tag. Or of course, I could do the exact version. Or I could do 4.0.0-beta.1. Anyways, let's give this another minute to install. And there we go. Now we've pulled in the beta release of layerfile-mix 4.

I'll just say for now, full notes coming soon. Okay, and let's publish that release. And there we go. So finally, let's pull this into a brand new Laravel project. I'll go to my web directory, and I'll say laravel new project, and give that a moment. Okay, let's cd in there, and open this in Sublime. And do note, if I go to my package.json file, at the moment, it's going to pull in version 2, because we haven't yet, of course, updated the Laravel repo. So let's bump it, like so, and then install all of my dependencies. All right, we're all set to go.

So let's bump it, like so, and then install all of my dependencies. All right, we're all set to go. So back to Sublime. Of course, we have a default webpack.mix.js file included out of the box. So if I give this a run, take a look. We're all set to go. So let's do this. Let's go to the welcome page. This is the default Laravel page. And right down here, let's pull in mix-css, and what is it called, app.css.

This is the default Laravel page. And right down here, let's pull in mix-css, and what is it called, app.css. And then at the bottom of the page, we'll add our script. And view this in the browser. And there we go. So let's see the console. We forgot to add our app element. Maybe we can put it... Give it a refresh. And no CSRF token, but that's fine.

Give it a refresh. And no CSRF token, but that's fine. So let's see if we can pull in one of our components. We'll go to app.js, and you can see we do register a global example component that we can find right here. Okay, let's see if we can pull that in. We'll just do this right down here. All right, switch back to Chrome. Give it a refresh, but we still don't see it. And if I open up Chrome DevTools, this is kind of what I wanted to show you here.

Give it a refresh, but we still don't see it. And if I open up Chrome DevTools, this is kind of what I wanted to show you here. And this is part of why Laravel Mix 4 is also a breaking release, because there's little things that have been changed with the latest version of ViewLoader and Webpack and Babel that basically requires us. So in this case, it still can't seem to find the example component. And this is because, with a recent change with ViewLoader in our app.js file, well, if we're going to use this old require syntax, we have to append .default. Okay, so let's go ahead and compile that down one more time. And if we now switch back to Chrome and give it a refresh, we now see that.