UX

Build your own online IDE

On this page

This is still a draft!

Goal

The goal of this project is to build an online IDE with which you can live edit the code of a PHP Laravel website.

Software setup

VM Installation

Create a new volume

  1. Log into Cockpit
  2. Go to tab Virtual Machines
  3. Click on Storage pools
  4. Click on the storage pool you created earlier
  5. Click on tab Storage volumes
  6. Click on Create volume

    Settings
    Name: Give the volume a distinctive name.
    Size: Set the size of the virtual volume (e.g. 30 GB).

  7. Format: keep qcow2
  8. Click on Create

Create a new virtual machine

  1. Log into Cockpit
  2. Go to tab Virtual Machines
  3. Click on Create VM
  4. Name: give the virtual machine a distinctive name (e.g. Development).
  5. Connection: choose System
  6. Installation type: choose Local install media
  7. Installation source: select /var/lib/libvirt/images/rhel-8.4-x86_64-dvd.iso
  8. Operating system: Red Hat Enterprise Linux 8.4 (Ootpa)
  9. Storage: select the storage pool that you created earlier.
  10. Volume: select the volume you created earlier.
  11. Memory: 4 GB is probably enough
  12. Keep Run unattended installation unchecked.
  13. Deselect Immediately start VM
  14. Click on Create

Install RHEL in the VM

Install RHEL

  1. Go to tab Virtual Machines
  2. Click on the just created virtual machine.
  3. Click on Install
  4. Click in the VNC console
  5. Select Test this media & install Red Hat Enterprise Linux 8.4
  6. Select the language you want to use during the installation.
  7. Keyboard: change if necessary.
  8. Language Support: change if necessary.
  9. Time & Date: select a city to set the time and the date.
  10. Connect to Red Hat: keep it on Not Registered
  11. Installation Source: keep it on Local media
  12. Software Selection: select the base environment Minimal Install
  13. Installation Destination:

    Select Custom under Storage Configuration and click on Done

    To add a partition click on the plus sign (+).

    a. Add a partition with the mount point biosboot (without the/ ) and a capacity of1 MiB
    b. Add a partition with the mount point /boot and a capacity of 1 GiB
    c. Add a partition with the mount point swap (without the / ) and a capacity of 4 GiB
    d. Add a partition with the mount point / and leave the capacity empty.
    (When you leave the capacity empty all available space will be used.)

    Click on Done
    Click onAccept Changes

  14. KDUMP: keep it on enabled.
  15. Network & Host name: enable the Ethernet connection.
    Here you can also change the host name of the virtual machine.
  16. Security Policy: set the switch Apply security policy on OFF
  17. Root Password: set a root password.
  18. User Creation: create at least one user.
    Make this user administrator (or in other words: give it sudo / root rights).
  19. Calmly review all the settings ;-)
  20. Start the Installation by clicking on Begin Installation
    On my system the installation took around 3 minutes.
  21. Reboot the system by clicking on Reboot system
  22. Keep the system running.

Register RHEL

1. Register your No-Cost Red Hat Developer Subscription

sudo subscription-manager register --username [username Red Hat account] --password [password Red Hat account]

2. Set the role of the system to Red Hat Enterprise Linux Server

sudo subscription-manager role --set="Red Hat Enterprise Linux Server"

3. Set the service level the the system to Self-Support

sudo subscription-manager service-level --set="Self-Support"

4. Set the usage of the system to Development/Test

sudo subscription-manager usage --set="Development/Test"

5. Attach the virtual machine to your No-Cost Red Hat Developer Subscription

sudo subscription-manager attach

Update RHEL

sudo dnf upgrade

Enable auto update

1. Install the package dnf-automatic

sudo dnf install dnf-automatic

2. Install the command line text editor vim

sudo dnf install vim

3. Open the file /etc/dnf/automatic.conf

sudo vim /etc/dnf/automatic.conf

4. Set apply_updates to yes, and save the file.

5. Enable and start the service.

