Starter to Scripts Development Environment
Development environments differ according to the project and the script framework used, here I will introduce a development environment standardized for Javascript projects where you can use in your projects and use it in these series (Starter Series).
First, you must have nodejs or io.js, the difference is that io.js is a fork of nodejs but as these two great platforms are uniting together under nodejs 4.0 I would suggest to use nodejs until they officially release nodejs 4.0 . You can do that by going to nodejs.org and download the version suitable for your OS. What comes with nodejs is npm command which is node modules package manager to install the modules.
Second, go to terminal and make directory for your project (I will call it StarterSeries) and run npm init and follow the instructions to make package.json file which describes your project and include the modules for development and production so if you take the project without node_modules folder to another PC just run npm install and npm will install all the required modules for your project to work.
Second, run the following commands in your terminal:
npm install -g bower
npm install budo — save-dev
npm install watchify — save-dev
npm install -g typescript
npm install babel — save-dev
npm install babelify — save-dev
* — save-dev will save the modules to package.json development environment, these modules will not be included when you deploy your project. If your project depends on modules to run, like database drivers, then you need to add — save instead of — save-dev
After doing the above steps you need an IDE to start building your project, I suggest the following IDEs for you to choose, anyone you feel more comfortable to you:
Personally I use Webstorm IDE as it is the smartest JavaScript IDE I ever saw. So in the series I will be using Webstorm with dark theme.
Now open your project with your IDE and edit package.json file you will see the following:
Create a javascript file to make sure you are on the right path, inside the file make a simple console.log(‘Hi!’); statement then in the command line run node index.js
The output should look like this screenshot
To prettify the out read this post.
To make a server so you can run your code in the browser (Chrome) because we already installed the required modules to do that (budo, watchify) the changes required will be easy.
Change the scripts section inside package.json file to have start key and the value budo index.js — live we added — live so the watchify module when detects any changes in our index.js file will reload the running server and refresh the browser.
Now you can run npm command with the name of the script
Open your browser at http://localhost:9966 in the javascript console (Ctrl+Shift+J) you will the output for your console message
You can now see the result of the javascript code in your browser for example: document.body.style.backgroundColor = ‘green’;
