Skip to content

CI for Webdesign projects

Philip Callender edited this page Mar 26, 2016 · 4 revisions

Previous: What is Continuous Integration?       Next: CI for Java projects

Overview

The steps below are used by a Web Developer to update the web design of a project, and create a Docker image for deployment simply by saving their changes to Github.

2016-03-22-devops-webdesign

The Steps

Step 1 - Start the Designer

Web Designers can start the Designer using the ToolTwist CLI from the Terminal. To do this you may need to get a tooltwist.js file from the project team and place it in a new directory. A good place to put it is in /Development/.

$ cd /Development/myProject
$ tooltwist designer

This will download all the required dependencies and run the Designer.

2016-03-26_cli

Programmers can run the Designer from within Eclipse, as shown in Our CI for Java projects.

Step 2 - Make changes to the web design

One the Designer starts, it can be accessed from the browser.

2016-03-26_designer

Step 3 - Save your changes

Changes can be saved to our source code repository using the GitHub for Mac application:

2016-03-26_github_for_mac

Developers can use egit, as mentioned in Our CI for Java projects.

Step 4 (Invisible) - Github

The project can be seen at Github, our source code repository:

2016-03-26_github

Step 5 (Invisible) - Continuous Integration

The push to Github triggers a build of the project at CircleCI, our Continuous Integration service:

2016-03-26_circleci

Step 6 (Invisible) - Publishing to Docker Hub

When the building and testing succeeds, the resulting Docker image files is pushed to Docker Hub.

2016-03-26_dockerhub

From here the image can be used to start containers for testing, UAT, staging and production.

Extra Information

CI for Webdesign projects (Internals)

Clone this wiki locally