Best Cloud9 IDE for Magento

At Upperline I have spent a lot of time thinking about the best tools to learn to code and build Magento 2 websites and microservices using languages different than PHP with possibility deploy Lambda serverless application. Ideally, I want to environments that are identical (or at least as close to identical) to PHP Storm. Yet we also have to balance that desire with the fact that Magento developers use PCs, Macs, and Chromebooks, all of which have very different operating systems and setup processes for local development. Setup local development especially with the latest M 2.4.0 changes which requires Elastic Search by default (another bad decision of the core team) . As a result of this Magento development environment requires browser-based, OS-agnostic program, and this year I deployed the Cloud9 IDE for Magento and around 1000 developers like to use it over local IDE and Magento Cloud. In this post, I’ll be walking through our setup process and behind-the-scenes thoughts on using AWS Cloud9. Let's go!

What is AWS Cloud9 for the Magento project and Why Use It?

AWS Cloud9 is the new and improved (or at least updated) version of the original cloud9.io. Amazon acquired cloud9.io a few years ago and it’s nice to see that they’ve made it available as part of their AWS suite of cloud computing tools. It’s an online Integrated Developer Environment (IDE) that allows users to have access to Magento development or production!! multi-cloud virtual machine with a user interface designed for software development. That means that it is a way to program Magento and write NodeJS microservices code online, without having to do a ton of initial set up on individual computers. For Magento developers, this is a dream — no more configuring and downloading editors, package managers, php-fpm, Apaches, diseases, elastic searches, mysqls etc.

AWS Cloud9 comes preconfigured with many useful packages that make getting up and running really simple: php, python,nodeJS, npm, pip, git, flask, ruby, and a number of other languages and frameworks come pre-installed. For the most part, this is great, but can sometimes possibly lead to some hard-to-diagnose-and-fix issues around versioning. that's why it is better to use our own Magento installation on cloud 9 machines. More on that later.

Magento 2 Cloud 9 Black Theme IDE look

When you open up an AWS Cloud9 Environment (I’ll just start calling an Environment going forward), you’ll see a main code editing area, a navigation bar on the left side, and a command line bar down at the bottom. These are pretty standard components of development environments, and what I like about Cloud9 is how well they work together. Creating a new file in the command line updates the navigation bar, and clicking on files in the navigation bar will open them up in the code editor. It’s pretty intuitive, which is a big plus for new learners.

Cloud 9 is a Cloud-based IDE used for writing and debugging(xDebug) any code right within your own browser. We will show you how AWS Cloud9 can be used to edit and debug your Magento 1/2 source code. Since Cloud9 is hosted in the AWS cloud, you are able to work from any location as long as you have access to a browser and have an internet connection available. Cloud9 not only includes a full-featured code editor supporting IntelliSense but also comes with other productivity features, such as a debugger, a built-in terminal interface, and real-time peer programming capability. AWS Cloud9 provides all of the features you’d come to expect from a traditional, locally desktop-installed IDE. The only point of difference is that the Cloud9 IDE is fully web-based, with the only requirement to access it being a modern JavaScript-enabled web browser, such as Google Chrome or Firefox. Some of the great features supported within the Cloud9 IDE are themes, debugging, an integrated terminal, collaboration, keyboard bindings, IntelliSense, lambda integration, multiple cursors, syntax highlighting.

AWS Cloud9 IDE Collaboration

The AWS Cloud9 IDE incorporates an ability to perform collaboration and peer programming in real-time. You can share your Cloud9 environment with other team members, controlling their access with either read or read/write permissions. The joining user, if given full read/write permissions into your Cloud9 project, will be able to edit and update the currently opened file at the same time that you or any other team members are also editing. All edits take place in near real-time and are available to everyone in their own Cloud9 browser session, regardless of which user is making them. Additionally, a group chat capability is provided directly within the IDE to allow you and your team members to discuss edits and updates, et cetera. Membership into your Cloud9 environment is controlled through the use of IAM user accounts. That is each member you would like to share your environment with must have an associated IAM user account. They will need to log into the AWS console of their respective credentials and then access the shared Cloud9 URL that they will be given.

