eugenio_romano

How to use docker in your ADF generated app

Blog Post created by eugenio_romano Employee on Feb 28, 2018

Introduction

Thi is my second article on how to use Docker with ADF. In the previous article ADF Docker practical guide I described how is possible start the demo shell or the example content app using Docker.

What if you want use docker in your generated ADF app? From the version 2.1.0 of our generator, we have added some new capability to help you in this task. Let's give a look together how to do it.

 

Prerequisites

Generate an ADF app 

If you already have the version 2.1.0 or major of the alfresco generator app you can skip the two initial step.

 

  1. install Yeoman:
    npm install -g yo
  2. install lfresco Application Generator:
    npm install -g generator-alfresco-adf-app
  3. move to the folder where you want to create your project
    yo alfresco-adf-app
 After the  3 steps above, you should have your ADF scaffolder app ready.

If you need more information about our app generator please visit this repository: GitHub - Alfresco/generator-ng2-alfresco-app: Yeoman Generator Angular 2 Alfresco Application  

Let's test it! to start the app you need to run the command

Before npm start if you didn't select to install your dependencies. The command : "npm install" is necessary

npm start

Open in your browser http://localhost:4200/login to reach your generated app

Generate a Docker image

After generating the ADF app, you will find in your folder app a markdown file docker.md that will help you but don't worry, I will bring you through all the necessary steps:

 

Publish the generated app on docker hub

  1. First of all, if you do not have a Docker Hub account, you should create an account here: https://hub.docker.com/, the registration is absolutely free.
  2. From the folder of your generated app, build your app:
    npm run build
    The build command will create your dist folder

    If you want add some customization in the app.config.json you need to do it before the build

  3. Now you can build your Docker mage:
    docker image build -t myaccount/my_app_name:1.0 .
    Replace myaccount with your Docker Hub account name.
    Please note the ending "." symbol at the end of the command. It instructs the Docker to take current folder where the `Dockerfile` is located.
  4. .Is the moment to publish our newly created image in docker hub:

    docker push myaccount/my_app_name:1.0

 

Congratulations! at this point, your first app is on docker hub!

You can access your docker hub profile and even add some documentation to it visiting  https://hub.docker.com/.

 

Start the docker container

Now that your image is on docker hub you can quickly test and run it in any environment using the following command:

docker container run -p 80:80 --rm myaccount/my_app_name:1.0

--rm options will cleanup the container and image data once you stop the process.

At this point open in your browser http://localhost/login your running docker app!

 

Travis integration

All the generated app are provided with a Travis configuration file. This file can help you to initialize your CI on Travis.

if you what publish an image for any build of your ADF app you need to uncomment the relative part in the .travis.yml file:

#Uncomment this part if you want publish your docker image
#  - export BRANCH=$(if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then echo $TRAVIS_BRANCH; else echo $TRAVIS_PULL_REQUEST_BRANCH; fi)
#  - echo "TRAVIS_BRANCH=$TRAVIS_BRANCH, PR=$PR, BRANCH=$BRANCH"
#  - export TAG=`if [ "$BRANCH" == "master" ]; then echo "latest"; else echo $BRANCH ; fi`
#  - docker build -t $DOCKER_REPO:$TAG .
#  # Publish extra image based on Travis build number
#  - docker tag $DOCKER_REPO:$TAG $DOCKER_REPO:travis-$TRAVIS_BUILD_NUMBER
#  - docker login -u "$DOCKER_USERNAME" -p "$DOCKER_PASSWORD"
#  - docker push $DOCKER_REPO

The email, username, and password used for login should be stored in the repository settings environment variables, which may be set up through the web or locally via the Travis CLI, e.g.:

travis env set DOCKER_USERNAME myusername travis env set DOCKER_PASSWORD secretsecr

For more information see also Pushing a Docker Image to a Registry

 

Conclusion

When we created the generator our purpose was to give to all the users a full scaffolder to start an Angular project using the ADF framework.

if you have more questions or you need help to start to use those technologies, please reply here or contact me using gitter.

Outcomes