{"id":580,"date":"2017-03-25T14:12:12","date_gmt":"2017-03-25T06:12:12","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=580"},"modified":"2018-09-02T23:04:24","modified_gmt":"2018-09-02T15:04:24","slug":"how-i-setup-codiad-web-ide-on-my-raspberry-pi-3-with-ubuntu-server-15-10-3-nginx-and-php","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-i-setup-codiad-web-ide-on-my-raspberry-pi-3-with-ubuntu-server-15-10-3-nginx-and-php\/","title":{"rendered":"How I setup Codiad web IDE on my Raspberry Pi 3 with Ubuntu Server 15.10.3, Nginx and PHP"},"content":{"rendered":"

There are times when I get the urge to work on project source codes that reside on my Raspberry Pi 3 LEMP server while I am on the move. Setting up a web based IDE on my Raspberry Pi 3 is one way to enable me to code while I am on the move, so long as I have a device with a web browser that is connected to the internet. Since I had already setup a LEMP server to run WordPress on my Raspberry Pi 3<\/a> and that Codiad is written in PHP, Codiad<\/a> is an ideal web based IDE that I can set up on my Raspberry Pi 3<\/a>. <\/p>\n

This post documents how I setup Codiad web IDE on my Raspberry Pi 3. To make this post complete, I had taken some of the steps mentioned in my other posts on Raspberry Pi<\/a> and replicated it in this post.<\/p>\n

Getting the hardware<\/h2>\n

The hardware that I used for this setup is as follows:<\/p>\n

    \n
  1. A Raspberry Pi 3 motherboard<\/a><\/li>\n
  2. A PiBlox LEGO\u00ae Compatible Case<\/a><\/li>\n
  3. A SanDisk Ultra 32GB microSDHC UHS-I Card with Adapter<\/a><\/li>\n<\/ol>\n

    As my laptop came with a SD card reader, I did not have to get a SD card reader<\/a>. <\/p>\n

    Getting the Ubuntu Server 15.10.3 image for my Raspberry Pi 3 onto the micro SD card<\/h2>\n

    After I got the hardware that I needed, the next step was to get the Ubuntu Server 15.10.3 image for my Raspberry Pi 3. The awesome folks at Ubuntu Pi Flavour Maker<\/a> had made a few variations of Ubuntu images available for me to download<\/a>. <\/p>\n

    I downloaded a copy of the Ubuntu Server Standard 15.10.3 image<\/a> onto my windows machine via torrent. <\/p>\n

    Once I got the .xz file, I used 7-zip<\/a> to extract the .img file. I then used Win32 Disk Imager to write the .img file<\/a> into the SanDisk microSD card<\/a> via the SD card drive on my laptop.<\/p>\n

    Booting into Ubuntu Server 15.10.3 on my Raspberry Pi 3<\/h2>\n

    Once Win32 Disk Imager completed writing the Ubuntu Server 15.10.3 image onto my SanDisk microSD card<\/a>, I removed it from my SD card reader and inserted it to the SD card slot on the Raspberry Pi 3 motherboard. Note that unlike the Raspberry Pi 2, the microSD slot of the Raspberry Pi 3 motherboard is not a spring loaded one.<\/strong> This means that you just push to insert your microSD card and pull to remove your microSD card.<\/p>\n

    I then attached my trusty mouse<\/a>, keyboard<\/a>, monitor<\/a>, a RJ45 network cable from my DLink router and my old samsung charger to my Raspberry Pi 3 motherboard. After turning on the power, the login screen appears. The default username is 'ubuntu' and the password is 'ubuntu'.<\/p>\n

    Adding a new user<\/h2>\n

    I do not like a default username for my web server, even though it is not going to be used as the production server. Hence, I first added a new user via the command as follows:<\/p>\n

    \r\nsudo adduser techcoil\r\n<\/pre>\n
    I then went through the following Q and As:<\/p>\n
    \r\nAdding user `techcoil' ...\r\nAdding new group `techcoil' (1000) ...\r\nAdding new user `techcoil' (1000) with group `techcoil' ...\r\nCreating home directory `\/home\/techcoil' ...\r\nCopying files from `\/etc\/skel' ...\r\nEnter new UNIX password: \r\nRetype new UNIX password: \r\npasswd: password updated successfully\r\nChanging the user information for techcoil\r\nEnter the new value, or press ENTER for the default\r\n\tFull Name []: Techcoil\r\n\tRoom Number []: #1234\r\n\tWork Phone []: 12345678\r\n\tHome Phone []: 12345678\r\n\tOther []: 12345678\r\n<\/pre>\n
    After I had created my new user account, I proceeded to add it to the sudo group so that I was able to continue with installing the necessary software:<\/p>\n
    \r\nsudo adduser techcoil sudo\r\n<\/pre>\n
    Deleting the default user<\/h2>\n
    Once I had created my user, I proceeded to delete the default user. <\/p>\n
    I first restarted the server:<\/p>\n
    \r\nsudo reboot\r\n<\/pre>\n
    After the server booted up again, I logged in with my new user.<\/p>\n
    Once I had logged into the server, I typed the following in the terminal to delete the default user:<\/p>\n
    \r\nsudo deluser --remove-home ubuntu\r\n<\/pre>\n
    Resizing the file system of my Ubuntu Server 15.10.3 image to utilize the entire microSD card space on my Raspberry Pi 3<\/h2>\n
    By default, the Ubuntu Server 15.10.3 image does not utilize the entire microSD card space on my Raspberry Pi 3.<\/p>\n
    Therefore, I proceeded on to resize the file system of my Ubuntu Server 15.10.3 image to utilize the entire microSD card space on my Raspberry Pi 3<\/a>.<\/p>\n
    Adding swap space to my Ubuntu Server 15.10.3 image<\/h2>\n
    1 GB of ram is not going to be enough to run GitBucket alongside the other pieces that run the WordPress instance on my Raspberry Pi 3. As such, I also went on to add swap space to the Ubuntu Server 15.10.3 image<\/a> so as to complement the 1GB of ram on my Raspberry Pi 3.<\/p>\n
    Installing Nginx on my Ubuntu Server 15.10.3<\/h2>\n
    I installed Nginx with the following command:<\/p>\n
    \r\nsudo apt-get install nginx\r\n<\/pre>\n
    After the installation had completed, I ran the following command:<\/p>\n
    \r\ncurl -0 localhost\r\n<\/pre>\n
    And got the following output:<\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Welcome to nginx!<\/title>\r\n<style>\r\n    body {\r\n        width: 35em;\r\n        margin: 0 auto;\r\n        font-family: Tahoma, Verdana, Arial, sans-serif;\r\n    }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to nginx!<\/h1>\r\n<p>If you see this page, the nginx web server is successfully installed and\r\nworking. Further configuration is required.<\/p>\r\n\r\n<p>For online documentation and support please refer to\r\n<a href="http:\/\/nginx.org\/">nginx.org<\/a>.<br\/>\r\nCommercial support is available at\r\n<a href="http:\/\/nginx.com\/">nginx.com<\/a>.<\/p>\r\n\r\n<p><em>Thank you for using nginx.<\/em><\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    This output assured me that my Nginx web server was successfully installed.<\/p>\n
    Installing PHP<\/h2>\n
    As Codiad web IDE is written in PHP, I went on to install the PHP binary and the PHP Fast Process Manager. To do so, I ran the following commands in the terminal: <\/p>\n
    \r\nsudo apt-get install php5 php5-fpm\r\n<\/pre>\n
    After the installation had completed, I entered the following command:<\/p>\n
    \r\nsudo systemctl status php5-fpm\r\n<\/pre>\n
    And got the following verification:<\/p>\n
    \r\n\u25cf php5-fpm.service - The PHP FastCGI Process Manager\r\n   Loaded: loaded (\/lib\/systemd\/system\/php5-fpm.service; enabled; vendor preset: enabled)\r\n   Active: active (running) since Wed 2016-04-06 12:52:55 UTC; 4min 59s ago\r\n Main PID: 7300 (php5-fpm)\r\n   Status: "Processes active: 0, idle: 2, Requests: 0, slow: 0, Traffic: 0req\/sec"\r\n   CGroup: \/system.slice\/php5-fpm.service\r\n           \u251c\u25007300 php-fpm: master process (\/etc\/php5\/fpm\/php-fpm.conf)\r\n           \u251c\u25007302 php-fpm: pool www\r\n           \u2514\u25007303 php-fpm: pool www\r\n\r\nApr 06 12:52:55 ubuntu-standard systemd[1]: Starting The PHP FastCGI Process....\r\nApr 06 12:52:55 ubuntu-standard systemd[1]: Started The PHP FastCGI Process ....\r\nApr 06 12:52:58 ubuntu-standard systemd[1]: Started The PHP FastCGI Process ....\r\nHint: Some lines were ellipsized, use -l to show in full.\r\n<\/pre>\n
    Installing PHP modules that are required by Codiad web IDE<\/h2>\n
    The Codiad web IDE that I had downloaded requires, mbstring, zip and openssl PHP libraries. Since mbstring and zip were not packaged with the PHP binary that I had installed in the previous step, I installed php-mbstring and php-zip by running the following command:<\/p>\n
    \r\nsudo apt-get install php-zip php-mbstring\r\n<\/pre>\n
    Downloading the latest copy of Codiad web IDE<\/h2>\n
    At the time of this writing, the latest stable release for Codiad web IDE is v.2.7.5. To download the source code for Codiad v.2.7.5, I ran the following commands in the terminal:<\/p>\n
    \r\ncd \/var\/www\r\nsudo wget https:\/\/github.com\/Codiad\/Codiad\/archive\/v.2.7.5.tar.gz\r\nsudo tar -xvzf v.2.7.5.tar.gz\r\nsudo rm v.2.7.5.tar.gz\r\n<\/pre>\n
    After the commands had completed, I got the Codiad web IDE source code at \/var\/www\/Codiad-v.2.7.5<\/code>.<\/p>\n
    Changing the owner of the \/var\/www\/Codiad-v.2.7.5<\/code> directory to www-data<\/h2>\n
    In order for Codiad to work, we will need to give write permissions to the www-data<\/code> user. Hence, I ran the following command to change the owner of the \/var\/www\/Codiad-v.2.7.5<\/code> directory to the www-data<\/code> user:<\/p>\n
    \r\nsudo chown -R www-data:www-data Codiad-v.2.7.5\/\r\n<\/pre>\n
    Creating a type A DNS record to point Codiad Web IDE<\/h2>\n
    After I had gotten the prerequisites to run Codiad on my Raspberry Pi 3, I went ahead to create a type A DNS record<\/a> to point to the Codiad Web IDE instance hosted on my Raspberry Pi 3. To do so, I leverage on Digital Ocean<\/a> to create a subdomain from one of my existing URL to point to the public IP address that my ISP had given my home router. <\/p>\n
    Configuring Nginx to serve Codiad web IDE via URL for initial setup<\/h2>\n
    With the type A DNS record created, Digital Ocean's name server will send the web browser the public IP address of my home router, which has a Network Address Translation entry to point to the private IP address of my Raspberry Pi. With that public IP address, the web browser will be able to establish a TCP\/IP connection to send HTTP requests over to my Raspberry Pi 3. Each HTTP request that it sends will have the following header:<\/p>\n
    \r\nHost: ide.anexistingurl.com\r\n<\/pre>\n
    With this header, I would then need to configure the Nginx server running on my Raspberry Pi 3 to<\/p>\n
      \n
    1. redirect HTTP requests tagged with Host: ide.anexistingurl.com over to the PHP FPM server.<\/li>\n
    2. tell the PHP FPM server to use the PHP codes in \/var\/www\/Codiad-v.2.7.5 to serve the HTTP requests.<\/li>\n<\/ol>\n
      To do so, I first ran nano to create a new configuration file inside the \/etc\/nginx\/sites-enabled<\/code> directory:<\/p>\n
      \r\nsudo nano \/etc\/nginx\/sites-enabled\/ide.anexistingurl.com.conf\r\n<\/pre>\n
      And populate the \/etc\/nginx\/sites-enabled\/ide.anexistingurl.com.conf<\/code> with the following contents:<\/p>\n
      \r\nserver {\r\n\tlisten   80;\r\n\troot \/var\/www\/Codiad-v.2.7.5;\r\n\tindex index.php index.html;\r\n\r\n\tserver_name ide.anexistingurl.com;\r\n\r\n\tlocation \/ {\r\n\t\t# First attempt to serve request as file, then\r\n\t\t# as directory, then fall back to index.html\r\n\t\ttry_files $uri $uri\/ \/index.html;\r\n\t}\r\n\r\n\terror_page 404 \/404.html;\r\n\r\n\t# redirect server error pages to the static page \/50x.html\r\n\terror_page 500 502 503 504 \/50x.html;\r\n\tlocation = \/50x.html {\r\n\t\troot \/usr\/share\/nginx\/www;\r\n\t}\r\n\r\n\t# pass the PHP scripts to FastCGI server \r\n\tlocation ~ \\.php$ {\r\n                fastcgi_split_path_info ^(.+\\.php)(\/.+)$;\r\n\r\n                fastcgi_index index.php;\r\n                include fastcgi_params;\r\n                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\r\n                fastcgi_pass unix:\/var\/run\/php5-fpm.sock;\r\n\t}\r\n}\r\n<\/pre>\n
      Configuring a free SSL certificate with Let's Encrypt<\/h2>\n
      A SSL certificate will ensure that the communication between my browser and my Codiad Web IDE server endpoint remain encrypted. And with Let's Encrypt<\/a>, I was able to create a free SSL certificate with a trusted Certificate Authority<\/a>. Hence, with Let's Encrypt, I will be able to have secured connections from my browser to my Codiad Web IDE running on my Raspberry Pi 3, without any warnings from my browser that the SSL certificate that it received was not issued by a trusted certificate authority.<\/p>\n
      Allowing traffic to \/.well-known uri path<\/h3>\n
      The \/.well-known uri path would be accessed by Let's Encrypt server to validate that I was running the Let's Encrypt client on my Raspberry Pi 3 during the generation of the SSL certificate. Hence, I added the following location block in the previous Nginx configuration:<\/p>\n
      \r\n\tlocation ~ \/.well-known {\r\n\t\tallow all;\r\n\t}\r\n<\/pre>\n
      The addition of the location block resulted in the following Nginx configuration:<\/p>\n
      \r\nserver {\r\n\tlisten   80;\r\n\troot \/var\/www\/Codiad-v.2.7.5;\r\n\tindex index.php index.html;\r\n\r\n\tserver_name ide.anexistingurl.com;\r\n\r\n\tlocation ~ \/.well-known {\r\n\t\tallow all;\r\n\t}\r\n\r\n\tlocation \/ {\r\n\t\t# First attempt to serve request as file, then\r\n\t\t# as directory, then fall back to index.html\r\n\t\ttry_files $uri $uri\/ \/index.html;\r\n\t}\r\n\r\n\terror_page 404 \/404.html;\r\n\r\n\t# redirect server error pages to the static page \/50x.html\r\n\terror_page 500 502 503 504 \/50x.html;\r\n\tlocation = \/50x.html {\r\n\t\troot \/usr\/share\/nginx\/www;\r\n\t}\r\n\r\n\t# pass the PHP scripts to FastCGI server \r\n\tlocation ~ \\.php$ {\r\n                fastcgi_split_path_info ^(.+\\.php)(\/.+)$;\r\n\r\n                fastcgi_index index.php;\r\n                include fastcgi_params;\r\n                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\r\n                fastcgi_pass unix:\/var\/run\/php5-fpm.sock;\r\n\t}\r\n}\r\n<\/pre>\n
      I then restarted Nginx to take the configuration changes:<\/p>\n
      \r\nsudo systemctl restart nginx.service\r\n<\/pre>\n
      Getting the Let's Encrypt client application to create a free certified SSL certificate and the corresponding private key<\/h3>\n
      With the uri ready for validation, I then proceeded to get the Let's Encrypt client application.<\/p>\n
      I first installed Git:<\/p>\n
      \r\nsudo apt-add-repository ppa:git-core\/ppa\r\nsudo apt-get update\r\nsudo apt-get install git -y\r\n<\/pre>\n
      And then use Git to clone a copy of the Let's Encrypt client application onto the local file system of my Raspberry Pi 3:<\/p>\n
      \r\ncd \/opt\r\nsudo git clone https:\/\/github.com\/letsencrypt\/letsencrypt.git\r\n<\/pre>\n
      After the cloning had completed, I then ran the Let's Encrypt client application:<\/p>\n
      \r\n\/opt\/letsencrypt\/letsencrypt-auto certonly -a webroot --webroot-path=\/var\/www\/Codiad-v.2.7.5 -d ide.anexistingurl.com \r\n<\/pre>\n
      Generating a strong Diffie-Hellman group<\/h3>\n
      I also generated a strong Diffie-Hellman group for Openssl to perform the Diffie-Hellman (DH) key-exchange:<\/p>\n
      \r\nsudo openssl dhparam -out \/etc\/ssl\/certs\/dhparam.pem 2048\r\n<\/pre>\n
      Configuring Nginx to use the Let's Encrypt SSL certificate and private key for serving HTTPS traffic<\/h3>\n
      I opened up \/etc\/nginx\/sites-enabled\/ide.anexistingurl.com.conf which I had created earlier:<\/p>\n
      \r\nsudo nano \/etc\/nginx\/sites-enabled\/ide.anexistingurl.com.conf\r\n<\/pre>\n
      and replaced its contents with the following text:<\/p>\n
      \r\nserver {\r\n        listen   80;\r\n        server_name ide.anexistingurl.com;\r\n        return 301 https:\/\/$host$request_uri;\r\n}\r\n\r\n# For ssl\r\nserver {\r\n        ssl on;\r\n\r\n        ssl_certificate \/etc\/letsencrypt\/live\/ide.anexistingurl.com\/fullchain.pem;\r\n        ssl_certificate_key \/etc\/letsencrypt\/live\/ide.anexistingurl.com\/privkey.pem;\r\n        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;\r\n        ssl_prefer_server_ciphers on;\r\n        ssl_dhparam \/etc\/ssl\/certs\/dhparam.pem;\r\n        ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DH$\r\n        ssl_session_timeout 1d;\r\n        ssl_session_cache shared:SSL:50m;\r\n        ssl_stapling on;\r\n        ssl_stapling_verify on;\r\n        add_header Strict-Transport-Security max-age=15768000;\r\n        default_type application\/octet-stream;\r\n        listen 443;\r\n\r\n        root \/var\/www\/Codiad-v.2.7.5;\r\n        index index.php index.html;\r\n\r\n        server_name ide.anexistingurl.com;\r\n\r\n        location ~ \/.well-known {\r\n                allow all;\r\n        }\r\n\r\n        location \/ {\r\n                # First attempt to serve request as file, then\r\n                # as directory, then fall back to index.html\r\n                try_files $uri $uri\/ \/index.html;\r\n        }\r\n\r\n        error_page 404 \/404.html;\r\n\r\n        # redirect server error pages to the static page \/50x.html\r\n        error_page 500 502 503 504 \/50x.html;\r\n        location = \/50x.html {\r\n                root \/usr\/share\/nginx\/www;\r\n        }\r\n\r\n        # pass the PHP scripts to FastCGI server\r\n        location ~ \\.php$ {\r\n                fastcgi_split_path_info ^(.+\\.php)(\/.+)$;\r\n\r\n                fastcgi_index index.php;\r\n                include fastcgi_params;\r\n                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;\r\n                # With php5-fpm (or php7-fpm, ie on Ubuntu 16.04):\r\n                fastcgi_pass unix:\/var\/run\/php5-fpm.sock;\r\n        }\r\n}\r\n<\/pre>\n
      The first server block would make my Nginx server listen on port 80 for requests reaching ide.anexistingurl.com and redirect all traffic to its HTTPS counterpart.<\/p>\n
      The second server block would configure my Nginx server to serve SSL traffic on port 443 for ide.anexistingurl.com. In that block, I point my server to the strong Diffie-Hellman group, the Let's Encrypt certified SSL certificate and the private key.<\/p>\n
      I kept the location block to requests made to the \/.well-known prefix so that I could renew my SSL certificate for ide.anexistingurl.com with the Let's Encrypt client application in the future.<\/p>\n
      With the that, I restarted Nginx to take the configuration changes for my Nginx to serve HTTPS requests for my Codiad Web IDE:<\/p>\n
      \r\nsudo systemctl restart nginx.service\r\n<\/pre>\n
      Specifying the directories where Codiad IDE can take as absolute paths for the projects that I want to work on<\/h2>\n
      By default, Codiad IDE only allows absolute path to projects contained in its own source code root directory and \/home<\/code>. Since I want to work on projects that are contained in \/var\/www, I opened up \/var\/www\/Codiad-v.2.7.5\/config.php:<\/p>\n
      \r\nsudo nano \/var\/www\/Codiad-v.2.7.5\/config.php\r\n<\/pre>\n
      and changed the following line:<\/p>\n
      \r\ndefine("WHITEPATHS", BASE_PATH . ",\/home");\r\n<\/pre>\n
      to:<\/p>\n
      \r\ndefine("WHITEPATHS", BASE_PATH . ",\/home,\/var\/www\/");\r\n<\/pre>\n
      Completing the initial setup for Codiad<\/h2>\n
      Once my Nginx server had restarted successfully, I used my web browser to access ide.anexistingurl.com and was returned the following screen: <\/p>\n
      \"Codiad<\/p>\n
      This screen allowed me to create my first Codiad IDE user with a first project to work on. The directory that I provided in this screen had to be owned by the www-data user; if not, Codiad web IDE will not be able to use that directory to work on the source codes within that directory.  <\/p>\n
      After I had filled in the fields and clicked the install button, I got the following screen to work on the source codes that was contained within the directory that I had supplied in the previous screen:<\/p>\n
      \"Codiad<\/p>\n
      In this case, I had supplied the directory where I had placed my Codiad Web IDE as the project that I want to work on.<\/p>\n
      Buying the Raspberry Pi 3 hardware to host your own Codiad Web IDE<\/h2>\n
      If you do not have the Raspberry Pi 3 hardware mentioned in this post yet, you may want to purchase them from Amazon. Simply click on the button below to add the Raspberry Pi 3 hardware to your cart. You may remove anything that you already have or replace some of the hardware with other hardware.<\/p>\n
      <\/p>\n

      \n<\/form>\n
      <\/center><\/p>\n\n