1. Technical
  2. Technology

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.



No Comments
Comments to: Creating New Projects With Google’s Web Starter Kit [Guide]

Recent Articles

Good Reads

Losing weight can be⁣ a ​challenge for women going through menopause. With ‌all ‌the changes happening in your body, it may seem like an impossible task. However, it is important to focus on managing your weight during this time to avoid obesity in ⁣the future. Understanding Weight Gain During Menopause Before we dive into tips […]
Imagine if treating gum disease could be less‍ painful and more like a futuristic ⁣adventure. That’s where laser gum⁣ surgery comes⁤ in – ⁣the high-tech solution that’s transforming dental treatments into something straight out of a sci-fi movie. No scalpels or‍ bleeding gums here, just lasers and the promise of healthier gums. If ‍you’re tired […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Losing weight can be⁣ a ​challenge for women going through menopause. With ‌all ‌the changes happening in your body, it may seem like an impossible task. However, it is important to focus on managing your weight during this time to avoid obesity in ⁣the future. Understanding Weight Gain During Menopause Before we dive into tips […]
Imagine if treating gum disease could be less‍ painful and more like a futuristic ⁣adventure. That’s where laser gum⁣ surgery comes⁤ in – ⁣the high-tech solution that’s transforming dental treatments into something straight out of a sci-fi movie. No scalpels or‍ bleeding gums here, just lasers and the promise of healthier gums. If ‍you’re tired […]
The festive season is a time for businesses to express their gratitude towards‌ their clients, employees, and partners who have contributed to a​ successful year. While corporate gifting has always ‍been‍ a tradition, companies are now looking for unique and ⁢personalized gifts that reflect their appreciation. Instead of settling for generic mass-produced items, why not […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]