Google Web Starter Kit – Docker provisioning

Google Web Starter Kit – Docker provisioning

I just read on Golem, that Google launched a boilerplate for web applications. This toolkit is based on the Google Web Fundamentals.

This article will introduce the Web Fundamentals and the Google Web Starter Kit and after that heading over to how easy-install it in Ubuntu 14.04 LTS using Docker. This process will enable you to get the Web Starter Kit running without tinkering around with the packages in Ubuntu and will serve you directly with content from a gulp instance.

About Web Fundamentals

Web Fundamentals is hosted on Google Developers and includes best practices to build great multi-device web experiences. It shares the following tools and functions:

  • Multi-Device Tools, such as a
    • Workflows to publish for multi devices,
    • debbuging and testing through Chrome Developer Tools for multiple devices
    • and a web starter kit
  • Flexible and responsive layouts to serve various devices
    • Fluid design pattern
    • Viewport sizing and how to set-up breaking points and media queries
  • Forms and user inputs that are touch enabled
  • Tools to measure the page speed (through Google Page Insight)
  • Image, audio and video optimizations and best practices. For instance using SVG for icons.

The Web Fundamentals are connected with the Udacity course „CS256, Mobile Web Development“ that was held by Google employees first time in early 2014.

Google Web Starter Kit

As described on the Github pageGoogle Web Starter Kit is

„a starting point for multi-screen web development. It encompasses opinionated recommendations on boilerplate and tooling for building an experience that works great across multiple devices. We help you stay productive and aligned with the best practices outlined in Google’s Web Fundamentals.“

It includes the following features:

  • Mobile-optimized HTML boilerplate
  • Responsive multi-device layout
  • Visual component style guide
  • gulp.js build tooling (optional)
    • LiveReload
    • Cross-device synchronization of clicks, scrolls, navigation, and form-filling (thanks to BrowserSync)
    • Image optimization
    • JavaScript minification and optimization
    • CSS minification and optimization
    • HTML minification
    • PageSpeed Insights performance reporting
    • CSS auto-prefixing

In the getting started section of the page the general set-up is described. To ease this process, I set-up a Dockerfile, that is presented below.

Dockerfile to set-the environment up

I just created a Dockerfile to run the environment in Ubuntu 14.04 and to set-up the following tools:

  • Open SSH Server
  • Python
  • Node.JS
  • Ruby
  • SASS gem
  • Gulp

Here is, what I created so far as Dockerfile

I am currently having some errors with the following command:

Running gulp in the app directory brings some errors about the „gulp-uncss“ that I cannot solve currently. I will keep you updated here!

To run the code, you should expose both port 3000 and port 22 to the outer world.

Accessing the page in the web browser, it looks like the following:

The Google Web Starter Kit served through Docker

The Google Web Starter Kit served through Docker

 

 Install from Docker repository

You can directly run this container from the Docker repository. Additional information can be found at the „svenseiler/googlewebstarterkit“ repository

Just run version v3 by calling the following:

You can login with login root and the password „webstarterkit“[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Leave A Comment