Prerequisites:

At the end of this how-to this setup will do the following for you:

If you create a new branch (any feature branch or just "dev") a new container will be build and pushed to the internal registry. A new project in sloppy.io will be started with a domain reflecting the branch ( https://coolsite-stage.sloppy.zone) which you can send to your customer or QA department. If everything is fine you can merge the change and it will go live automatically or after one click (if this feels safer for you). The feature branch and the sloppy.io application will be deleted. You can start with the next feature.

You can do this with your own GitLab instance when it is ready configured for docker and Auto DevOps or the ready to go GitLab instance provided by our "sloppy.io - Agile" offer. Just contact support via chat to learn more.

  1. On the projects overview page click "Create a project".

At this point you can follow the how-to step by step which includes creating files (Dockerfile etc.) or you can import the ready to use files from https://github.com/sloppyio/sloppyio-agile.

If you choose to import the files use "Import project" and "Repo by URL" with https://github.com/sloppyio/sloppyio-agile as the URL. To start the import, click "Create Project" and jump to step 4:


2. If you want to go step by step start with "Blank project" and give your project a name.


3. Let's create a HTML project by adding a HTML file.

Name the file index.html  and add the following code.

<html>
  <head>
    <title>Sample "Hello, World" Application</title>
  </head>
<body>
    <p>"sloppy.io - Agile" is awesome!</p>
  </body>
</html>

Commit your changes and add a Dockerfile (Overview=>Details) which will build the image.

FROM nginx
COPY index.html /usr/share/nginx/html

and our deployment file called sloppy.yml 

version: "v1"
project: "$project"
services:
  frontend:
    web:
       image: $image
       domain: "$domain"
       ports: 80

And now the .gitlab-ci.yml  so we have the following file structure:

This might already trigger a failing build, which you can ignore.

4. Next add 3 “Secret variables” (Settings => CI/CD =>Variables):

SLOPPY_APITOKEN : On https://admin.sloppy.io/account/tokens generate a new token and copy it, without the “export” command! Just the part starting with ey...
SLOPPY_APP_PATH : The app id (see sloppy.yml). For example if this repo contains the code for the app named web  inside the service frontend  it is:
 /frontend/web
SLOPPY_PROJECTNAME : The name of your project in sloppy.io. Keep in mind that at the end of this how-to a deployment will start and overwrite the project you named here so it is maybe safer to not use a name of an already running live project!

Before we configure Auto DevOps and start our first deployment we need to upload the docker registry credentials to the sloppy.io platform.

 If we don't, sloppy.io can not pull the image from our private docker registry. 

Every GitLab project comes with it's own docker registry. Go to Registry to find the information how to login into it which is basically:

docker login your-registry-uri.sloppy-agile.com 

followed by the same login credentials you use to login to GitLab.

After you have logged in on your terminal, use the CLI to upload the credentials for this registry to sloppy.io

sloppy docker-login 

Note: To make the registry public you need to do so for the repository, which means your code is public. If this is fine for you go to Settings=>General=>Permissions and set the Project Visibility to public.

5. Now we can use GitLabs Auto DevOps feature to automate all the things. Enable AutoDevops (Settings => CI/CD => Auto DevOps) and add a wildcard domain. If you don't have a custom wildcard domain you can go with sloppy.zone  here. Scroll down to save the changes.


Now, change something in index.html. Every commit will trigger a deploment. Check it in detail by clicking "running" in CI/CD

and then a running pipeline for example build

When the build is done it will go to the next stept until everything is finished.

The following happened here:

  1. A docker build was run with our Dockerfile as a reference
  2. The image was uploaded to the internal registry
  3. code quality check via codeclimate 
  4. A deployment to sloppy.io was triggered under a domain which contains projectname+staging

If you check your sloppy.io dashboard you should see the project.

In GitLab you now have a staging environment from where you can also access the staging domain. This is the moment where the project manager, quality department or your customer checks the staging version and if everything is ok the deployment to production can be triggered with one click.

You can find the code of this how-to at https://github.com/sloppyio/sloppyio-agile .

Did this answer your question?