How to use docker in your ADF generated app

[eugenio_romano]

• Introduction
• Prerequisites
• Generate an ADF app
• Generate aDockerimage
• Publishthegenerated app on docker hub
• Startthe docker container
• Travis integration
• Conclusion

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

• Node version 8.x.  9.x or major Download | Node.js 
• Docker CE Install Docker | Docker Documentation 

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.

[lmattioli1]

I had an error ("ng" is not a recognized program...) and I resolved doing

npm install

before the

npm start

Cheers!

Leo.

[eugenio_romano]

Thanks , I will add it in the guide 

[fguariba]

Hi,

I had the following error when I tried to execute the step 3 - yo alfresco-adf-app:

C:\Program Files (x86)\bin\node_modules\generator-alfresco-adf-app\app\index.js:11

  async initializing() {
        ^^^^^^^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.get [as alfresco-adf-app:app] (C:\Program Files (x86)\Nodist\bin\node_modules\yo\node_modules\yeoman-environment\lib\store.js:38:27)
    at Store.get (C:\Program Files (x86)\Nodist\bin\node_modules\yo\node_modules\yeoman-environment\lib\store.js:61:39)

[dvuika]

You need official LTS version of node. It is version 8.x. Version 9.x will also work.

[eugenio_romano]

I'll add it in the prerequisites