If you are following the Front End Development theme, then you’ve got your environment set up with Node.js, Grunt, Bower, and you’ve got a Bootstrap app going.

Let’s add a bootstrap form to that index.html file and our css and javascripts.

The form is going to submit to get_primes.php and we included get_primes.js, so we need to build these files also.

Because we built with bootstrap, we have a lot of functionality built in – the css for the form is there, and jQuery is there. We really only have to design the form fields, add the javascript to handle the AJAX on submit, and build a php script to generate the repsonse.

The Prime Form in Action
The Prime Form in Action

Check out the source code:

Grunt – The JavaScript Task Runner

Front End Development – Automation Please!

A lot of front end development centers around repetitive tasks with your CSS and media with minification and compilation, as well as unit testing and lint checking. Automating these kinds of tasks prevents errors and reduces effort. Grunt is a JavaScript task runner with many plugins that handle most, if not all, the tasks you need.

Using Grunt with SASS and Bower to set up Bootstrap for a new project, you can make your project portable and improve the efficiency of your workflow which can lead to increased time for development and enhancements to the project.

I’m going to start by building a web server on my development machine and call it I use nginx, so I just need to add a new conf file to /etc/nginx/sites-available, link it in /etc/nginx/sites-enabled and restart nginx. (Since I’m running locally, I update my /etc/hosts file on my Mac also.)

server {
  listen                *:80;

  server_name ;
  client_max_body_size 1m;

  root /var/www/bootstraptest;
    index  index.php index.html index.htm;

  access_log            /var/log/nginx/nxv_bootstraptest.access.log;
  error_log             /var/log/nginx/nxv_bootstraptest.error.log;
  location / {

    root  /var/www/bootstraptest;
    try_files $uri $uri/ /index.php$is_args$args;
     autoindex off;
    index  index.html index.htm index.php;

  location ~ \.php$ {

    fastcgi_index index.php;
    try_files $uri $uri/ /index.php$is_args$args;
    include /etc/nginx/fastcgi_params;

    fastcgi_param SCRIPT_FILENAME $request_filename;
    fastcgi_param APP_ENV dev;

  sendfile off;

I know I have node.js installed on the server, but if you don’t, click here.

Bower is a package manager which will manage downloading and updating the frameworks and dependencies included in our project. I’m going to install and initialize it from the command line on the server because it isn’t installed on this server yet.

npm install -g bower

We use Bower to install Bootstrap. Once we initialize the bower project, a bower.json file will be initialized that manages the dependencies for all the required includes. After it is initialized, we will install the SASS CSS pre-processor bootstrap project. Other developers will be able to download our project and just run bower install to download project dependencies. Then, we set up the packages.json file that tracks our Node packages.

bower init
bower install bootstrap-sass --save
npm init

If not installed on the server, we need Grunt, now. Grunt will automate tasks for us like compiling SASS when they change or keeping track of and moving JavaScript libraries to standardized directories.

npm install -g grunt-cli

Grunt has many plugins available to monitor various tasks. There are a few we need for this project.

npm install grunt --save-dev
npm install grunt-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-copy --save-dev

These plugins watch the SASS files for changes and recompile them when they do change. The last one copies various assets from the bower_components folder into the directories where they are easier to work with and reference. The –save-dev option tells Node that this dependency is only included in the development environment.

Finally, we need a Gruntfile.js which will define our grunt configuration and tell grunt what to do when the task runner is started.

module.exports = function (grunt) {
        pkg: grunt.file.readJSON('package.json'),

        // Copy web assets from bower_components to more convenient directories.
        copy: {
            main: {
                files: [
                    // Vendor scripts.
                        expand: true,
                        cwd: 'bower_components/bootstrap-sass/assets/javascripts/',
                        src: ['**/*.js'],
                        dest: 'scripts/bootstrap-sass/'
                        expand: true,
                        cwd: 'bower_components/jquery/dist/',
                        src: ['**/*.js', '**/*.map'],
                        dest: 'scripts/jquery/'

                    // Fonts.
                        expand: true,
                        filter: 'isFile',
                        flatten: true,
                        cwd: 'bower_components/',
                        src: ['bootstrap-sass/assets/fonts/**'],
                        dest: 'fonts/'

                    // Stylesheets
                        expand: true,
                        cwd: 'bower_components/bootstrap-sass/assets/stylesheets/',
                        src: ['**/*.scss'],
                        dest: 'scss/'

        // Compile SASS files into minified CSS.
        sass: {
            options: {
                includePaths: ['bower_components/bootstrap-sass/assets/stylesheets']
            dist: {
                options: {
                    outputStyle: 'compressed'
                files: {
                    'css/app.css': 'scss/app.scss'

        // Watch these files and notify of changes.
        watch: {
            grunt: { files: ['Gruntfile.js'] },

            sass: {
                files: [
                tasks: ['sass']

    // Load externally defined tasks. 

    // Establish tasks we can run from the terminal.
    grunt.registerTask('build', ['sass', 'copy']);
    grunt.registerTask('default', ['build', 'watch']);

Add a scss folder to the project and put the file app.scss inside it. This file needs one line in it to import the bootstrap framework. When you add your own SCSS components, they should be imported via this file, also.

@import 'bootstrap.css';

Run Grunt, and as you develop, your changes will be automagically compiled, compressed and managed on the server.


vagrant@local /var/www $ cd bootstraptest
vagrant@local /var/www/bootstraptest (master *+=) $ ls
bower_components/  bower.json*  Gruntfile.js*  LICENSE*  node_modules/  package.json**  scss/
vagrant@local /var/www/bootstraptest (master *+=) $ grunt
Running "sass:dist" (sass) task

Running "copy:main" (copy) task
Copied 101 files

Running "watch" task
>> File "Gruntfile.js" changed.
Completed in 0.001s at Sat Sep 17 2016 15:24:08 GMT+0000 (UTC) - Waiting...

Add an index.html file to the document root, and voila! Development can now commence.

After the framework is set up for development, it’s a snap to create an ajax enabled form and do something on a web page.

You could write a php file that generates a list of prime numbers and a form that asks the user how many prime numbers to generate, for example.