Technology plays a great role in our day-to-day lives. We are surrounded by applications and websites which we use in performing ordinary tasks. Thus, with advanced technology, web developers can create web pages and software that automate most work. Web development is the process of building, testing, and maintaining websites. It includes concepts such as web design, programming, database, and web publishing. Note that you need tools and techniques to assist in web development, including programming languages, code editors, compilers, browsers, or interpreters.

What is an IDE?

Note that to make the creation of software easier, development tools are required. The most effective application containing development tools is an IDE, which is an acronym for Integrated Development Environment.IDE provides a user interface for coding, testing, and debugging during the creation of applications. This software contains a compiler, debugger, and text editor. In this guide, we will focus on WebStorm and PhpStorm IDEs.

WebStorm

Webstorm by Jetbrains is an Integrated Development Environment used in web, server, mobile, and desktop application development. It utilizes powerful Javascript and other related technologies such as React, and Node. js,TypesScript and HTML.It offers excellent features, including frameworks, refactoring, language stylesheets, and navigation. Thus, Webstorm makes the development experience less cumbersome by automating routine work and assisting in handling complex projects.

Features of WebStorm

  • Navigation & Search: In Webstorm, it is easy to get around project files, codebase, and settings.
  • Smart Editor: It assists in writing code through autocompleting codes and provides suggestions for fixing errors.
  • Specialized in JavaScript: Provides a tool you will use in all parts of your JavaScript development.
  • Customizable: The Webstorm environment can be customized in that you can modify UI themes, shortcuts, and plugins.
  • Tool Integration: With the available tools in WebStorm, you can minimize context switching. These tools provide Unit testing, JavaScript debugging, a Built-in HTTP client, an integrated terminal, and others.
  • Open-source IntelliJ Platform
  • Supports Cordova, Ionic, Node.js, React Native, and PhoneGap.

PhpStorm

PhpStorm is an Integrated Development Environment for PHP and web developers. It is engineered by JetBrains and based on the java language. This innovative IDE offers an intelligent code editor, code refactoring, debugging, syntax highlighting, and code folding, and treats your code with care. Also, with PHPStorm, you can install additional plugins explicitly created for PhpStorm.

Features of PhpStorm

  • Entire development environment: PhpStorm allows developers to use PHP, Javascript, HTML, CSS, and other programming languages. Also, it offers code completion, and syntax highlighting features.
  • Testing and Debugging: In PhpStorm, is possible to debug a code even with zero configurations. Also, you can use PHPUnit to develop and run unit tests.
  • Supports Database: PhpStorms provides tools for working with SQL and databases. Thus, you can edit tables, analyze schemas with UML diagrams, and execute queries.
  • Multiple Php Framework: PhpStorm supports many frameworks such as Laravel, Symfony2, and CakePHP.
  • GitHub and git Integration: PhpStorm offers Great version control Integration through Git and Github.
  • Supports PHP 5.3 and above versions.
  • Built on the IntelliJ IDEA platform.

In this article, we will install Webstorm and PhpStorm on Solus, using Snap and Jetbrains Toolbox App. Snap is a package manager, while the toolbox is one of the best methods of installing Jetbrains software on your computer. Thus we will start by installing the two packages.

Installing Snapd on Solus

Start by upgrading your repositories.

sudo eopkg upgrade

Install Snap using this command:

sudo eopkg install snapd

Start and Enable Snap.

systemctl enable --now snapd.socket

Check the Snap Version.

$ snap --version
snap    2.55.5
snapd   2.55.5
series  16
solus   4.3
kernel  5.15.50-216.current

Installing ToolBox App on Solus

On the JetBrains Official Website, download the Toolbox App .tar.gz file.

From the terminal, upgrade Solus repositories.

sudo eopkg upgrade

Change the directory to access the Jetbrains Toolbox file.

cd Downloads

Extract the TooBox App .tar.gz file. Replace with the version of the JetBrains toolbox you have downloaded.

tar -xf jetbrains-toolbox-*.tar.gz

Move the extracted Toolbox App folder to a location you can access easily. For instance, I will move it to the Apps directory.

mv jetbrains-toolbox-*/ ~/Apps/

Exit from the current directory and switch to the new location of Toolbox App, which in my case is Apps.

cd Apps

Set permissions to execute the Toolbox App.

chmod 755 jetbrains-toolbox

Install the Toolbox App using this command.

./jetbrains-toolbox

A welcome page for Toolbox App will open, click on Continue.

You can now download and install applications from ToolboxApp.

Install WebStorm on  Solus

We will install Webstorm using Snap and Toolbox App.

Method 1: Using Snap

On the terminal, use the below command to install WebStorm.

sudo snap install webstorm --classic

Expected results after using the above command.

$ sudo snap install webstorm --classic
webstorm 2022.1.3 from jetbrains✓ installed

