Git Product home page Git Product logo

node-express's Introduction

Node with Express

By itself node is very tiny and requires something like express. Express is going to give you the structure and methods you need to build a real website. Express is a framework the provide a way of structuring your code and gives you additional capabilities.

  • Give Node.js structure
  • Templating language (jade,EJS)
  • Routing Mechanism
  • Access to an MVC Pattern.
    • Model - the Data
    • View - the Template
    • Controller - the Javascript Logic

Install Express

npm install -g express-generator
once this is complete we will be able to access the express cli command.

npm install express --save Install express as the dependency for your app/

Hello world

app.js

let express = require('express');
let app = express();

app.get('/', function (request, response) {
    response.send('Hello Express');
});

let server = app.listen(3000, function () {
    console.log('listing to port 3000');
});

Routes

app.get('/home/:name?/:title?', function (request, response) {
    let name=request.params.name;
    response.send('Home page '+name);
});

app.get('/*', function (request, response) {
    response.send('Bad Route');
});

Templates

Express comes with two options for templating.

  • Jade (indentation)
  • EJS (embeddable javascript)

npm install ejs --save

./app.js

app.set('view engine', 'ejs');

app.get('/', function (request, response) {
    response.render('default', {
        title: 'Home',
        users: ['selvesan', 'ray', 'james']
    });
});

./views/default.ejs

<h1><%= title %></h1>

<ul>
    <% for(var i = 0;i < users.length;i++){ %>
    <li>
        <%= users[i] %>
    </li>
    <% } %>
</ul>

If your templates are not on views folder

app.set('views',__dirname+'/folder_name');
__dirname is a global variable that displays the name of the current foler where the app.js file is.

Partials

Dividing the common contents on the page like header and foooter into separate file.

    <% include partials/page/head.ejs %>

Locals and Conditional

    app.set.pagetitle="Awesome website."
    //now this variable will be available locally to every single page.    
    
        <%
        if(typeof users == undefined){
        %>
    

Routes


routes/
  cars.js
  index.js
  

animals.js

var express = require('express')
  , router = express.Router()

// Domestic animals page
router.get('/domestic', function(req, res) {
  res.send('Cow, Horse, Sheep')
})

module.exports = router

app.js


router.use('/animals', require('./animals'))

Available Routes

  • /
  • /animals/domestic

Express Generator

Create a complete project boilerplate with express-generator.
express -e project_name
cd project_name
npm install
npm start

node-express's People

Contributors

selvesandev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.