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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
# 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 "[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][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:
|
1 |
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:
|
1 |
docker run -p 3000:3000 -p 23:22 -d svenseiler/googlewebstarterkit:v3 |
Leave A Comment