Within the Cloud9 IDE, you have direct access to a terminal session, embedded right within the IDE itself. The terminal gives you full sudo access, allowing you to perform any commands as if you were SSH’d into the underlying instance or server itself. Having the immediate terminal access from within the Cloud9 IDE makes it fast and productive, particularly so when the AWS CLI is already installed and has temporary credentials available to it, meaning you can perform queries and updates to any of the AWS services through the AWS CLI within the Cloud9 IDE.

AWS Cloud9 provides direct integration features with AWS Lambda. If you’re building serverless applications using AWS Lambda, then Cloud9 can be used to code, debug, and deploy your functions right within the IDE itself. Additionally, Cloud9 allows you to edit your lambda functions and debug them locally, increasing productivity. This reduces the number of deployment cycles required and speeds up the development process.

The Cloud9 IDE maintains an internal file revision history, allowing me to playback the edits that have taken place over time for the currently opened source code file. This feature allows you to revert back to a particular revision, kind of like Control + Z or Undo on steroids. Creating a new Cloud9 IDE environment is quick and easy. The fastest approach is to give your new environment a name, choose the EC2 environment type, and then select the EC2 instance type or connect to the existed SSH server.

How do I set up Cloud9 for Magento developers?

(Note: This part of the post is pretty technical/wonky. Please reach out if you need any help! egorshitikov@gmail.com or create a ticket on GitHub)

Step 1: Set up a traditional AWS account or and AWS Educate Account. Head to http://aws.amazon.com or https://aws.amazon.com/education/awseducate/ and sign up for a new AWS account. For traditional AWS, you’ll need to use a credit card. However, the use of cloud9 is free. Once you’ve created a canonical account, you’ll be taken to the AWS console.

When you create an EC2 environment, AWS Cloud9 creates a new environment, requests Amazon EC2 to launch a new instance, and then connects the newly launched instance to the new environment. Creating an EC2 environment has the following benefits:

• Automatic instance launching. When you create an EC2 environment, AWS Cloud9 requests Amazon EC2 to create a new instance at the same time. In an SSH environment, you must provide an existing cloud compute instance (for example an Amazon EC2 instance) or your own server yourself.
• Automatic instance shutdown. By default, AWS Cloud9 automatically shuts down the EC2 environment 30 minutes after all web browser instances that are connected to the IDE for the EC2 environment are closed. (You can change this behavior at any time.) This helps reduce additional charges to your AWS account for using Amazon EC2.
• Automatic instance cleanup. When you delete an EC2 environment, the connected Amazon EC2 instance is automatically deleted. This also helps reduce additional charges to your AWS account for using Amazon EC2. In an SSH environment that is connected to cloud compute instance, you must remember to delete the instance yourself.

If you don’t want to incur additional charges to your AWS account for using AWS cloud compute instances, so you decide to connect AWS Cloud9 to an existing cloud compute instance outside of AWS or your own server instead.

In our case, we will connect to the existed development environment hosted on the Digital Ocean.

Digital Ocean AWS Cloud 9 Magento environment integration.

To instruct AWS Cloud9 to connect an environment to an existing cloud compute instance or your own server in our case DO, you create an AWS Cloud9 SSH development environment. However, before you create an SSH environment.

SSH host requirements

The existing cloud compute instance or your own server must meet the following requirements for AWS Cloud9 to connect it to an SSH environment.

