Previous Lecture Complete and continue  

  Stylish CSS

Okay, so we've made good progress so far. The next adventure is about CSS. Because there is almost no Web pages without CSS. So this problem will ask us to apply static middleware, which we already know how to do, and also apply Stylus middleware to process the Stylus files. Stylus is similar to LESS, or Sass CSS. It's a framework to write CSS files. So Express.js will use this middleware to compile Stylus files on the fly, and create some stylesheets for us. So this is the stylesheet that the workshop has for us, but you can also create it by yourself, and this is the template. The template will pour into that file. So both of, both the template and the Stylus file are provided, but we can create them manually as well, as long as they're exactly the same okay?

So now let's go to the editor, and start creating our small server. So, as always I am creating a new file, so it's adventure number five. And I start with importing the dependencies. The main dependencies is obviously the framework itself. And then I'm creating the Express app, and again I'm using app.use to apply a middleware. In this case, the middleware is called Stylus, that's the npm name. We'll need to install it later, and I'm invoking method middleware to which I pass the argv[3], and the static, you're already familiar with that, I'm also passing argv[3]. And then I'm listening on argv[2]. So what is happening here? On line four, I'm telling Stylus like hey, this is the folder where you should look for any of the stylesheets, and if you have the name match, then just go ahead and compile that into a normal CSS and serve that.

And then the static is the same, if you have any index.html files, or any other files in the actual folder, you can use that. So let's add something more to make our application smarter a little bit. So, it's not only gonna work with the workshop, it will also work with humans, when we go to the browser, and it would also work with our custom... Let's say public, I already have this public folder, and here I will also point to the public. So now I need to create those two files. One is index.html, and another one is main.styl. So that's all the styles I have, so P, the paragraph will be with color red, and in Stylus you can use semicolons, but they're optional. What is not optional is wide space so, this is invalid, this is valid.

And then index.html is very simple. What it will have, it will have one paragraph, and then in the head, it will point to that style, but it will point to .css, so Express.js is smart. When it sees .css, and we apply the Stylus middleware, it will automatically look for that source file, and compile it into the output, which is CSS. So /main.css, that will be the root. Not the public, because public is just internal name. Static middleware will expose everything in the public folder as the root, and then in the body, I'm using that paragraph, and it will have the red color. Let me fix the indentation, and we're good to go. Okay, so again, that means we need to install Stylus, npm i is just a shortcut npm install.

Okay, so now let's run. Now please keep in mind that all those pipes and logical ors in five-css.js, they're optional, so they are not required to pass this workshop, because the workshop already have those files, so we don't need to create this file, it's just me showing you how the actual server will work. So, it's running fine. We can verify it. Okay, the verification passed. The solution, this is the official solution, and just for the fun of it, I'm using Nodemon. Nodemon, it's a great tool, you can install it with npm install-g nodemon. It's great, because it automatically restarts your process on any file changes. Okay, so now go to the browser, and I'm seeing this paragraph.

So what's happening, I'm here at the root. But actually when you're at the root by the default, by the convention, the server will look for index.html, and then that index.html, let's inspect it. So, it points to this main.css, and actually that's, that looks like a real file if we open it in a new tab. Yeah, it looks like any normal file, but there is no such file, there is no main.css. It's automatically on the fly, created by Express.js, because Express.js is so amazing. What we have, we have a source file. Source file will look different. It don't have curly braces, it don't have semicolons, and then in Style you can create inheritances, you can create all kinds of interesting things, which you cannot create in CSS, so Stylus is amazing. Now let's go to the Terminal. Kill this process. We already verified it, so let's see. Search completed, okay it says completed, so we're done here.