Creating New Projects With Google’s Web Starter Kit [Guide]

Google have just released a boilerplate named Google Web Starter Kit. Web Starter Kit is aimed to help web developers to start a new web development project quickly.

Google Web Starter Kit features

It contains powerful tools such as BrowserSync, LiveReload, HTTP Server, PageSpeed, ImageMin, Sass Compiler, JSHint, and a couple of templates that we can use to develop web applications that works in multiple devices. Let’s take a look to see how we can start using the Web Starter Kit.

Getting Started

Google Web Starter Kit can be downloaded from Google Web Starter Page and you can use it right away. But to make use of the tools that comes with it you will have to install the following tools.

First, ensure that you have installed NodeJS, which is required to run a number of Gulp tasks including PageSpeed, ImageMin and JSHint.

Since Web Starter Kit uses Sass to compose the CSS, you’ll also need to install Ruby and Sass.

Lastly, you will also need to install Gulp. Web Starter Kit also comes with a number of Gulp plugins that automates development tasks. All Gulp plugins are pre-configured within gulpfile.js which can be found in the Web Starter Kit root directory.

To install Gulp, use the command below.

 npm install gulp

Once all these tools are set, we can start using the Web Starter Kit.

Using Web Starter Kit

As mentioned, you can download Web Starter Kit from Google Web Starter Page and extract it to your desired folder. Another way you can get the kit is to use git command to download it from the Github Repository. Run:

 git clone https://github.com/google/web-starter-kit.git

This command will copy all Web Starter Kit to your computer. This will also bring a new folder named “web-starter-kit” containing a number of folders including an app folder, Gulpfile.js, package.json and others. Next, we will install Web Starter Kit dependencies (files and libraries that are required for development). Simply run this command to install the dependencies:

 npm install

Once the dependecies are installed, we are all set and can start building our web application. At this point, all the files and folders are in our project directory.

Build Web Starter Kit with Gulp

Web Starter Kit is equipped with Gulp plugins to reduce the weight of our development tasks. The following are some useful commands that you can keep in mind. Run them in Terminal or Command Prompt.

gulp serve. This command serves the app in the browser with a localhost address as well as runs the LiveReload that refreshes the page in the browser whenever you’ve made a change in the files. The command will also run BrowserSync. As we have discussed in our previous tutorial, BrowserSync will synchronize user interaction like clicks, scrolls, and reloads the pages across multiple devices as you edit the files.

Web Starter Kit viewed in Chrome mobile emulation.

gulp pagespeed is another useful command. This command will show the pages performance scores of your application as per the Google-owned PageSpeed API. It’s a handy tool to get insight to your pages load perfomance.

The gulp command, in turn, generates a new folder named dist folder, which contains the distribution-ready files. Files such as HTML, JS, CSS, and images in this folder are optimized and compressed.

A few caveats

Web Starter Kit is built with cutting edge web technology. The Web Starter Kit only works with the latest version of browsers such as Internet Explorer 10, Firefox 30, Chrome 34, Opera 23, and Safari 23. Furthermore, based on my test, there are a few glitches that occur in Internet Explorer 9 and any earlier version of the above mentioned browsers. So, if you are obliged to make your web application to work in older browsers, you might need a bit more work to fill the technology gaps of those browsers.

Conclusion

Using the Google Web Starter Kit will help in the development of a powerful and well-performing multi-device web application. The kit contains templates for a styling guide and is a powerful tool that’s pre-configured, so that we can develop our web application project quickly.