loading...
Cover image for Setting up the IDE (Integrated Development Environment)

Setting up the IDE (Integrated Development Environment)

th3n00bc0d3r profile image Muhammad ・9 min read

Welcome to Linux, let's start making this environment work for us, and make us do miracles. So on the upper right corner of the screen click the taskbar and connect to the internet.

Next click on activities on the upper left, and you have firefox, but we need chrome, so open firefox and go to.https://www.google.com/chrome/ and click on Download Chrome.

You will be given with an option to select the type of file, so we are on a Debian Based and the .deb file is just like an .exe file. Download it and Click on it and the installer will start.

Now Eddy will open which is an installer for all deb files, isn't it simple. Just click install and you have chrome.

Next lets install visual studio code, so head to https://code.visualstudio.com/download and click on the .deb file and repeat the process.

Next we need MySQL Workbench, head over to https://dev.mysql.com/downloads/workbench/ and from the dropdown select Ubuntu Linux.

Next select the Deb Package and click on download.

Yes, it asks to register, forget it, just click on No Thanks, just start my download.

Now you can click on Deb file and the installer will start, if you click on 2 files individually it queues up and you can multiple install files, how wonderful it is.

Now if you click on activities, and select the dotted icon, you can see we have the programs installed to us.

One last thing we need is a dependency, so use the following link and install the .deb file.

https://packages.sury.org/php/pool/main/libz/libzip/libzip5-dbgsym_1.3.2-1%2B0~20180714172643.1%2Bstretch~1.gbp053542_amd64.deb

Setting up a Local Server for Developer

Now we are going to install a local web server with php and a database server for local development and testing. Right click on the desktop and click open in Terminal. We need to add in some remote repositories so that we can get the additional files for installation. In the terminal copy paste the following code, one by one.


sudo apt-get install software-properties-common

sudo add-apt-repository ppa:ondrej/php

sudo apt-get update

Now the following command will install Nginx as the Webserver and PHP 7.3

sudo apt-get install nginx php7.3-fpm php7.3-cli php7.3-mysql php7.3-gd php7.3-imagick php7.3-recode php7.3-tidy php7.3-xmlrpc php7.3-common php7.3-curl php7.3-mbstring php7.3-xml php7.3-bcmath php7.3-bz2 php7.3-intl php7.3-json php7.3-readline php7.3-zip

Now lets see if all is good, use the following command to check. Open Chrome and goto http://localhost/ which is your own computer.

Next lets test PHP, in the terminal type

sudo php -v

Now we need to tweak Nginx a little so in the terminal type

sudo nano /etc/nginx/nginx.conf

Use arrows to move down to user and replace www-data with your username in my case it was darkside. Also set worker_processes to 1.

Now to save press the Ctrl + O on your keyboard and press enter, then press Ctrl + X to exit.

Next we need to fix a couple of things in PHP so in terminal type

sudo nano /etc/php/7.3/fpm/pool.d/www.conf

Now scroll down and in the user = www-data replace it www-data with your username, in my case it was darkside, do the same for group.

Scroll down a little more and you`ll find listen.owner and listen.group and set them to your username, in my case it is darkside. Now press Ctrl + O to save and then Ctrl + X to exit.

Next type in the following;

sudo nano /etc/nginx/sites-available/default

Scroll down a bit and add index.php to the index tag, also set server_name to localhost, as shown in the screen.

Next scroll down a little and remove the # tag from the location ~.php$ {, this is uncommenting the lines. Also from the include snippets and the fastcgi_pass. The fastcgi_pass is set to 7.0 so we need to set it to 7.3, just go to the end of the line and set it as follows

Fastcgi_pass unix://var/run/php/php7.3-fpm.sock

Also uncomment the braces (}) where it closes. Next press Ctrl + O to save and Ctrl +X to exit.

Now lets restart PHP and NGINX and test it before it.

`
sudo nginx -t

sudo service nginx restart

sudo php-fpm7.3 -t

sudo service php7.3-fpm restart
`

Run the next command to fix some permissions The $(whoami) variable will take the value of the user you are currently logged in.

`
sudo chown -R $(whoami):$(whoami) /var/www/html/

