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.

Magento 2 Cloud 9 Black Theme IDE look

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.

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)

  • 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.

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 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)

Automated Installation

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

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.

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

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.

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
set XDEBUG_CONFIG="idekey=session_name"
export XDEBUG_CONFIG="idekey=session_name remote_host=localhost profiler_enable=1"

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.

UI

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

  • Call Stack
  • Scope Variables
  • Breakpoints

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.

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

Magento/APP Cloud Architect. Melting metal server infrastructure into cloud solutions.