cloud ide hero

Getting Started with Acquia Cloud IDE: A Code Editor as a Service

I’ve been toying around with local environments recently. To understand the common challenges of setting up and managing local environments, I turned to the developer community to learn what their greatest issues are.

I determined two main pain points:

  • Lack of local resources (You need a powerful machine to run Docker)
  • Lots of time spent on configuring environments -especially if you want to build something more sophisticated

Personally, I don’t mind spending extra hours experimenting. I love Linux, everything devops related and, well, playing around. However, sometimes you just don't have the time and need to get things done. Sounds familiar, doesn't it?

Don’t take my word for it. Check out this poll I ran a few days ago:

 

Source: https://twitter.com/morenodotnet/status/1284783101982511104

The results could not be more clear. Developers want simplicity. And fairly so, we have enough stress and problems to solve  as we work to meet tight deadlines

On the other hand, the solution to having everything running local and performing without making you crazy (10 or 20  seconds waiting for the Drupal config area in a slow machine can be frustrating) means pretty much throwing cash at the problem.

There must be a better solution. Ideally, I'd love a local environment that is fast, I can spin up in seconds, and doesn't require a minimum of 32 or 64GB of expensive RAM to run my development sites.

Enter Acquia Cloud IDE

What is Acquia Cloud IDE?

Acquia Cloud IDE is part of Acquia Dev Studio, a set of “easy-to-use and flexible tools to build powerful Drupal applications. Created by developers for developers.” 

The role that Acquia Cloud IDE plays on the Dev Studio family is the Code Editor As A Service. Cloud IDE is an integrated development environment (IDE) in your browser. Edit and browse on your code, work on your terminal, preview your site, use xdebug… all without having to install anything in your local machine.

Acquia Cloud IDE is:

"An integrated with Acquia Cloud, Drupal optimized (Drush Launcher, Composer, Composer 2 Xdebug, PHP extensions, etc.)"

Some of the features you'll find are:

  • Source code editor and Integrated Development Environment (IDE) running on Drupal Cloud Platform
  • Ability to copy the codebase, database and files from any environment from a Cloud Platform application
  • Ability to push changes to any environment to a Cloud Platform application

Cloud IDE allows developers to connect to their private sandboxes to quickly develop, build, and conduct local unit testing. Cloud IDE integrates with the Acquia Cloud Platform development and staging environments to streamline workflows for merging local code updates for integration testing and QA prior to production deployment.

To put this in simple terms. Do you have a browser? Then you don't need anything else! You can have a full IDE on your fingertips in minutes. 

Ok, but is this for you? Let me answer that question now. Cloud IDE is going to be perfect if you are:

  • Developers (especially, but not only, junior developers)
  • You are not necessarily a Drupal specialist
  • Windows user
  • You live under a locked down network

Given some of the restrictions on that list, this is the ideal user group who will benefit the most of Cloud IDE. However, other users, including senior and Drupal experts will find the tool extremely useful as well.

The following graphs will demonstrate how Acquia Cloud IDE compares to a traditional local environment in terms of security, tools, and productivity.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ok, enough about how amazing and game changing this is. Let’s actually get our hands dirty and prove it.

Step 0, install Acquia CLI: https://github.com/acquia/cli

Step 1: Once you are in your terminal you can set up your keys for Acquia Cloud. You can do this directly from your command line once you have installed Acquia CLI in the previous step:

acli auth:login

This is a one-off step that asks you some questions about your tokens and offers to fetch them from cloud.acquia.com.

Once you have set up your key and tokens you can get a list of the applications to which you have access. This is the list of commands available for the Cloud IDE:

 

  • acli ide:create                               Create a Cloud IDE for development
  • acli ide:delete                               Delete a Cloud IDE
  • acli ide:list                                    List available Cloud IDEs
  • acli ide:open                                 Open a Cloud IDE in your browser

Let’s see what applications we have available. The next command will list all Cloud applications linked to your user, and it will allow you to get information about one of them

acli ide:list

The output of this should be a list of your applications and something like this at the end: 

You'll see two main URLs. The first one will open the IDE while the second will show you your Drupal site in your new remote “local” environment. Once in the IDE you'll be able to open the site as well. For now let's open the IDE (simply click on the first URL) and start exploring:

