Build your own online IDE - Jeroen Verhoeckx

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

Log into Cockpit
Go to tab Virtual Machines
Click on Storage pools
Click on the storage pool you created earlier
Click on tab Storage volumes
Click on Create volume

Settings
Name: Give the volume a distinctive name.
Size: Set the size of the virtual volume (e.g. 30 GB).
Format: keep qcow2
Click on Create

Create a new virtual machine

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

Install RHEL in the VM

Install RHEL

Go to tab Virtual Machines
Click on the just created virtual machine.
Click on Install
Click in the VNC console
Select Test this media & install Red Hat Enterprise Linux 8.4
Select the language you want to use during the installation.
Keyboard: change if necessary.
Language Support: change if necessary.
Time & Date: select a city to set the time and the date.
Connect to Red Hat: keep it on Not Registered
Installation Source: keep it on Local media
Software Selection: select the base environment Minimal Install
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
KDUMP: keep it on enabled.
Network & Host name: enable the Ethernet connection.
Here you can also change the host name of the virtual machine.
Security Policy: set the switch Apply security policy on OFF
Root Password: set a root password.
User Creation: create at least one user.
Make this user administrator (or in other words: give it sudo / root rights).
Calmly review all the settings ;-)
Start the Installation by clicking on Begin InstallationOn my system the installation took around 3 minutes.
Reboot the system by clicking on Reboot system
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

Log in Cockpit
Go to the tabVirtual Machines
Click on the just created virtual machine.
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!

On this page

Goal

Software setup

VM Installation

Create a new volume

Create a new virtual machine

Install RHEL in the VM

Install RHEL

Register RHEL

Update RHEL

Enable auto update

Enable autostart on reboot

Configure Apache & SSL

Configure DNS

Install Apache in the VM

Configure the reverse proxy

Get a SSL certificate

Install Laravel

Install PHP

Install MariaDB

Create database and user

Install Git

Install Composer

Install Laravel

Enable port forwarding

Host configuration

Open port 3000

Make Apache listen

Configure SELinux

Add a new virtual host

VM configuration

Open port 3000

Configure SELinux

Install OpenVSCode

Install Podman

Configure SELinux

Run OpenVSCode

Start on boot