FREELessons: 7Length: 56 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Adding Stimulus to Your Build Process

There's nothing wrong with using the CDN, but chances are you want to incorporate Stimulus into your build process. I'll show you which NPM packages you need and how to configure your project to automagically load your controllers.

2.4 Adding Stimulus to Your Build Process

So far we've been just fine using Stimulus as is, by referencing it in our HTML. Now, we could have done things a little bit better, like for example, inside of app.js, instead of writing our classes inside of here, we could have broken those out into their own files. But that would mean that we would also have to reference them inside of our markup so that we would have them in the browser, and then we would still need to manually register them here. But our registration code would be a lot cleaner because we wouldn't have the class code here. Now, there is something to say about the simplicity of taking this approach, because it is rather simple. You simply add the files that you need and then manually register them. But there is some tedium involved there, becuase any new controler that you write you have to come and add a reference inside the of the HTML, then you have to manually register that. And that's where a build process can take a lot of the work away from us. This tedious stuff can be done by the build process so that we don't have to worry about that. And so that's what we are going to focus on in this lesson. And we're going to start with our package.json file. So we have one dev dependency, and that is our light server, but we also need a few other things if we are going to use a build process. Like for example, we could use webpack, but if you wanted to use something other than webpack, you could. The only thing is, the Stimulus package has some tools that make it easy to register controllers. In fact, it's just done automatically. And it's only done that way with webpack. So yes, you can use whatever build process you want, but webpack is what is supported out of the box with Stimulus. So here's what we need. Nothing is really out of the ordinary. We want babel-core, we want babel-loader. Now, this babel-plugin-transform-class-properties, that's a mouthful. But this is specifically referenced in the stimulus documentation as we need it. So we definitely want that package, and then the preset and the stimulus package, that is rather obvious, and then finally webpack. So these are the packages that we need. So let's go to he command line, and let's run npm install, or yarn if that's what you're using. And then let me add in a few other files, because we could type these out, but when it comes to stuff like this I just take stuff from another project and just make any necessary changes. So this is going to be the babelrc, which is of course our configuration for babel. And really it's just saying that we want the transform-class-properties plugin, and we're using our preset, and that's it. Now, as far as our webpack file is concerned, it's pretty standard. We are pulling in paths so that we can resolve paths a lot easier. Our entry point is gonna be a little bit different because we are going to organize our project a little bit differently. We have this public folder which we have been using and we will continue to use, but I want to put all of our source code inside of another folder outside of public. So let's go ahead and do that. We will call it source. And then inside of source, we're going to create another folder called controllers, and we're going to put all of our controllers there. And then inside of source, our existing app js file is going to be inside of source. That is going to be our entry point. As you can see right here, the path is src/app.js. And so we're going to have an output file that's going to bundle everything together, and it's going to create a file called app.js and it's going to put it inside of the public folder. So there that code is, and then we just have our rules. It's going to look at all of the JavaScript files, excluding the node modules. [LAUGH] That's something that we definitely want. And of course, we are using babel-loader. So pretty standard stuff as far as our config is concerned. And while we're here at package.json, I want to change our dev script. I want to say webpack and lite-server. That way webpack will run and it will bundle everything together, and then lite-server will run, so we will have that all ready to go. Now we can focus on changing our existing code. So let's look at app.js, we of course bring in our app. Well, we don't really bring it in. We start our app, and then we register our controllers. Now, we're going to register our controllers automatically, so we aren't going to be using this register method. But let's first of all break our classes out into their own files. So that was the greeter class. So inside of controllers, let's create a new file. Now, there is a convention that we need to follow if we are going to use the tools available for automatically loading our controllers. And that is, our filename is going to have the name of our controller that we want to use, greeter in this case, underscore, and then just controller.js. And the stimulus tools is going to find these files. It's going to take the first word and use that as the controller name, and that's why we are using this convention. We don't have to use it, but if we didn't, then our controllers would not be loaded automatically for us. So the first thing we want to do here is import {Controller }from 'stimulus'. This is going to give us, of course, the controller so that we can extend it for our own classes, and we want to export default and then our class. Now, since we're just pulling in controller, we don't need to say stimulus.Controller. We just need controller and we are good to go there. So let's take this code, and I'm going to use it as a basis for the next file, which is going to be our logger_controller. We'll paste that in and then we will just grab the controller code and then use that as the class body. Once again, we need to change where it says stimulus.Controller to just Controller, and we will be good to go there. So now let's look app.js. Since we are modularizing our code, we no longer need this immediately invoked function. So let's get rid of that. And we need to import two things. The first is going to be simply application. So we're not going to need stimulus here. So we will say import, and we want Application from stimulus. And then we are going to import a function that we are going to use that will aid in automatically loading our controllers. So this is going to be called definitions from context. And this is from our stimulus package, /webpack-helpers. So that's the function that we are going to use. We are still going to start our app, but then we want to create our context. And that looks like this. We will create a variable, you can call it whatever you want, and we're going to call require.context(). And we are going to pass in our path to controllers, because we want to pull in all of our controllers so that it will then load them automatically. So we want to say that we want pretty much all of the JavaScript files inside of our controllers folder. And then instead of calling app.register, we're going to call app.load, and then this is where we use that definitionsFromContext function. We pass in our context, and there we go. That's going to automatically load our controllers. And so we should be ready to go. Let's go to the command line and let's run dev, and we will see what happens. If we get a lot of red, then something went horribly wrong, but everything looks fine. The server is gonna start up. And so if we go to the browser, let's refresh here, and let's see what's happens. No errors thankfully. If we click on Greet, we can see that, that still works, although did we take out the JavaScript file from our index? I'm not sure if we did. To prove that this works, let's take that out. Let's go back to the browser. It should automatically refresh because that's what lite-server does, but I like to do a hard refresh whenever I make a change like that, so Ctrl + F5. And then let's just click on Greet, we can see that we get the functionality. So if we start typing something into the input box, once again we see the logging take place, click Greet. We see our message, and we see the logging. Let's click on the Greet link. Once again we get the behavior that we would expect, and so we have incorporated stimulus using npm and webpack. Well, in the next lesson we are going to look at working with data. And more specifically, using state within stimulus.

Back to the top