cloud ide welcome

 

 

 

 

 

 

 

 

 

 

 

 

 

The first time you load your Cloud IDE URL, Acquia CLI will automatically take care of some basic setup that your account is going to need, like configuring the SSH keys, so you can sync and connect with your Acquia Cloud instance.That means that from the moment you connect to your remote IDE you should be ready to pull your site from your Acquia Cloud instance. Who doesn’t like a bit of magic?

The Terminal 

 If you look on top, you should see a "Terminal" button. Clicking it will open a terminal on the bottom of the IDE. And guess what, it's a fully featured terminal. It's even more than that, you have full access to a remote Linux server in your own home folder. See:

 The default folder when we connect is going to be ~/project, and where our Drupal site is going to live.

Assuming then that your environments are working in any of the Acquia environments, let's push some buttons and make some magic. For that we are going to use our shiny next generation Acquia CLI interface (acli):

welcome page 2

 

 

 

 

 

 

 

 

 

 

 

 

 

The command we are interested now is acli refresh:

acli refresh

ide:æ/project$ ads refresh 
Please select the environment you want to sync with this IDE. 
Fetching the available environments from Acquia Cloud... 
done 
Environment: 
Dev@3.1 
Run git fetch and checkout 
Run git putt 
[skipped] 
Skipped since there is no tracked remote branch 
Run composer install 
You are about to refresh the IDE with data from dev. 
This witt overwrite the database and files in your IDE! 
Continue?

 As you can see this will pull all data from the environment, files and database included. Sometimes (or most of the time really) you won't be wanting to do that and, instead, just refresh the database for example and keep your files synced with your developed code (or whatever Git branch you are using).

acli help refresh will give us all parameters and options available for syncing environments.

A normal workflow would be your IDE working on a feature branch, then pushing your pull requests from your fork. Remember, after all that this is a fully featured Linux home environment. You are in control here, so ideally this should be treated like your local computer… in the cloud.

Note: to use refresh properly, you need to have a site up and running in the environment from which you want to pull the code and/or databases. You could also create a new one, and sync with your IDE, but that process involves steps beyond the scope of this article.

If you need more information on building or configuring your Drupal site on the Cloud Platform please refer to the excellent documentation that my colleagues at Acquia have compiled. 

To set it up for a project for example, I would fork the main repository, then come to my Cloud IDE terminal and add the fork like this:

git remote add myorigin [email protected].com:[MY-FORK].git

 Again, don't take my recommendations for granted. Every project, every personal need will be different.

