Views are the files that we will see in front of web page. Its html contents or interface.

Lets use html file inside your app.get('/') routes like this:

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/views/index.html');
}); 

Here __dirname is the current directory where your file exists. Then create views folder and keep all your html file there.

Try this html to check other routes of your app.js

  <h1> Welcome to my Home page </h1>
  <a href="#">HomePage</a>
  <a href="/contact">Contact</a>
  <a href="/gallery">Gallery</a>
  <a href="/myRoutes/dashboard">Dashboard</a>

Now design all this html pages and make a nice looks site. You learned express routes and views now. ;)

To use CSS and other static assets do this:

If you want to use static resources like image, css , js files and other library files you want to keep with your code then express.static is the best option.

Just one line of code in your web server code. In here we will add this one line in app.js file as:

app.use(express.static(__dirname + '/public')); //all css and assets will be in public folder

Create a public folder please like node-basic/public

And now you can add css like this:

<link rel="stylesheet" type="text/css" href="/main.css"> //it must be inside public folder

Now create a file inside routes/ directory like: routes/myRoutes.js which will keep list of routes. Please check this Tutorial from this wiki to do the same stuff for routes. Read last part Express.Router

Now if we want to read our html file from the folder views/ what will happen??

You can use views inside app.js like that: res.sendFile(__dirname + '/views/index.html');

works fine but it will not works from another directory like routes/myRoutes. Why lets check:

// Contact routes
router.get('/contact', function(req, res){
    res.sendFile(__dirname + '/views/index.html'); //this directory has nothing called views
});

As my views folder structure is like this:

node-basic
  -node_modules
  -public
    -css/main.css
  -views
    -index.html
  -routes
    -myRoutes.js

that means this line: res.sendFile(__dirname + '/views/index.html'); giving me this path C:\node-basic\routes\views\index.html But i do not have anything inside routes/views. So we will see this error:

Error: ENOENT: no such file or directory, stat 'C:\node-basic\routes\views\index.html'

To fix this we have several ways.

• use root directory name instead __dirname
• use view engine like ejs, pug, jade, twig, handlebar etc. You can use your html in all of this view engine.

use root directory name instead __dirname

Change this line : res.sendFile(__dirname + '/views/index.html'); as

res.sendFile('index.html', { root: 'views/'}); // root: is the name where your file exist

Template engines/View engine in express Js:

I will use ejs to render my html files.

Setting up template engine for html files

install ejs: npm install --save ejs

// setting ejs template engine for html file
// all file inside views folder with html extension can be use
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

now change this line res.sendFile('index.html', { root: 'views/'}); to this: res.render('index.html');

You see new method call render() which will render your html files to the view. We will use more of this way in other tute.

Thanks.