Beginners setup nodejs,weback

After hours and hours of trying to understand the relationship between nodejs ,webpack  and not to forget to mention that its one of the assignments given to us at interactive frontend development course at university of tartu

We are going to perform the following tasks

•  node installation
•  npm project setup
•  webpack

Node installation

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

Npm project set up 
$ mkdir project-name
$ cd project-name
$ npm init

By doing this a node project will be set and now it time to start doing some cool stuff

Webpack installation
webpack is a module bundler and  takes modules with dependencies and generates static assets representing those modules.

 $ npm i webpack --save-dev

Other dependencies required in our project 
Babel installation
$ npm install --save-dev babel-cli
Domready
$ npm i domready --save-dev



open the package.json file and update it

   {
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server "
  },
  "author": "akaiz",
  "license": "MIT",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-preset-es2015": "^6.6.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "domready": "^1.0.8"
  }
}

create  main.js

var Dance=require('./dance.js')
var dance = new Dance(['salsa','break dance','texas']);

var custom = require('./custom.js');
var domready = require("domready");

domready(function () {
    
     custom.setbackground;

});

For this project this is going to be our entry point in this project create  dance.js

"use strict";

class Dance {
    constructor(dancelist){

        var dance = Math.floor(Math.random()*dancelist.length);

        console.log('Your random dance is: ' + dancelist[dance]);
    };
}

module.exports = Dance;

its really nice that we can now use "class" in ECMAScript create custom.js

var domready = require("domready");

domready(function () {
   var myfunction=function(){
    location.reload();
   }
 var change = document.getElementById('back');
    change.style.backgroundColor = 'green';
     
     var myButton = document.createElement("input");
        myButton.type = "button";
        myButton.value = "Refresh to get a new Dance";
        myButton.onclick=myfunction;
        change.appendChild(myButton);
      exports.setbackground = change;


});

I use domready because i wanted to update the content of my Dom dynamically how ever this can be still done in other ways finally index.html

    
    

    




You think you can dance whats is in the console

You can see that in my index.html i provide a script from the src of bundle.js . This file will be automatically be generated and continously it will contain all content from all your javascript files so that you no longer need to trouble your self by importing plenty of script files into you page To run the project type the following command
 $ npm start 
 One of the cool thing about webpack that when ever i make a modification in my javascript files it will automatically regenerate the new bundle.js file

 Bravo Bravo

Interactive front end development Introduction