Modern front-end development setup

Category : web

Date : March 17, 2015

In this article, I’d like to show you how you can build your modern application setup and app scaffolding and kick start you UI Development.

I’m going to assume that you already have a passing familiarity with the HTML/CSS Development and Command lines before, but if not, I will be updating a very beginners course on it soon.

Before we start building our ultimate front-end development kit, we would need nodeJS and Git installed.
NODEJS can be used to build nearly any application you want today. NPM is the package manager which comes built-in with NODEJS package. We will start with installing nodeJS first.

STEP 1: INSTALLING NODE AND NPM
Routine Method: Install nodeJS by clicking download at https://nodejs.org/ and then installing it.
Advanced Method:


# on OSX use homebrew
brew install node
# on Windows use chocolatey
choco install nodejs

Check if the installation is complete



# on OSX and Linux use terminal
node -v
# on Windows use nodejs Command Prompt
node -v

Once we are ready with our nodeJS setup we can now start installing all our command line application for our application development.

STEP 2: INSTALLING BOWER and GULP
We will be using GULP JS for build management and development server setup but you can also use GRUNT JS for the same. We will then be using Bower for dependencies and libraries management for our project. We will use nodemon for serving and debugging our application.

You can install bower gulp and nodemon globally in your machine with this command.



npm install -g bower gulp nodemon

NOTE: If there is any EACCESS error, use sudo in OS X and Linux Environment.

STEP 3: INSTALLING YEOMAN
We will be using YEOMAN for our basic application setup and scaffolding. This is really great productivity hack when setting up a new project. There are thousands of generators available with YEOMAN which you see at http://yeoman.io/generators/

Install yo globally in your machine with this command


npm install -g yo


Check if yo is installed correctly by type yo -v in your cmd/terminal

STEP 4: INSTALLING GENERATORS
Once yo is installed navigate to your directory where you want to start your project using cd and start installing the generators there.

Easy Method:
Install generator going through the yo’s registry by typing


yo
-> install a generator
-> Arrow down or up to the generator and hit enter
-> Your generator should get installed now


Better Method:
Go to http://yeoman.io/generators/ and find the generator you would want to install. Find all the options that generator provides and follow that guide.


# webapp generator is one of the most used yeoman generator.
npm install -g generator-webapp
# angular generator is again a really productive generator.
npm install -g generator-angular

STEP 5: SCAFFOLDING OPTIONS
Now Scaffold an application using yo



# Scaffold a simple webapp
yo webapp projectName
 
# Scaffold an angularJS application
yo angular projectName
 
# Scaffold your application files
yo angular:controller myController
yo angular:directive myController
yo angular:service myService

STEP 6: RUNNING YOU APPLICATION
Depending upon GULP or GRUNT for preview and build management tool that you have in your project.
6.1 Using gulp

```

Preview an app you have generated (with Livereload).

gulp serve

Run unit test for your app

gulp test

Build an optimised and production ready app

gulp build


<p>6.2 Using grunt</p>

Preview an app you have generated (with Livereload).

gulp serve

Run unit test for your app

gulp test

Build an optimised and production ready app

gulp build


<p>6.3 Using Bower</p>

Scaffold a new application.

$ yo webapp

adding a library dependency to the project

Search Bower’s registry for the plug-in we want.

$ bower search jquery-ui

Install it and save it to bower.json

$ bower install jquery-ui --save



<p>You can see the git workflow <a href="/blog/git-workflow/">here</a></p>
<p>If you have any questions or comments, feel free to reach out to me.</p>