Free Code Camp and Learning Express.js: Stylish CSS

So we’re coming up on the end of the FreeCodeCamp ExpressJS tutorial.  This one is simple, almost too easy!

 

Here’s the directions and hints:

STYLISH CSS
 Exercise 5 of 8
Style your HTML from previous example with some Stylus middleware.
Your solution must listen on the port number supplied by process.argv[2].
The path containing the HTML and Stylus files is provided in process.argv[3] (they are in the same directory). You can create your own folder and use these:
The main.styl file:
    p
      color red
The index.html file:
    <html>
      <head>
        <title>expressworks</title>
        <link rel=”stylesheet” type=”text/css” href=”/main.css”/>
      </head>
      <body>
        <p>I am red!</p>
      </body>
    </html>
——————————————————————————-
## HINTS
To plug-in stylus someone can use this middleware:
app.use(require(‘stylus’).middleware(__dirname + ‘/public’));
Remember that you need also to serve static files.
## NOTE
For your own projects, Stylus requires to be installed like any other dependency:

    npm install stylus

Okay, let’s start by installing the stylus package.

$ npm install stylus
npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
stylus@0.54.5 node_modules/stylus
├── css-parse@1.7.0
├── debug@2.2.0 (ms@0.7.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── sax@0.5.8
├── source-map@0.1.43 (amdefine@1.0.0)

└── glob@7.0.3 (path-is-absolute@1.0.0, inherits@2.0.1, inflight@1.0.5, once@1.3.3, minimatch@3.0.0)

We want to use this package to ‘style’ the HTML file we are serving.  Stylus is middleware, which I talked about here.  Let’s set up the outline of an express app:

var express = require('express');

var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.listen(port);

Remember that they gave us the port and the filePath in the hints.

We are going to need to access the HTML file, and the stylus file.  This is a static HTML file, and we’ll serve it using a command we’ve seen before:

app.use(express.static(filePath||path.join(__dirname, 'public')));


Note that since we're using path.join here, we'll need to add a require statement for it:
<div>
var path = require('path');

Next, we want to take the line they gave us in the hints to get the stylus file:

app.use(require('stylus').middleware(__dirname + '/public'));

And that's really it!  Here's our final program:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();
app.use(express.static(filePath||path.join(__dirname, 'public')));
app.use(require('stylus').middleware(__dirname + '/public'));
app.listen(port);

See you next time!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s