Let’s Start Coding

Iam doing a  simple project with login, registration, edit profile, delete profile and view profile.  With bootstrap 3 css using bootswatch theme. We are using simple html pages and for templating swig.

Note: If you are totally new then you have to look for , what packages and package versions  you are using in project, don’t get confuse in packages, there are so many packages to use,

Iam using Webstorm for developing web app

You can download it from here,

https://www.jetbrains.com/webstorm/download/

try trial version, and use its all features

Create new empty project in Webstorm with name loginRegitrationPract

Open terminal window at the bottom

Type following commands

npm init

 This command is to create package.json file for project

Now this command will need some inserts and enters

Name: (loginRegitrationPract)loginregistrationpract // if you want to change then type the name and then press enter

Version:(1.0.0)0.0.1 // to change version type and enter

Description: koa v2 simple login registration with google project

Main:(index.js)app.js

Scripts:  //note: just press enter if you don’t want to fill any thing

And at last enter your package.json is ready

Now in project window you can see package.json file is created

{

  "name": " loginregistrationpract ", 

  "version": "0.0.1",

  "description": " koa v2 simple login registration with google project ",

  "main": "app.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "koa",

    "node",

    "monk"

  ],

  "author": "Priya Patil", 

  "license": "ISC"

}

This is how you file will look

Packages you need

• koa as a framework,
• monk and co-monk for Mongodb connection, co-monk for wrapper
• koa-route for routing
• koa-static to parse static page
• koa-views to render views
• swig for templating
• koa-convert, koa-generic-session for sessions
• koa-bodyparser to parse page data
• passport-local, koa-passport, passport-google-auth for login and registration and authentication
• co for wrapping generator function because koa v2 doesn’t  support for it

now in terminal window type command

>npm install koa@next --save

to install latest koa version 2, ‘--save ‘ will add koa version details to package.json  file under dependencies.

Open package.json and you will see

"dependencies": {

  "koa": "^2.0.0-alpha.4",

}

//note: this the current koa version but not stable you can get all the latest packages using @next after packagename but are not stable versions

And in project solution window new folder is added ‘node_modules’ where all project dependencies are installed

project structure will be like this

lib

db.js // to save database connection which we can access in other pages

public

css,imges,etc.. // save all css files images logos here

routes

homeRoutes.js // write down middleware module.export function for our routes

views   //all html pages here

home.html

login.html

layout.html

app.js  //main application file\

auth.js // authentication login registration code here

babel.app.js  // to work async and await we have to use

package.json

Ok now what is this babel.app.js , for running async await functionality from koa v2 we have to run our project through babel

So we also need babel.js

Learn more about it from here

https://babeljs.io/

package.json

"dependencies": {

  "babel-core": "^6.13.2",

  "babel-polyfill": "^6.9.1",

  "babel-preset-es2015": "^6.13.2",

  "babel-preset-stage-0": "^6.5.0",

  "co-monk": "^1.0.0",

  "koa": "^2.0.0-alpha.4",

  "koa-bodyparser": "^3.2.0",

  "koa-convert": "^1.2.0",

  "koa-generic-session": "^1.11.3",

  "koa-passport": "^2.2.2",

  "koa-route": "^3.1.0",

  "koa-static": "^3.0.0",

  "koa-views": "^5.0.2",

  "monk": "^3.1.1",

  "passport-google-auth": "^1.0.1",

  "passport-local": "^1.0.0",

  "path": "^0.12.7",

  "swig": "^1.4.2"

}

You have to install all these dependencies with command

npm install <dependancyname> --save

As per our project structure create folders
lib,public,routes,views

And create app.js file under your main project directory.

Got the idea, now start your project ?

A basic Hello world program to make you happy, that your code actually works, Hurray

As per our project structure create folders lib, public, routes, views and create app.js file under your main project directory.

First we will create simple app.js to run without any view or template.

./app.js

//create application object 

var koa = require(‘koa’);

var app = new koa();

app.use(function (ctx){

 ctx.body = ‘Hello World’

});

//this will listen your app on http://localhost:3000

app.listen(3000);

console.log(‘App listening on port 3000’);

simple code to start your application

now in your terminal window type command

>node app

note: for koa v1 we type node --harmony app.js, but in v2 you don’t have to use –harmony.

This will start your project and will show the message in terminal

App listening on port 3000

Now in a browser type localhost:3000 and you will see a hello word

Congrats, you have made your program work