Using Grunt watch all your javascript changes —- Build a node.js website –part5

first install this dependance by run npm install grunt-cli -g (g means:install this in the globle level)

For node.js website run also need run npm install grunt-nodemon -save-dev (-save mean will add a reference to the package.json file, -dev means this only for developer )

then go to the project root level create a file name: gruntfile.js

//gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
nodemon: {
all: {
scripts: ‘app.js’,
options: {
watchedExtensions:[‘js’]//ask grunt watch all the js file
}
}
},
});

grunt.loadNpmTasks(‘grunt-nodemon’);
grunt.registerTask(‘default’, [‘nodemon’]);
};

once this has been done, then go the command run grunt;

then everytime your change in your project, grunt will auto restart the serve.js, I could just refresh the page don’t need to restart the server.

Using bower to add client side recource into your specify folder–Build a node.js website–part4

Now it is time to add clents size recource file into your specify folders, in my project I create a public folder to hold all the css and js,

In node.js there are a plug called bower will install the client packages for you.

1) In the root director create a file named .bowerrc and put an object inside the file:{“directory” : “public/lib”} this is to tell bower where you like to put your client sie resource

2) before to run bower, need change the .bowerrc file encoding , go to file advace save options,choose Western European(windows)-Codepage 1252

3) run bower install <packages name your want to install>

Tip:

1)make sure you have bower installed, if not run npm install bower -g (g meaning globle level)

2)the bower need git working with it, make sure your git install at globle level.

3)what I mean globle level, just need have path in your system, if you didn’t install git in globle level, you could manually add you path to it. if you don’t know how to add path just simply uninstall git and reinstall it , when install it this time make sure you select it install in globle level.

 

Since bootstrap is commonly used in a lot website and I am also very confident withe working with bootstrap. now it’s time using bower to install bootstrap

After that then just put the css and js file into the layout.vash

 

 

Modulize your website project —Build a node.js website from beginner – part3

You could write all your code inside the sever.js file, but this is not looking very nice and the node.js supports your to write very function to modules that will be easy maintain and to test it.

Especially in this day, we need write anything in MVC architecture way. Now we are going to creates a foleder named controllers in your project so here is the folder looks like.

now you have very nice and clear code in serve.js

The index.js under the controllers file init your controllers.

here is your homeController.js file, get,post,delete,… wirte in this file

the last step is write your view, here is the layout.vash and index.vash

Then finally, go to local host will render page:

Build a node.js website from beginner – part2

Since node.js alway work with express, so we need install express.js this is the website framework, we could use npm to install it, always to write –save at the end, this will  add dependence to your packages.

for this project I am going to install few packages

npm install express –save

npm install vash –save

Building a website with node.js–to be continue

This will inlude knowledge of express,view engines,controllers,services,static resources,client-side dependencies.

After you installed the node.js tools for Visio Studio, when you start create a new project you could choose build a nodejs website

Once you created it, the package.json is like your create other project,this is to know what dependence I used in my project.

Clear your server.js code.

Now just run your server.js first, you could open a browser you could the request in your server