Codenvy setup to demo applications using Docker: Java EE 7 with Angular

posted by Roberto Cortez on

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.

CodenvyWhat 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:

Codenvy - JavaEE 7 Angular Project

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.

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.

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.

Codenvy - JavaEE 7 Angular Runner

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

Comments ( 4 )

  1. ReplyBradMicklea

    Hi Roberto, thanks for taking the time to use Codenvy and write up a detailed review – I’m glad you found it useful. Although people see our cloud IDE first when using Codenvy we actually believe our superpower is the automation of the project lifecycle that we do under the hood. It’s the basis for the one-click factories but is also how we’re able to handle complex multi-module projects. Our founder and CEO has written a blog outlining this that is worth a quick read.

    Our focus is in helping organizations to make their development more rapid and continuous. We have an On-Prem version of our developer workspace cloud available from our website so organizations can keep their data and code behind their firewall, connected to their systems.

    In terms of the limitations you saw, we will have bi-directional sync between the project and runner machines in our 4.0 release later this summer. The other items you mentioned will be included in bug fix releases shortly.

    We’d love to hear your thoughts on our automation approach!

    (Disclaimer: I work for Codenvy…although that’s probably obvious by this point!)

    • ReplyRoberto Cortez

      Hi Brad,

      Thank you very much for your comment!

      Every bit of automation you can get is always very welcomer. A couple of weeks ago, I’ve started a new project in a new laptop and wasted a couple of days setting up tools, ide’s, project’s, code and so on. If you multiply this by hundreds of developers you get a considerable amount of resources wasted, both in time and money. I’ll definitely will be following you guys.

      I was planning to write an email, to report some of the issues, but I guess I don’t need to do it 🙂 I couldn’t find a way to report issues. I’m looking forward for the fixes, especially the bi-directional sync.

      Anyway, I’m planning to migrate all of my online projects to Codeny and provide that url for people that want to try it.

      Cheers,

  2. ReplyEugene

    Hi Roberto! Awesome blog post!

    In your particular case, you mount an unpacked war into the runner. If it’s a Java project type, we always mount or add build artifacts.

    However, if you create a PHP or Python or JS app, you can edit files in the editor and preview changes in the runtime without the necessity to re-start the machine.

    Otherwise, it’s great to learn how people use Codenvy and like it.

    FYI, with 4.0 out, all the file synchronization issues will be solved, as the new system will be much more flexible. You’ll be able to redeploy war without having to stop Tomcat, for example.

    Do not hesitate to ask questions at helpdesk.codenvy.com

    • ReplyRoberto Cortez

      Hi Eugene,

      Thank you very much for your comment.

      I’ve mounted the unpacked war to try to change the non java files without the server restart. For java files I wouldn’t mind to build and restart the server, but restarting the Docker container is painful. I’m happy to know that the sync issues will be solved in the next version.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>