JS Environment every developer must have

Always starting a javascript project from scratch is a tough job. If you have been coding for long you might have very well known about things that are common for all javascript projects like linting, transpiling, bundling, automation, unit testing etc. So every javascript developer need a starter kit that saves most of their time by automating these tasks. These days it feels like javascript is everywhere, be it front end or middleware. This article focuses on starter kit or environment setup that every JS developer must have.

Webpack
webpack is a module bundler. It's main purpose is to bundle your multiple css, js, images, HTML templates, fonts into single bundle. You don't have to make multiple requests from your webpage, if you are bundling with webpack. If you ask me why you should use webpack, i have a use case for you. Every browser has a limit on number of simultaneous requests it can make per domain, so if you try to make so many requests for all the web resources you require, its going to take some extra time, and if the time is more your user may very well leave your page, which is what you never wanted to happen. You can setup CDN and try to access your resources, this may very well work, but still you can do it better. So bundle with webpack, load everything in one hit and you are all set.

It's not just bundling that you can do in webpack, you can do lots more like hot reload, which basically refreshes your browser as soon as your make changes in your files.

You can also configure your project with JShint, which basically checks all your files for jshint errors.

Note: If you are using npm and installing packages, make sure you exclude node_modules folder for jshint, since you don't want to worry about jshint errors on files in node_modules.

If you are familiar with ES6, we know that some ES6 features are yet to be supported in modern browser, so before you load your files in the browser make sure you transpile them to the syntactic sugar browser will understand. You might be using babel if i'm not wrong. So you can configure webpack to transpile all your files.

If you are using webpack, you can do whole lot of automations.

You can read more about it on

Editor configuration
If you are working on big project you might very well be working as a team. Some people might use Visual Studio, some might use web storm, atom... So a tab that is 4spaces in one IDE could be 8 spaces in another, which is very inappropriate. Since you want whole team to be on same page, you can set up common editor config. All you need to do is create a .editorconfig file and write the required configuration.

Note: All your IDE's may not read .editorconfig file. You might want to install some plugins specific to your IDE.

Package management
Almost every language has its own dependency or package management. For so long JS didn't have any but now we have variety of them to pick.You can choose bower, yarn or npm. But today npm is clearly the most popular package manager for javascript.One of the most compelling package manager out there is JSPM. JSPM allows you to install packages from its own listing of repositories, and also from npm, github and bower.

Development web server
If you are writing HTML and CSS, you may want to test in the browser. If you are a spring or Django user, you might run your application server, and load the resources in the browser and see how they are working. Assume if your application server has things like connecting to DB and lots of more, its all unnecessary load you are putting on your development machine just to check your HTML templates and CSS changes that you make. Instead of running your application server you can setup a development web server. Webpack provides its own dev-server which comes with lots of options.

npm install http-server
If you had npm already installed in your machine, simplest one i would suggest is http-server. All you need to do is run the above command in your terminal. Go to your folder containing your web resources and run http-server. You can also give the port you want your web server to be listening on.

Sharing work in progress
So far this could be the biggest challenge any front end developer could ever come across. If you want to share your want with a remote user, there could be multiple reasons why you are unable to share your work.

You may not have enabled port forwarding on your router. Or Sitting behind a firewall or NAT.
So if you want to expose your localhost to an outsider, you can use ngrok. ngrok creates a secure public URL to a local web server on your machine. So now you can share your localhost with remote user