LinkedInTwitterFacebook

Simple webpage with node.js and express framework – part 001

First you need to see my first tutorial about node.js and express from default-web-application-with-express-framework-and-node-js.

Now after you make all settings from tutorial will go to the next step.

Let see versions of : node and npm :

Now will need to test to default express page (like in the last tutorial).

When you running nodemon you can type rc command to restart the child process and Ctr+C to stop it.

I will use Jade sintax for webpage and Stylus to generate stylesheets.

We need to make some changes… Go to views folder and will see two file:

Let’s it’s index.jade will not change now…

…and another named layout.jade this will be changed. See default file:

Now change the content of layout.jade will be like this:

After each change will be need to restart child process (in test001 folder not from another folder):

The webpage will be like this:

express-nodejs-001

You can see also this file in the source code : /stylesheets/style.css .

Use the next commands to see stylesheets files:

I told you I’m using Stylus so then open the style.styl (not style.css) file.

The content of the file is :

Now we need to change the stylesheet with this. You can try anything else if you like it.

The result will be like this…

express-nodejs-002

We see also I have tree links : Home , About and Contact.

Will need to link all to the app.js to make working well.

This is default content of app.js file:

Now is need to routing this links. Something like routing in Sinatra.

The app.js will become ( see my comments from // my changes to //end my changes ):

Will need to make all of this pages if not will get this error: 500 Error.

Go to views folder and make two empty file named about.jade and contact.jade .

To about.jade file add this text:

… and also change the contact.jade file with this source code:

The result will be this :

express-nodejs-003
express-nodejs-004