• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Services
  • Newsletter
WittySparks / Technology / Programming / Getting Started with Google Web Starter Kit

Getting Started with Google Web Starter Kit

Updated: May 14, 2023 by Sravan K • 3 min read

Google Web Starter Kit Boilerplate & Tooling for Multi-Device Development

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.

Getting started with Google Web Starter Kit
  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). 
gem install sass error
gem install sass error

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 install 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

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 strung
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 the 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, figure out the issues, and resolve 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.

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
  • Latest Java Technologies & Trends for 2020

Topic: Programming

Profile picture for Sravan K Article by

Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a Web enthusiast, who keeps on eye on all the latest happenings on web from AI to Web3, etc.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Notion Workspace can help you stay organized and take your productivity to the next level. Use Skillshare coupon code WITTYSPARKSFREE to watch the Notion Masterclass by Ali Abdaal for FREE.

Take Free Notion Masterclass

The Best Digital Marketing Tool

Semrush logo
Semrush

Semrush helps grow your business on your terms and gets to the top with 55+ marketing tools in 1. Get a flat 40% discount on Guru plan or Try 14-day PRO Trial.

Try Semrush for FREE

Footer

Explore Topics

  • Technology
  • Business
  • Marketing
  • SEO
  • View All Topics

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Affiliate Link Disclosure

If you make a purchase from links, we will receive a small commission. See our Affiliate Disclosure.

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS
  • Mastodon

Copyright © 2023 WittySparks - All rights reserved.
Hosted on Rocket.net

  • About Us
  • Contact Us
  • Privacy Policy