sudo chmod -R 755 /var/www
`
Now lets create a quick shortcut to our desktop for the www directory we will be working. Type the following in terminal.


sudo ln -s /var/www/ ~/Desktop/

A folder will appear on the desktop, this is our web directory to work. Lets open it up.

Now from the activities, let open visual studio code and test a couple of things. Open it up and change the theme if you want to. Drag and drop the folder into visual studio code and remove the index.nginx-debian.html file.

Create a new file index.html and type in anything. Now if you refresh the browser for http://localhost/ it will start displaying that.

Create a new file test.php and add the following code


<?php phpinfo();?>

Now open http://localhost/test.php and you should have this screen, great php is all up and running.

Now we need the database server so we are going to install mariadb. Type the following in terminal.


sudo apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0xF1656F24C74CD1D8

sudo nano /etc/apt/sources.list.d/mariadb.list

Paste the following
`

MariaDB 10.3 Repository

deb [arch=amd64,arm64,ppc64el] http://sfo1.mirrors.digitalocean.com/mariadb/repo/10.3/ubuntu bionic main

deb-src http://sfo1.mirrors.digitalocean.com/mariadb/repo/10.3/ubuntu bionic main

`

Press Ctrl + O to save and Ctrl + X to exit.

Next type the following;

`
sudo apt update

sudo apt install mariadb-server

`

Now the installation will start and you will be prompted somewhere in between with a password. Type in anything, i type noob. It will ask again retype it.

Once done, type the following to check the database server

`
sudo systmectl status mariadb

`

It should be active running in green. Good work! Pat yourself now. Now type the following command to connect to the database server

`
mysql -u root -p

`

Press Ctrl + C to exit.

Now open MySQL workbench and you can configure the settings there, by creating a New Connection by Clicking the Plus Sign.

Click on Test Connection and input the password, in my case

Username: root

Password: noob

Save the password in keychain and click Ok

Delete the Default connection, it sometimes gives errors.

Now double click it and check Don't show this again, and click on Continue anyway.

The last thing we would like to do, is also install a famous database tool by the name of phpmyadmin. Open chrome and head over to http://phpmyadmin.net/downloads/ and click on Download 4.9. It will download a compressed file.

Extract it to the www/html directory.

Now rename is to phpmyadmin.

Now if you open http://localhost/phpmyadmin you should see this page, your database credentials will work over here.

Great guys! Cheers get yourself a Beer, Coffee, Tea and celebrate we have now a fully development environment setup for linux.

Noob Index

Posted on by:

th3n00bc0d3r profile

Muhammad

@th3n00bc0d3r

By helping others, you learn how to help yourself. When the Noob is at work, remember it's not a Noob at work.

Discussion

pic
Editor guide
 

Have you consider using Vagrant, or Docker for that. I don't like to use my host environment for Web development since it is generally never the same configuration has my target production servers.

I really enjoy vagrant since it is running VMs. You can create networks of VM that represents exactly what your production environment will be. For instance, I used to have a default configuration popping up 3 VMs: one with the backend API server, one with static content with apache and the last with MySQL. It will require you to have a reasonable amount of RAM (at least 16GB to be fair) and at least a 4 cores/8 threads CPU. This was back in the day when Docker was getting traction, I think you can do the same with it with a fraction of the memory footprint.

So you know, the VMs were provisioned by SaltStack, the same used for my production servers. So I really had exactly the same config has a production environment. In the end, we were trying to make a system where we could automated tests when new software version would come out (such as a new MySQL or Apache HTTPd) to make sure updating production server wouldn't crash after an update, but never really get there.

 

Wow. This does look interesting, i`ll surely play around with it too. This setup is just for beginners aka noobs, to understand the basics. Eventually, once they adapt to this, we can surely take them to the production level. I just feel, this is a better way to understand stuff.

What is your opinion about it, much appreciate it ?

 

Yes indeed. If someone I know was to come to see me and ask me how to develop Web applications using Linux, this would probably be the article I would refer to.

For the record, I bought in may a System76 Oryx Pro, with Pop_Os! installed. And so far I love it ;)

Now I dont know if that is coincidence or mere luck, but the chain of events in our life sure seem to connect in one way or the other. I wonder

 
 

Well this is just a local testing setup. So do you use any autoinstallers?

 

Great i`ll look into it.