sudo systemctl enable --now dnf-automatic.timer

Enable autostart on reboot

  1. Log in Cockpit
  2. Go to the tabVirtual Machines
  3. Click on the just created virtual machine.
  4. Autostart: check Run when the host boots

Configure Apache & SSL

Configure DNS

To be able to reach the server with a domain name, you have to add a domain name to a DNS server on the internet. If you have a registered domain you can add a subdomain and point it to the public IP address of your router.

Install Apache in the VM

1. Install the Apache web server.

sudo dnf install httpd

2. Enable the Apache web server in systemd

sudo systemctl enable httpd

3. Start the Apache web server.

sudo systemctl start httpd

4. Open port 80 and 443 of the firewall.

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

5. Enable HTTP connections in SELinux

sudo setsebool -P httpd_can_network_connect on

Configure the reverse proxy

1. Log in on the host

ssh [username]@[IP address]

2. Go the directory /etc/httpd/conf.d

cd /etc/httpd/conf.d

3. Open the file virtualhosts.conf

sudo vim virtualhosts.conf

4. Add two new virtual hosts

<VirtualHost *:80 >
    ServerName [your.domain.com]
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =[your.domain.com]
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

<VirtualHost *:443 >
    ServerName [your.domain.com]
    ProxyPreserveHost On
    ProxyPass / http://[IP address virtual machine]/
    ProxyPassReverse / http://[IP address virtual machine]/
    SSLEngine on
</VirtualHost>

5. Check the configuration file for syntax errors.

sudo apachectl configtest

Get a SSL certificate

1. Run certbot

sudo certbot --apache

2. Select the domain name for which you want to request the SSL certificate.

3. Wait until the certificate is deployed successfully.

4. Restart Apache

sudo systemctl restart httpd

You should now be able to reach the new virtual machine with HTTPS.

Install Laravel

Install PHP

1. Install the EPEL repository

sudo dnf install https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm

2. Install the REMI repository

sudo dnf install https://rpms.remirepo.net/enterprise/remi-release-8.rpm

3. Install and enable the PHP REMI 7.4 stream

sudo dnf module install php:remi-7.4

4. Install PHP and some extra modules.

sudo dnf install php php-bcmath php-pdo

Install MariaDB

1. Install the MariaDB database client and server.

sudo dnf install mariadb mariadb-server

2. Enable the MariaDB database server in systemd

sudo systemctl enable mariadb

3. Start the MariaDB database server.

sudo systemctl start mariadb

4. Secure the MariaDB installation.

sudo mysql_secure_installation

Create database and user

1. Log in to MariaDB

mysql -u root -p

2. Create a new database.

create database [database];

3. Create a new database user.

CREATE USER '[username]'@'localhost' IDENTIFIED BY '[password]';

4. Give the user the right to access the laravel database.

GRANT ALL PRIVILEGES on [database].* to '[username]'@'localhost';

5. Reload the MariaDB grant tables that are responsible for the user privileges.

flush privileges;

6. Log out of MariaDB.

exit;

Install Git

sudo dnf install git

Install Composer

sudo dnf install composer

Install Laravel

1. Become root.

sudo su

2. Go to the DocumentRoot directory of Apache.

cd /var/www/html

3. Clone the Laravel repository.

git clone https://github.com/laravel/laravel.git .

4. Install all dependencies

composer install

5. Set Apache as the owner of all the files in the DocumentRoot 

chown -R apache:apache .

6. Set the correct file permissions for the directories.

find . -type d -exec chmod 750 '{}' \;

7.  Set the correct file permissions for the files.

find . -type f -exec chmod 640 '{}' \;

8. Enable SELinux write access to the directory storage.

chcon -R -t httpd_sys_rw_content_t storage

9. Copy and rename the file with all the PHP environment variables.

cp .env.example .env

10. Set the application encryption key.

php artisan key:generate

11. Add a new virtual host file.

a. Go to the directory /etc/httpd/conf.d

cd /etc/httpd/conf.d

