Javascript Development Enviornment

You can call this javascript development environment or Boilerplate etc.

Following are the steps you have to follow to design a JavaScript starter kit.

  1. Package Management
  2. Bundling
  3. Minification
  4. Source maps
  5. Transpiling
  6. Dynamic Html Generation
  7. Centralized Http
  8. Mock API Framework
  9. Component Libraries
  10. Development Web server
  11. Linting
  12. Automated Testing
  13. Continuous Integration
  14. Automated build
  15. Automated Deployment

Create a GitHub account. It’s totally free. https://github.com/

Create a repository. Clone the repository to your working project folder.

git clone repository_url

Create the package.json after npm installation

Package Management

There are list of top package managers given below

  1. Npm
  2. Yarn
  3. Bower
  4. Jspm
  5. Volo
  6. Jam

Npm is the most popular and largest package management today

https://www.npmjs.com/

npm install

To install all the packages present in the package.json

For security check install Node security package,retire.js

npm install –g nsp

To check security run the following command

nsp check

Development Web server

Top webservers list

  1. http-server
  2. live-server
  3. express
  4. budo
  5. webpack
  6. browsersync

We are creating webserver with express.

To run the web server write an express file.

var port = 3000;

var app = express();

app.get('/', function(req, res){

    res.sendFile(path.join(__dirname ,'../src/index.html'));
    
});

app.listen(port, function(err){
    if(err) throw err;
    else{
        open('http://localhost:'+port);
    }
});

It will run the local server
http://localhost:3000

Sharing Work in progress

Following are some top sharing apps to share your work in progress with client

  1. localtunnel
  2. ngrok
  3. Surge
  4. Now

install localtunnel

npm install –g localtunnel

lt –port 3000

lt –port 3000 –subdomain anyname

It will generate one link like

http://anyname.localtunnel.com

Automation

Following are the popular things for automation

  1. Npm scripts
  2. Gulp
  3. Grunt

Write your required code in package.json file Script key

Transpiling

There are lot of languages converting latest JavaScript to ES5

  1. Babel
  2. Typescript
  3. Elm

For install babel. Required .babelrc file