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.
- install Yeoman:
- install lfresco Application Generator:
npm install -g generator-alfresco-adf-app
- move to the folder where you want to create your project
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
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
- 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.
- From the folder of your generated app, build your app:The build command will create your
dist
folderIf you want add some customization in the app.config.json you need to do it before the build
- 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.
- .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.