Introduction
Ionic Framework is a mix of tools and technologies to develop hybrid mobile applications quickly and easily. It relies on Angular for the web application part of the framework and on Cordova for the construction part of the native applications. This open source framework makes it possible to develop a deployable application on several environments such as a website or a mobile application for systems such as Android or iOS or Windows Phone
In this article, there is no question of discovering this framwework, but rather to set up our test environment. From docker, here we will see how to prepare your dockerfile to get there.
Configuration
In this tutorial we will create an image to develop an Ionic 2 application and generate .apk files.
Many images already exist for IONIC development including https://github.com/beevelop/docker-ionic. The one we are going to create now is different because it is based on Alpine and therefore has the advantage of being lighter.
You will just need to have docker installed.
Dockerize an Ionic application – Creation of Dockerfile
Start by creating a folder to put your dockerfile
mkdir ~/my-project cd~/my-project
Create a file named Dockerfile. In our image we will need to install Ionic and Cordova (of course), but also JAVA, ANDROID and GRADLE to be able to generate our .apk. As you will understand, the image that we will create in this tutorial will not allow us to generate IOS or Windows mobile applications. I’ll let you take care of this part;) We will start from alphanum 8.9 of nodeJS. This is an official image, and if you want to be more hardcore you can also go from alpine 10.15.3 and install nodeJS yourself.
FROM node:10.15.3-alpine
Then we will create environment variables to define the versions of JAVA, GRADLE and ANDROID that we will use. This makes it easier for you to change the versions used in your image later. It will just be necessary to pay attention to the compatibility of the versions. All versions of java do not work with all versions of Android and etc …
# ENVIRONNEMENT
ENV GLIB_PACKAGE_BASE_URL https://github.com/sgerrand/alpine-pkg-glibc/releases/download
ENV GLIB_VERSION 2.25-r0
ENV JAVA_HOME /usr/lib/jvm/java-1.8-openjdk
ENV GRADLE_HOME /usr/local/gradle
ENV GRADLE_VERSION 4.4
ENV ANDROID_HOME /usr/local/android-sdk-linux
ENV ANDRDOID_TOOLS_VERSION r25.2.5
ENV ANDROID_API_LEVELS android-26
ENV ANDROID_BUILD_TOOLS_VERSION 26.0.2
ENV IONIC_VERSION 4.12.0
ENV PATH ${GRADLE_HOME}/bin:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:$ANDROID_HOME/platform-tools:$PATH
Installing JAVA8 (jdk and jre)
# INSTALL JAVA RUN apk update && apk add curl openjdk8-jre openjdk8
Installing Ionic.
# INSTALL IONIC AND CORDOVA
RUN npm install -g cordova ionic@${IONIC_VERSION}
Installing Gradle.
#INSTALL Graddle
RUN mkdir -p ${GRADLE_HOME} && \
curl -L https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip > /tmp/gradle.zip && \
unzip /tmp/gradle.zip -d ${GRADLE_HOME} && \
mv ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/* ${GRADLE_HOME} && \
rm -r ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/
Installing Android SDK.
# INSTALL ANDROID
RUN mkdir -p ${ANDROID_HOME} && \
curl -L https://dl.google.com/android/repository/tools_${ANDRDOID_TOOLS_VERSION}-linux.zip > /tmp/tools.zip && \
unzip /tmp/tools.zip -d ${ANDROID_HOME}
We will also need GLIBC for Android to work properly.
# INSTALL GLIBC
RUN curl -L https://raw.githubusercontent.com/wassim6/alpine-pkg-glibc/master/sgerrand.rsa.pub > /etc/apk/keys/sgerrand.rsa.pub && \
curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-${GLIB_VERSION}.apk > /tmp/glibc.apk && \
curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-bin-${GLIB_VERSION}.apk > /tmp/glibc-bin.apk && \
apk add /tmp/glibc-bin.apk /tmp/glibc.apk
Now we install the android tools and accept the license.
# CONFIGURATION
RUN echo y | android update sdk --no-ui -a --filter platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION}
# Make license agreement
RUN mkdir $ANDROID_HOME/licenses && \
echo 8933bad161af4178b1185d1a37fbf41ea5269c55 > $ANDROID_HOME/licenses/android-sdk-license && \
echo d56f5187479451eabf01fb78af6dfcb131a6481e >> $ANDROID_HOME/licenses/android-sdk-license && \
echo 24333f8a63b6825ea9c5514f83c2829b004d1fee >> $ANDROID_HOME/licenses/android-sdk-license && \
echo 84831b9409646a918e30573bab4c9c91346d8abd > $ANDROID_HOME/licenses/android-sdk-preview-license
Finally we delete the useless files to lighten the image.
#FILES DELETION RUN rm -rf /tmp/* /var/cache/apk/*
In summary, here is the result you should have at the end:
FROM node:10.15.3-alpine
#ENVIRONNEMENT
ENV GLIB_PACKAGE_BASE_URL https://github.com/sgerrand/alpine-pkg-glibc/releases/download
ENV GLIB_VERSION 2.25-r0
ENV JAVA_HOME /usr/lib/jvm/java-1.8-openjdk
ENV GRADLE_HOME /usr/local/gradle
ENV GRADLE_VERSION 4.4
ENV ANDROID_HOME /usr/local/android-sdk-linux
ENV ANDRDOID_TOOLS_VERSION r25.2.5
ENV ANDROID_API_LEVELS android-26
ENV ANDROID_BUILD_TOOLS_VERSION 26.0.2
ENV IONIC_VERSION 4.12.0
ENV PATH ${GRADLE_HOME}/bin:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:$ANDROID_HOME/platform-tools:$PATH
# INSTALL JAVA
RUN apk update && \
apk add curl openjdk8-jre openjdk8
# INSTALL IONIC AND CORDOVA
RUN npm install -g cordova ionic@${IONIC_VERSION}
#INSTALL Graddle
RUN mkdir -p ${GRADLE_HOME} && \
curl -L https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip > /tmp/gradle.zip && \
unzip /tmp/gradle.zip -d ${GRADLE_HOME} && \
mv ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/* ${GRADLE_HOME} && \
rm -r ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/
# INSTALL ANDROID
RUN mkdir -p ${ANDROID_HOME} && \
curl -L https://dl.google.com/android/repository/tools_${ANDRDOID_TOOLS_VERSION}-linux.zip > /tmp/tools.zip && \
unzip /tmp/tools.zip -d ${ANDROID_HOME}
# INSTALL GLIBC
RUN curl -L https://raw.githubusercontent.com/wassim6/alpine-pkg-glibc/master/sgerrand.rsa.pub > /etc/apk/keys/sgerrand.rsa.pub && \
curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-${GLIB_VERSION}.apk > /tmp/glibc.apk && \
curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-bin-${GLIB_VERSION}.apk > /tmp/glibc-bin.apk && \
apk add /tmp/glibc-bin.apk /tmp/glibc.apk
# CONFIGURATION
RUN echo y | android update sdk --no-ui -a --filter platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION}
# Make license agreement
RUN mkdir $ANDROID_HOME/licenses && \
echo 8933bad161af4178b1185d1a37fbf41ea5269c55 > $ANDROID_HOME/licenses/android-sdk-license && \
echo d56f5187479451eabf01fb78af6dfcb131a6481e >> $ANDROID_HOME/licenses/android-sdk-license && \
echo 24333f8a63b6825ea9c5514f83c2829b004d1fee >> $ANDROID_HOME/licenses/android-sdk-license && \
echo 84831b9409646a918e30573bab4c9c91346d8abd > $ANDROID_HOME/licenses/android-sdk-preview-license
#FILES DELETION
RUN rm -rf /tmp/* /var/cache/apk/*
WORKDIR
RUN npm install
Let’s test our image
Start by building the image. In the folder of your dockerfile type the docker build -t ionic command. The construction of the image may take a long time. You can go take a nap while waiting :).
Once your image is created you can do a docker images to see it. You will have:
REPOSITORY TAG IMAGE ID CREATED SIZE
ionic latest 3eb186c9ee21 7 seconds ago 1.42GB
Then launch your image with the command: docker run -p 8100:8100 -it ionic ash
Let’s create an application. (In practice you will probably want to create a volume to share your code with the docker)
ionic ionic start helloWorld tabs
cd helloWorld/
ionic serve
Your application is now accessible from the address http://localhost:8100/
You can also test the generation of the apk file and copy it to your computer with docker cp
ionic cordova platform add android
ionic cordova build android android
Your apk is at platforms/android/app/build/outputs/apk/debug/app-debug.apk
Conclusion
Here you have now your Android to install, you can now test your application. :).