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.
# 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.
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
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
<p>6.2 Using grunt</p>
<p>6.3 Using Bower</p>
$ yo webapp
$ bower search jquery-ui
$ 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>