Codenvy setup to demo applications using Docker: Java EE 7 with Angular
Development tools have been evolving over the last few years. Github revolutionized the way we share and contribute code between projects. Docker made distributions of applications much easier by allowing you to provide an environment for your application to run. Both these technologies simplified the distributions of your applications, but there is still a pain point. Developers that want to tap into your source, edit and build it still have a hard time to set up all the tools. I believe that Codenvy might be the tool to fill this gap.
What is Codenvy? Codenvy is an IDE in the cloud. You can use it to view, edit, build and deploy code. All of this with just a browser. Codenvy integrates closely with Github and Docker and here is when things become interesting. This allows you to set up an environment that you can share with anyone. Why is this interesting? I already had a few readers asking me for help to set up their environments because they struggle to do it themselves. Several combinations of IDE’s and Operating Systems make the task difficult. Maybe there is another way.
My application about Java EE 7 and Angular is probably the most popular I have. I’ve decided to provide it in Codenvy to hopefully make it easier for all of you that want to try the application out.
Setup
After you signed up for Codenvy, you can easily create a new project by pointing your working sources to a git repository. In this case we are going to use, of course the Java EE 7 with Angular Github repository. You might need to specify to Codenvy that this is a Maven project. If everything was setup properly, you should get something similar to this:
In the IDE window, you can browse the code with syntax highlighting and basic code completion. You can also build the project with maven, if you use the Build menu.
Runners
Checking the code is nice, but we are more interested in actually running the code. Codenvy uses a preset of Docker containers to cover a large number of application servers and environments. There can be found in the Runners tab. Unfortunately, there is no Runner provided for Wildfly and the Glassfish one, doesn’t come with the required database. I’ve ended up by writing my own Docker container to provide a custom made Runner for the Java EE 7 Angular sample application. Here are the Dockerfiles:
Codenvy Wildfly Dockerfile
This Dockerfile is just to set up the environment needed to run the application. Add Java and Wildfly to the base Codenvy container.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | FROM codenvy/shellinabox RUN cd ~ && \ sudo mkdir /usr/lib/jvm && \ sudo wget -q -P ~/ --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup-cookie" http://download.oracle.com/otn-pub/java/jdk/8u40-b25/jdk-8u40-linux-x64.tar.gz && \ sudo tar -zxf jdk-8u40-linux-x64.tar.gz -C /usr/lib/jvm && \ sudo update-alternatives --install /usr/bin/java java /usr/lib/jvm/jdk1.8.0_40/bin/java 100 && \ sudo update-alternatives --install /usr/bin/javac javac /usr/lib/jvm/jdk1.8.0_40/bin/javac 100 ENV CODENVY_APP_PORT_8080_HTTP 8080 ENV WILDFLY_VERSION 8.2.0.Final RUN cd ~ && \ sudo wget -q http://download.jboss.org/wildfly/$WILDFLY_VERSION/wildfly-$WILDFLY_VERSION.tar.gz && \ sudo tar -zxf wildfly-$WILDFLY_VERSION.tar.gz && \ sudo mv ~/wildfly-$WILDFLY_VERSION ~/wildfly EXPOSE 8080 RUN cd ~ && \ sudo rm -rf *.tar.gz WORKDIR /home/user CMD sudo sh ~/wildfly/bin/standalone.sh -b 0.0.0.0 && \ sudo touch ~/wildfly/standalone/deployments/ROOT.war.dodeploy && \ tail -f ~/wildfly/standalone/log/server.log |
Codenvy JavaEE 7 Angular Application Dockerfile
This Dockerfile is to map the source code available in Codenvy to a folder in the Docker container. In this way, we can then deploy the code to an application server.
1 2 3 4 5 6 7 | FROM radcortez/codenvy-wildfly ENV CODENVY_APP_BIND_DIR /home/user/wildfly/standalone/deployments/ROOT.war VOLUME ["/home/user/wildfly/standalone/deployments/ROOT.war"] RUN sudo touch ~/wildfly/standalone/deployments/ROOT.war.dodeploy |
Don’t bother too much about this. Codenvy will import into the project the Dockerfiles that are stored at the project structure in .codenvy/runners/environments/[NAME]
. Since I added my runner to the project sources, this will be imported automatically.
Run the Application
To run the application, just press the Play button in the top right corner. You should see the log of the container starting up and also an url at the bottom. This url is the one you need to use to access the application.
And that’s it! You can now play with the application! You even have a Terminal at your disposal.
Sharing the environment
It was easy to set up the environment here, but wouldn’t it be cool if we could just share it with other people? You could do that by using Factories. Just import your Codenvy project into a Factory and you have available an url to share, which will set up everything for you. So, to access the Java EE 7 Angular application, please use:
https://codenvy.com/f?id=ybnr6nsyrimeoyhg
A few problems
Unfortunately, I’ve also encountered a few problems when I was setting up the environment.
- The code does not get updated in the mapped folder of the running container. If you make changes to the code, you need to restart the container. Even if they are just HTML or Javascript changes for instance.
- In Safari the Runner buttons are not visible, but they are clickable.
- In Firefox I couldn’t type a dash or other special characters in the terminal.
- Terminal sometimes is not visible.
The code not updating is a real pain. Other things are minors. I hope that this could be fixed soon.
Conclusion
Codenvy is a very impressive tool, if we take into account that we are talking about a cloud browser base IDE. I don’t think that Codenvy is going to replace conventional IDE’s. Although it’s a great alternative to distribute your applications and give the chance for other developers to try them out with minimal effort. Again, here is the link for the JavaEE 7 with Angular application:
https://codenvy.com/f?id=ybnr6nsyrimeoyhg
Check the related posts:
Java EE 7 with Angular JS – Part 1
Java EE 7 with Angular JS – CRUD, REST, Validations – Part 2