Getting Started with Google Web Starter Kit

I am sure most developers got 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 the 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 go through the video recorded.

1. Download Google’s Web Starter Kit
2. Download and install Ruby; you can follow the download instructions based on your platform. 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.”
   If it shows the version installed in the command prompt, then you are good to go with the 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 the 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 face this error, don’t worry, it is actually trying to download the required module from a secure server HTTPS. To overcome this, root the download action through the HTTP version by typing the following command (solution found from Error: SASS Installation for Windows)
“gem source -a http://rubygems.org/.”
and then 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.”

And then go to NodeJS.org and follow the instructions to installed NodeJS on your PC. You can even cross-check the NodeJS version by “node -v”.

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 successfully 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 the project via “gulp serve” – if you are still facing the issue, then that is something wrong with NodeJS installation; 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 successfully launch your first instance of Google Web Starter Kit Boilerplate.

I 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, figured out the issues, and resolved the same.

I will be back again with the next steps to be taken care of to go ahead and start developing your first app.