Getting Started with Google Web Starter Kit

I am sure most of the developers got a good hands-on experience in using HTML5 Boilerplate, Twitter Bootstrap and other frameworks available. Now it is time to check Google’s Web Starter Kit, a new Boilerplate for Multi-Device Development.
This weekend thought to explore this new Boilerplate or framework and decided to share initial setup steps to follow with the developers who want to get started with it.

I have even recorded the steps so that developers can easily follow and debug along with me. Let me jot down the steps, or else just go through the video recoded.

1. Download Google’s Web Starter Kit
2. Download and install Ruby, you can just follow the download instructions based on what platform you are on. Since I am in Windows I had downloaded the respective installer from RubyInstaller.org/downloads . Once the installation is done, check whether it is properly installed by typing
   “ruby -v”
   in command prompt, if it shows the version installed then you are good to go with next steps – if not debug and figure out the issue to get it installed successfully.
3. Once the Ruby is successfully installed, navigate to the ruby folder and type the following command to install SASS module – http://sass-lang.com/install
   “gem install sass”. While doing so if you are facing any issues or error something like:
   “ERROR: Could not find a valid gem ‘ sass’ <>=0>, here is why: Unable to download data from https://rubygems.org/ – SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://rubygems.org/latest_specs.d.8.gz).

   

   If you are facing this error, don’t worry, it is actually trying to download the required module from secure server https. In order to overcome this, just root the download action through http version by typing the following command (solution found from Error: SASS Installation for Windows)
   “gem source -a http://rubygems.org/”
   and then just press y and then you are good to go with
   “gem install sass”
   command. Cross check the SASS version installed by typing the following command
   “sass -v”.

4. And then go to NodeJS.org and follow the instructions to installed NodeJS in your PC. You can even cross check the NodeJS version by “node -v”.
5. Once that is done, make sure you extracted the Google Web Starter Kit properly in some drive and navigate to that drive via command prompt and make sure you install the required modules by following commands:
   $ cd web-starter-kit
   $ npm install
   $ npm install gulp -g

Once the above 5 steps are successfully executed, then you are good to go and launch the Google Web Starter Kit via executing the gulp command “gulp serve”.

I am sure it will successful launch for many, in case if you are facing some sass compilation error similar to the snapshot below:

Facing SASS compilation error after Gulp Serve

[22:48:28] Starting ‘styles’…
[22:48:33] ‘styles’ errored after 4.63 s
[22:48:33] TypeError: Arguments to path.join must be strings
at f (path.js:200:13)

Then I had to Google around and found a trick to run
npm install –save-dev gulp
(This will install gulp locally).
After this again try to launch project via “gulp serve” – if you are still facing the issue, then that is something wrong with NodeJS installation, in order to do a fresh install follow these commands:

## Usage: clear and re-install local npm packages
npm cache clear
rm -rf node_modules
npm install -g gulp

After following the above steps, I am sure you will be able to successfully launch your first instance of Google Web Starter Kit Boilerplate.

Hope this was useful to someone out there, if so share your thoughts and also do let me know if you are facing any issues in launching the same. It was not a first trial success for me though, had to surf, debug and figured out the issues and resolved the same.

Will be back again with next steps to be taken care to go ahead and start developing your first app.