b. Create a new virtual host file.

vim development.conf 

c. Add the following code, and save the file.

ServerName localhost

<VirtualHost *:80>
       ServerName [your.domain.com]
       DocumentRoot /var/www/html/public
</VirtualHost>

12. Restart Apache.

sudo systemctl restart httpd


If you now go to your domain name, you should see the default project page of Laravel (see screenshot below)!

Enable port forwarding

Enable port forwarding on the router of port 3000 and make it point to the IP address of the Intel NUC.

Host configuration

Open port 3000

1. Add a new firewall rule.

sudo firewall-cmd --permanent --zone=public --add-port=3000/tcp

2. Reload the firewall configuration.

sudo firewall-cmd --reload

Make Apache listen

1. Open the main configuration file of Apache.

sudo vim /etc/httpd/conf/httpd.conf

2. Add the directive Listen 3000

Listen 80
Listen 3000

3. Restart Apache.

sudo systemctl restart httpd

Configure SELinux

sudo semanage port -a -t http_port_t -p tcp 3000

Add a new virtual host

1. Open the virtual host file.

sudo vim /etc/httpd/conf.d/virtualhosts.conf

2. Add the code below.

<VirtualHost *:3000 >
    ServerName [your.domain.com]
    
    RewriteEngine On
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC] 
    RewriteRule /(.*) ws://[IP address virtual machine]:3000/$1 [P,L]
    
    ProxyPreserveHost On
    ProxyPass / http://[IP address virtual machine]:3000/
    ProxyPassReverse / http://[IP address virtual machine]:3000/
    
    SSLCertificateFile /etc/letsencrypt/live/[your.domain.com]/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/[your.domain.com]/privkey.pem
    Include /etc/letsencrypt/options-ssl-apache.conf
    SSLEngine on
</VirtualHost>

2.  Restart Apache.

sudo systemctl restart httpd

VM configuration

Open port 3000

1. Add a new firewall rule.

sudo firewall-cmd --permanent --zone=public --add-port=3000/tcp

2. Reload the firewall configuration.

sudo firewall-cmd --reload

Configure SELinux

sudo semanage port -a -t http_port_t -p tcp 3000

Install OpenVSCode

Install Podman

Install the module container-tools.

sudo dnf module install container-tools

Configure SELinux

1. Install the package policycoreutils-python-utils

sudo dnf install policycoreutils-python-utils

3. Give OpenVSCode read and write access to the directory /var/www/html

sudo semanage fcontext -a -t httpd_sys_rw_content_t '/var/www/html(/.*)?'

3. Enable the above security setting.

sudo restorecon -R '/var/www/html/'

Run OpenVSCode

1. Download OpenVSCode.

sudo podman pull gitpod/openvscode-server

2. Generate a security token.

You can generate a security token with the website passwordsgenerator.net.

3. Run OpenVSCode with the security token as the last argument.

sudo podman run --rm --detach --name openvscode --init -p 3000:3000 -v "$(pwd):/var/www/html:cached" gitpod/openvscode-server --connection-token [security token]
--rm        Remove the container when it exits.
--detach    Run the container in the background.
--name      Assign a name to the container.
--init      Run an init inside the container that forwards signals.
-p          Map the host port with the container port.
-v          Mount a volume to the container.

5. Open openVSCode.

Go to the following address: https://[your.domain.com]:3000/?tkn=[security token]

Start on boot

1. Check if the container is running.

sudo podman ps

2. Become root.

sudo su

3. Go to the directory /etc/systemd/system

cd /etc/systemd/system

4. Generate a systemd unit file

podman generate systemd --new --files --name openvscode

5. Check if systemd is aware of the new unit file.

systemctl list-unit-files | grep openvscode

6. Enable the new service.

systemctl enable container-openvscode.service

7. Start the new service

systemctl start container-openvscode.service

8. Check if the service is running.

systemctl status container-openvscode.service

OpenVSCode will now start when the server is rebooted!