• It must run Linux. (AWS Cloud9 doesn’t support Windows.)
• It must be reachable over the public internet by using SSH. If it is reachable only through a virtual private cloud (VPC) or virtual private network (VPN), that VPC or VPN must have access to the public internet.
• It must have Python installed, and the version must be 2.7. To check the version, from the existing instance’s or server’s terminal, run the command python --version . To install Python 2.7 on the instance or server, see one of the following:
• Step 1: Install Required Tools in the Python Sample.
• Download Python from the Python website and see Installing Packages in the Python Packaging User Guide.
• To connect to your own server to verify and meet requirements, you could search the internet using a phrase such as “connect to a server by using the ssh command” (from macOS or Linux) or “connect to a server by using PuTTY” (from Windows).
• It must have Node.js installed. We currently support versions from Node.js 0.6.16 to Node.js 12.x.
• Warning
• AWS Cloud9 installation problems may occur when creating an SSH environment if you use a Node.js version that’s not supported by AWS Cloud9.
• To check the version, from the existing instance’s or server’s terminal, run the command node --version . To install Node.js on the instance or server, see one of the following:
• Step 1: Install Required Tools in the Node.js Sample.
• Installing Node.js via package manager on the Node.js website.
• Node Version Manager on GitHub.
• The path to the directory on the existing instance or server that you want AWS Cloud9 to start from after login must have its access permissions set to rwxr-xr-x. This means read-write-execute permissions for the owner that corresponds to the login name that you specify in the create environment wizard for User on the Configure settings page, read-execute permissions for the group that this owner belongs to, and read-execute permissions for others.
• For example, if the directory’s path is ~ (where ~ represents the home directory for the login name that you specify for User on the Configure settings page), you can set these permissions on the directory by running the chmod command on the instance or server, as follows.
• sudo chmod u=rwx,g=rx,o=rx ~
• or you can add the user to the owner group like this:

sudo usermod -a -G www-data yegor  #(in my case)
exec su -l yegor #(in my case)

Replace yegor with your user name

Automated Installation

• Download and run the AWS Cloud9 Installer on the existing instance or server.

curl -L https://raw.githubusercontent.com/c9/install/master/install.sh | bash wget -O — https://raw.githubusercontent.com/c9/install/master/install.sh | bash

• Optionally, you can restrict inbound traffic over SSH to only the IP addresses that AWS Cloud9 uses. To do this, set inbound SSH traffic to the IP ranges as described in Inbound SSH IP address ranges for AWS Cloud9.

If you need IP whitelisting you can use whitelisted Jump host.

Jump host must be reachable over the public Internet using SSH. It must allow inbound access by any IP address over the specified port.

The public SSH key value that was copied into the ~/.ssh/authorized_keys file on the existing instance or server must also be copied into the ~/.ssh/authorized_keys file on the jump host.

some Linux distributives like Amazon Linux 2 AMI does not come pre-installed with one of the Cloud9 SSH required packages nc/netcat. You manually installed the nc package (sudo yum install nc -y) on the Jump Host instance.

After you are sure your instance or server meets the preceding requirements, create an SSH environment for AWS Cloud9 to connect it to.

AWS Cloud9 can use an SSH public key to connect securely to your server. To connect, add our public key from below to the ~/.ssh/authorized_keys file on your server and provide your remote login credentials.

You will have something like this:

Magento PHP xDebug Configuration for Cloud9 env

zend_extension=xdebug.so
xdebug.remote_enable=1
xdebug.profiler_enable_trigger = 1
xdebug.profiler_enable = 0
xdebug.remote_enable = 1

Xdebug provides an interface for debugger clients that interact with running PHP scripts.

Xdebug’s (remote) debugger allows you to examine data structure, interactively walk through your and debug your code. The protocol that is being used is open, and is called DBGp. This protocol is implemented in Xdebug 2, and replaces an older GDB-like protocol that is no longer supported.

Starting Magento Debugging

In order to enable Xdebug’s debugger for Cloud 9 Magento you need to make some configuration settings in php.ini. These settings are xdebug.remote_enable to enable the debugger, xdebug.remote_host and xdebug.remote_port to configure the IP address and port where the debugger should connect to. There is also a xdebug.remote_connect_back setting that can be used if your development server is shared with multiple developers.

If you want the debugger to initiate a session when an error situation occurs (PHP error or exception) then you also need to change the xdebug.remote_mode setting. Allowed values for this setting are “req” (the default) which makes the debugger initiate a session as soon as a script is started, or “jit” when a session should only be initiated on an error.

After making all those settings Xdebug will still not start a debugging session automatically when a script is run. You need to activate Xdebug’s debugger and you can do that in three ways:

