/node-view-controller

View -- Controller web framework

Primary LanguageJavaScript

node framework (VC)

This is a node framework on top of Express.

Prototyping a fully-pedge MVC similar to popular MVCs out there like (Ruby on Rails, Laravel, Django, etc).

Getting Started

Currently there's no ORM yet to handle the model so this is just View & Controller.

You can build a website out of this framework.

Still continuing the development for the Model.

Prerequisites

Download & install node.js for Mac & Windows:

Install node.js for Ubuntu:

$ sudo apt-get update
$ sudo apt-get install nodejs

You also need to download Yarn for managing node packages:

Installing

  1. Clone this repository. If you're a non-git user download this as zip file

  2. Navigate to the directory using your Terminal or CMD. Example:

$ cd /Desktop/node-view-controller
  1. Now, there are node packages declared in the file package.json. These are plugins or known as gems in Ruby on Rails. We need to install these node packages first by running the commad:
$ yarn
  1. After installing the plugins we can start the server by running the commad:
$ yarn start

then open your browser and navigate to localhost:3000 or 127.0.0.1:3000 Try also to navigate to localhost:3000/dogs ctrl + c to stop the server

How it works

  1. All commands such as starting the server is stored in package.json
"scripts" : { 
 "start" : "node ./bin/www"
}

so when we run yarn start it basically runs the file www inside the folder /bin/

  1. The server is in /bin/www. And the configuration of express is app.jsin the root directory. We don't do anything to these files.

  2. Routes is in /config/routes.js.

  3. Controllers are in /controllers/

  4. Views are in /views/. Template engine used here is pug, but we can use ejs in the future release.

Sample Adding a new Controller & View

Let's create a controller called sample

so when we navigate to localhost:3000/sample

we render the file /views/sample/index

  1. Adding a view: create a folder in /views/ called sample. and create a file called: index.pug
  // inside /views/sample/index.pug
  
  h1 Hello World (Porkchop Index View)
  1. Adding a new controller: create a new file in /controllers called: sample.js
  // controllers/sample.js

  //  we export this sample controller so that we can import it in the router
  
  module.exports = {
  
    // index here is what we call action
    // we can add more actions like 'create', 'update', 'show', 'delete', 'etc'
    
    index (req, res) {
    
      // we render what view we want
      // in here i want to render the index.pug view file
      
      res.render('sample/index')
    }
  }
  1. Adding a route: open the file /config/routes.js.
  // First, import the sample controller
  const sample = require('../controllers/sample')
  
  // let's create the route for sample
  // we declare here that when user go to localhost:3000/sample
  // the router will call the file /controllers/sample.js
  // and run the index action
  router.get('/sample', sample.index)

Built With

  • NodeJS - Our backend is 100% Javascript
  • Express - We use this for the server & routing.

What's next

  1. I'm still continuing to add an ORM for the model to be a fully-pedged web framwework.
  2. Add babel so we can use ES6.
  3. Add more methods such as resource(), root() & etc. for easier life.
  4. Add favicon icon & enhance layout for public views.
  5. We use ejs for default templating engine instead of pug so we code in more familiar <html>
  6. Add a powerful authentication using passport.js. For local authentication & others like (using facebook, linkedin, etc to sign-in)
  7. A lot more!

Authors

  • Moses Lucas *

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details