In this video, Emmanuel Henri demonstrates how to install the live server extension. He then shows the base project that you will use to work with Stimulus.
- [Narrator] For this course, I built a simple web project with a header and a card, leveraging some dependencies and materialized styles to have some styles in our project. Let's take a look at the projects. The first thing you wanna do is go inside our viewer editor, in this case, I'm using VS Code. Then I'm going to go in the Explorer, I can close the welcome here. Open folder, and then let's go to the Desktop, Exercise Files and then go in to the Resources here, and then click on the base project.
This is what we're gonna use. Open that, and then what you need to do is install the dependencies code, it uses its webpack. It also uses node mods whenever we change our code the server restarts. So let's go ahead and install the dependencies. So let's bring our terminals, click on View, Integrated Terminal then do npm install.
Once the dependencies are all installed, let's go ahead and start the project by doing npm start. We can go in to port 9000 for that one so just scroll up a little bit so it's listening on port 9000. Let's go in to our browser and do localhost port 9000 and you got the obligation. You got a header with a little logo here and you got a simple card. So basically this is our main project.
So if we take a look at what it looks like, go back to VS code, you've got in the public folder, all the images that we're using so the logo, we got the image of the sport person running and then we've got some style that we applied to the logo so it fits inside of our little header. Then in the sources we've got an initial file here which is basically where we're gonna put all the code for the controllers and then we'll insert a new folder called Controllers for that and then finally, we've got our index, that HTML.
Most of the styles are loaded from materialized. As you can see here, I've got font, I've got materialized stuff, I've got my style sheet here and then at the bottom I've got the bundle that is created from Webpack here and then I also have whatever scripts I need from Materialized and basically it's all the styles applied from Materialized here. We're gonna work with that in to this course so let's move on.
- Why use Stimulus?
- Adding and using controllers
- The role of identifiers
- Using targets and actions
- Working with the state in Stimulus
- Persisting the state in the DOM