Alright, let's ease into this series with something nice and simple, but also pretty useful. But, real quick, just keep in mind that I will assume that you have a general, basic familiarity with Inertia. If you don't, of course we have you covered. We have a free series at Laracast called Build Modern Laravel Apps Using Inertia, and I will link to that in the notes below. Okay. Now, have a look here. I have a Laravel app that uses Inertia.

Now, have a look here. I have a Laravel app that uses Inertia. This is actually the demo app from that series that I just referenced. And if I come down to the users page, where we show all of our users, I'm going to scroll down and I'd like you to take a look at this section right here, where we import a pagination component. Now, you'll notice here I'm going up to a shared directory, and I think you'll probably find that you do this all the time. Maybe you're even a third level deep and you need to go into a components directory, and it's just a little bit messy.

Maybe you're even a third level deep and you need to go into a components directory, and it's just a little bit messy. So instead, if you use something like Webpack, you can easily set up aliases. For example, I could use something as simple as the @ symbol, and then the shared directory. So let's see if we can get this to work. Now, this project uses Laravel Mix, but I'm also going to show you a general Webpack way. So here's my webpack.mix.js file, very, very simple. I'm going to go right down here and we're going to add a new Webpack alias. The alias is called @ symbol, and that's going to take us to resources/js. Think of it almost like a snippet.

The alias is called @, and that's going to take us to resources/js. Think of it almost like a snippet. The @ symbol is a snippet that will take us to the resources/js directory, which is what I want. All right, let's go to the terminal, boot up my watcher. All right, we should be all set. So if I come to that project now in Firefox, here's that User's page. And if I scroll down, there's the pagination component we imported. And if I click around, you can see everything still works the way it did before. So yeah, these are slight little techniques that can really help with readability.

And if I click around, you can see everything still works the way it did before. So yeah, these are slight little techniques that can really help with readability. But there's still one problem. You'll notice that, yes, everything's compiling just fine, and yet my editor, PhpStorm in this case, doesn't really know how to process this. So if I hover over it, it'll say, well, I don't know any module with this path. What do you want me to do? Here's how we can fix that. Let me bring up settings. And again, I'm using PhpStorm here.

Let me bring up settings. And again, I'm using PhpStorm here. So this is a little specific to that editor. But you'll see in the Webpack settings, it can detect Webpack configuration files for module resolution. And that's what we're doing here. So you'll see it automatically tries to detect that by reading your Webpack config file. The only problem is we're using Laravel Mix in this case, so there is no config file. Now I wish PhpStorm could just read the mix file and do it for us, but right now it can't. So I'm going to show you how to fix this.

Now I wish PhpStorm could just read the webpack.mix file and do it for us, but right now it can't. So I'm going to show you how to fix this. I'm going to create a new file here called Webpack.config.js. And we'll say module.exports, and I'm effectively going to manually create that alias and then import it into my mix file. So I'm going to resolve an alias, and that alias is the at symbol. And I'll need to use path.resolve. So I will import that to give us the full path to the resources/js directory. So that's the manual Webpack way to do it. Okay, so now if I come back to my webpack.mix file, if you want, we can actually keep this

So that's the manual Webpack way to do it. Okay, so now if I come back to my webpack.mix file, if you want, we can actually keep this as it is, because remember, what we're doing here in this Webpack config file is mostly to make PhpStorm happy. Right now it has no bearing whatsoever on our compilation. But the only downside is that I'm now declaring the alias here, but I'm also doing it here. So if six months from now I change this for some reason, maybe I'm working on the next version of our JavaScript or something like that, it might be easy to forget that we also need to update it here. Again, not really a big deal either way, but something to keep in mind.

need to update it here. Again, not really a big deal either way, but something to keep in mind. So if you don't want any duplication at all, here's what you could do. In your webpack.mix.js file, we'll say const webpackConfig, and I'm going to require it, like so. And then with Laravel Mix, I can add a standard Webpack config object that will be merged in with mix's generated config object. Okay, and that will do the same thing. Compile your JavaScript, use some Vue, use some PostCSS, and also merge in the Webpack config that is found here. Now PhpStorm will automatically read this file, it will detect your alias, and it will

config that is found here. Now phpStorm will automatically read this file, it will detect your alias, and it will correctly interpret it wherever it's being used. So notice I no longer see an exception there, and I can click right through to the component. So a small little tweak there, but it's actually pretty helpful.