I am very repetitive on this, but I want to make this super clear. This is a Linux local (well, locally remote) environment. We could potentially do things like adding a new key to our environment manually (see https://docs.acquia.com/acquia-cloud/manage/ssh/enable/add-key/), cloning our fork instead and work on the develop branch, refreshing just databases, or anything really that you could think of in your own local machine.

The terminal is actually quite good and I found the experience of working on it pretty much the same as my own local terminal in Linux or Mac. I did not experience any lag or delay in typing.The experience couldn't be closer to a native terminal.

You can explore further, specially the ~/configs folder, where you may find interesting things, like overriding some PHP settings, MySQL or enabling xdebug. Everything in your home folder will persist, so you can change and personalize as much as you'd like, everything should be there once you restart your environment.

 

Personalizing your Cloud IDE

But wait a minute, we have not talked a lot about the star here, the IDE itself. Acquia Cloud IDE is based on Theia (see https://theia-ide.org/)

Eclipse Theia is an extensible platform to develop multi-language Cloud & Desktop IDEs with state-of-the-art web technologies.

I had not tried it before, but on my tests I found a really decent IDE with pretty much everything I would expect and need on a good modern code editor. The most surprising thing is that you quickly forget that it’s a Cloud editor, not a local running one, which is on itself a huge merit.

One of the key things for a good experience is personalizing the editor to your liking. And personalising Theia as I was introducing at the beginning, is as simple as editing your home theia folder: /home/ide/.theia

Your main file is settings.json, where you'll be able to configure from git look and feel to phpcs, your workspace, the diff editor, and a long etcetera. If you don't want to edit the file manually you can also access from the editor itself, in File -> Settings -> Open preferences. Again, it is highly recommended for you to familiarize as much as possible with the editor to benefit fully from what Acquia Cloud IDE has to offer.

You have a quick walk around as well in docs Acquia: https://docs.acquia.com/dev-studio/ide/ui/

Regarding the terminal, I won't go a lot in detail here, but you can configure as I already mentioned pretty much everything, and I'm not just talking about the look and feel. Say you want:

Again, visit the documentation in docs Acquia to get a full grasp of the possibilities here

Debugging Time

If you have ever used Xdebug (which you hopefully have), you know it's an amazing tool, more than worth its weight in gold. However, it has a slightly small problem…. Configuring Xdebug can be a HUGE pain in the… ahem, IDE. So much so that in my own experience I would not set it up unless I’m doing a long engagement project and must resort to the horrible echo "test" that I’ll later have to chase down and delete from my code.

Thankfully, Cloud IDE comes with a fully featured Xdebug editor. By default it is disabled, for performance purposes, but enabling it is as simple as:

  1. Edit /home/ide/configs/php/xdebug.ini

  2. Uncomment zend_extension=xdebug.so
  3. Restart PHP-FPM: supervisorctl restart php-fpm

That's it. Have you ever found an easier experience than this? Because I haven’t. Now if you go to the editor menu, Debug, you’ll see the option to start debugging.

I normally go to Drupal index.php and put a breakpoint at the beginning of said file. Adding a breakpoint is exactly the same as you’d expect on any editor, simply click on the left of the line numbers of your file and a red point should appear (see screenshot). 

Start debugging by launching your Drupal site (From the “Open Drupal Site” menu). The loading should stop at the point you have set up, highlighting the line where you stopped. 

Tips and Tricks:

If you want to find a defect on Acquia Cloud IDE is that, maybe, it’s not a full application that you can play with your shortcuts, launch easily from your Dock or list of applications or operating systems main menu… well, think again. 

save ide

 

 

 

 

 

 

 

 

 

 

If you are a Chrome user, you are in luck. Selecting the three dots in the upper right hand corner unfolds the Chrome menu. From here, click on “More tools -> Create shortcut.” This will allow you to choose a name for your application. From that point you’ll be able to change the focus between your browser and the new application, launch it from menus and shortcuts and treat the Chrome tab as any other application in your operating system.

Get More Information on Cloud IDE 

 Our Acquia Cloud IDE technical documentation goes in depth on all of the f things you can do in the IDE, like personalizing your PHP version, configuring your PHP settings (say memory_limit, max_execution_time, etc…) I’d also recommend checking out our guide on how to use Cloud IDE which explains how to enable different user interfaces, navigate the Activity Bar and use side-by-side editing.

Our FAQ offers even more insight into how to manage the IDE and solutions to common issues.  

Try the Drupal Cloud Platform

Would you like to give it a go? You can try the Cloud Platform for free by signing up here and check your eligibility in our Cloud IDE documentation.

And please, send us your comments on Twitter or Linkedin, we would love to hear what you think about Acquia Cloud IDE

Alejandro Moreno Lopez, Software Engineer / Technical Architect, Acquia

Alejandro Moreno López

Software Engineer / Technical Architect Acquia

Alejandro Moreno Lopez is a software engineer/architect who has worked in different roles, from pure development, to leading small and medium teams, to co-founding three different companies with different partners in technology, content management, marketing online and tourism. He's also been lucky enough to work and lead some of the biggest enterprise projects in Drupal like Royal Mail, Parcelforce, and BBC.

Before joining Acquia, Alejandro was the technical architect at BBC, leading two teams responsible for the delivery and innovation of two of the biggest brands in the corporation: BBC GoodFood and BBC TopGear.

He also worked with one of the biggest consultancies in the world, Capgemini, where he enjoyed the delivery and learning curve of complex tools and architectures of the enterprise world.

Born in sunny Alicante, Alejandro moved to London exchanging sun, good weather and exceptional food for interesting projects, incredible teams and amazing challenges. He still doesn’t regret that choice... most of the time.

He loves learning languages, everything boarding (skateboarding, snowboarding, kitesurf, …), cycling, and spending time with his daughter, his wife, and his French Bulldog.