After the installation, verify the installation of Webstorm using the snap list command. This command will list the packages installed by snap including Webstorm.

$ snap list
Name      Version   Rev    Tracking       Publisher   Notes
webstorm  2022.1.3  266    latest/stable  jetbrains✓  classic

Launch the application by typing the word Webstorm, still on the terminal.

webstorm

Method 2:Using Toolbox App

Since we have already installed ToolboxApp, search for it from the activities and click on it to open.

From the Toolbox App, search for Webstorm. Then, click on the Install button.

After clicking on the install button, WebStorm will start downloading

After the download is complete, Webstorm will get installed from Toolbox App.

From Toolbox, you can see that Webstorm has been installed successfully. Also, with the dotted vertical line, you can see more options for the installed Webstorm.

Click on Webstorm to open it on Solus.

A configuration window will open.

WebStorm Configuration on Solus

After launching Webstorm either by Toolbox App or Snap, you will see the configuration window below. Choose on either send or don’t send anonymous statistics.

Webstorm will open and ask you to choose the license type. I will select Start trial as an example.

Then you are required to log in to your JetBrains account. Click on the login button as shown in the image above. A browser will open and ask for your Jetbrains account credentials. You can sign up in case you don’t have an existing account.

After signing in, you will be authorized to use Webstorm on Solus. Close the browser and get back to Webstorm.

On Webstorm, the license information will be displayed as shown below. Close the window to continue using Webstorm.

Using WebStorm on Solus

From Webstorm IDE, you can create projects and perform other activities. Start by clicking on New Project.

Rename the project with your preferred title.

I will name my project First_App. Then click on create button.

From the window that appears, right-click on your project and choose New followed by the type of file you want to create. In this example, I will choose an HTML file.

Provide a name for your file.

A file will be created with auto-generated code. I will edit the body of the index and write some text in it. To run the file, click on the green play Button.

The results will be displayed on your web browser as illustrated below.

Install PhpStorm on  Solus

We will install PhpStorm using two methods which include from Toolbox App and Snap.

Method 1:Using Snap

Remember that we have already installed Snap. From your terminal, enter this command to install Php Storm using Snap.

sudo snap install phpstorm --classic

Snap will install Phpstorm as shown below.

$ sudo snap install phpstorm --classic
phpstorm 2022.1.3 from jetbrains✓ installed

Verify the installation of PhpStorm using the snap list command.

$ snap list
Name      Version   Rev    Tracking       Publisher   Notes
core18    20220428  2409   latest/stable  canonical✓  base
phpstorm  2022.1.3  278    latest/stable  jetbrains✓  classic
snapd     2.56      16010  latest/stable  canonical✓  snapd

Launch PhpStorm on the Solus system by typing the word Phpstorm on your terminal.

phpstorm

Phpstorm configuration window will open. We will continue with the configuration after showing you how to install PhpStorm with Toolbox App.

Method 2: Using Toolbox App

Go to the Jetbrains application we installed earlier and search for Phpstorm. From the results that appear, click on the install button.

Phpstorm will start downloading as shown below.

After downloading, Phpstorm will proceed to install.

From the installed applications on Toolbox App, click on Phpstorm which will appear immediately after getting installed. By clicking on it, Phpstorm will open.

Then a Phpstorm configuration window will open.

Phpstorm Configuration on Solus

When you open Phpstorm either from Snap or Toolbox, a configuration window will open as shown below. Choose whether you want Jetbrains to send anonymous statistics.

Another window will open requiring you to activate your JetBrains license. Click on the Login button.

You will be directed to your browser where you are required to fill in your JetBrains login credentials. If you don’t have an existing account, create one.

After you have entered your Jetbrains login details, you will be authorized to use Phpstorm.

Close the browser and get back to Phpstorm. You will see the details of your license on the screen. Close the window to continue.

Phpstorm user interface will be displayed.

You are allowed to install plugins by Phpstorm. Click on the plugins section and choose the plugins you want to install.

Usage of Phpstorm on Solus

After a successful installation of Phpstorm, you are in a position to explore it. Click on New project to create an application.

Provide a name for the new project you want to create. For instance, I have named my project First_App. Click on Create button to proceed.

Another new window will appear. Right-click on your project to create a new file. Let’s use an example of an HTML file.

Type a name for the file you have selected and click the Enter button.

The file will be created and displayed. Write a text by editing the generated file. On the HTML file, I will type Technixleo on the body section as a heading One. Click on the green play button to run the file.

The text we added to the HTML file will be displayed on your browser.

Conclusion

Webstorm and Phpstorm are excellent integrated development environment (IDE) tools that you should consider using. In this guide, I have taken you through the installation of Webstorm and Phpstorm using Snap and ToolboxApp.Gain more information on the usage and configuration of the two tools from this article. In case of any query, leave a comment.

Additional Resources:

LEAVE A REPLY

Please enter your comment!
Please enter your name here