Using an environment variable

When running the script from the command line you need to set an environment variable, like:

export XDEBUG_CONFIG="idekey=session_name"
php myscript.php

On Windows, setting an environment variable is done with set:

set XDEBUG_CONFIG="idekey=session_name"

You can also configure the xdebug.remote_host, xdebug.remote_port, xdebug.remote_mode and xdebug.remote_handler in this same environment variable as long as you separate the values by a space:

export XDEBUG_CONFIG="idekey=session_name remote_host=localhost profiler_enable=1"

All settings that you can set through the XDEBUG_CONFIG setting can also be set with normal php.ini settings.

Using a GET parameter- Simples Way

If you want to debug a script started through a web browser, simply add XDEBUG_SESSION_START=magento_cloud_sucks as a parameter to the Magento URL. Instead of using a GET parameter, you can also set XDEBUG_SESSION_START as a POST parameter, or through a cookie named XDEBUG_SESSION. Refer to the next section to read on how debug sessions work from within a browser window.

Using a browser extension

An alternative way to activate the debugger while running PHP through a web server is by installing one of the following four browser extensions. Each of them allows you to simply enable the debugger by clicking on one button. When these extensions are active, they set the XDEBUG_SESSION cookie directly, instead of going through XDEBUG_SESSION_START as described in HTTP Debug Sessions further on.

Before you start your script you will need to tell your client that it can receive debug connections.

Cloud9 comes with an implementation for the v8 debug protocol and additional support of gdb, the GNU Project Debugger and xdebug implementation

UI

The debugger user interface consists of a panel with a button toolbar and several debug panels. By default there are 4 debug panels:

• Watch Expressions
• Call Stack
• Scope Variables
• Breakpoints

Other plugins can introduce new debug panels — this is outside of the scope of this article and will be addressed in a future article.

The debugger integrates with the Ace editor and allows users to set (conditional) breakpoints and highlights the current line while stepping through the code or looking through the call stack. In addition, while execution is paused, the user can hover over a variable in the editor to evaluate that variable in the current context or frame.

PHP debugging with Cloud 9

Debug Your Magento 2 Code

1. On the run configuration tab for your code, choose Run in Debug Mode. The bug icon turns to green on a white background. For more information, see Run Your Code and Create a Run Configuration.
2. Set any breakpoints in your code you want to pause at during the run, as follows
3. Open each file that you want to set a breakpoint in.
4. At each point in a file where you want to set a breakpoint, choose the blank area in the gutter to the left of the line number. A red circle appears.
5. To remove a breakpoint, choose the existing breakpoint in the gutter.
6. To disable a breakpoint instead of removing it, in the Debugger window, in Breakpoints, clear the box that corresponds to the breakpoint you want to disable. To enable the breakpoint again, select the box you cleared.
7. To disable all breakpoints at once, in the Debugger window, choose Deactivate All Breakpoints. To enable all breakpoints again, choose Activate All Breakpoints.
8. If the Debugger window isn’t visible, choose the Debugger button. If the Debugger button isn’t visible, on the menu bar choose Window, Debugge
9. Set any watch expressions for which you want to get the value at the point where a run pauses, as follows
10. In the Debugger window, in Watch Expressions, choose Type an expression here
11. Type the expression you want to watch, and then press Enter.
12. To change an existing watch expression, right-click the watch expression, and then choose Edit Watch Expression. Type the change, and then press Enter.
13. To remove an existing watch expression, right-click the watch expression, and then choose Remove Watch Expression.
14. Run your code.

Whenever a run pauses, you can do the following in the Debugger window, as shown.

Some Notes

Switching from Python2 to Python3 for Magento 2 microservice development:

grep -v "alias python=python27" ../.bashrc > temp && mv temp ../.bashrc
python3 -m venv ../p3
echo 'source ../p3/bin/activate' >> ../.bashrc

Make sure they close the terminal and then open a new one once they’ve run this. Reach out if you want to know more about what’s going on here.

You’ll want to install the c9 npm package that allows you to use the c9 command to open files in the code editor directly from the command line.