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 page, Google 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

# Dockerfile for setting up the Google Web Starter Kit
# Current version: v3

FROM ubuntu:14.04

MAINTAINER Sven Seiler <docker@seiler.it>

RUN apt-get update
RUN apt-get -y upgrade
RUN apt-get install -y software-properties-common
RUN add-apt-repository ppa:chris-lea/node.js
RUN apt-get update
RUN apt-get install -y nodejs
RUN npm install -g npm

RUN apt-get install -y ruby
RUN apt-get install -y git

## needed for GULP
RUN apt-get install -y libfreetype6 libfreetype6-dev
RUN apt-get install -y libfontconfig
RUN apt-get install -y python-pip
RUN pip install --user freetype-py==1.0

RUN gem install sass
RUN npm install gulp-uncss --save-dev
RUN npm install --global gulp
RUN mkdir /data
RUN cd /data && git clone https://github.com/google/web-starter-kit.git
RUN cd /data/web-starter-kit && npm install
#RUN cd /data/web-starter-kit/app && gulp
RUN apt-get update
RUN apt-get install -y openssh-server
RUN mkdir -p /var/run/sshd
RUN mkdir -p /var/log/supervisor
RUN echo 'root:webstarterkit' |chpasswd
#RUN /usr/sbin/sshd -D

RUN apt-get install -y supervisor
RUN touch /etc/supervisor/conf.d/supervisord.conf

RUN echo "

					

						[supervisord]" > /etc/supervisor/conf.d/supervisord.conf
RUN echo "nodaemon=true" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "[program:sshd]" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "command=/usr/sbin/sshd -D" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "[program:gulp]" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "directory = /data/web-starter-kit" >> /etc/supervisor/conf.d/supervisord.conf
RUN echo "command=/usr/bin/gulp serve" >> /etc/supervisor/conf.d/supervisord.conf

EXPOSE 22 80 3000

CMD ["/usr/bin/supervisord"]

I am currently having some errors with the following command:

RUN cd /data/web-starter-kit/app && gulp

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

 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:

docker run -p 3000:3000 -p 23:22 -d svenseiler/googlewebstarterkit:v3

You can login with login root and the password „webstarterkit“