Adding a login-message to your always free Oracle Cloud APEX instance

I used Dimitri’s great blog on how to get started on the Oracle Always Free cloud and APEX. Great work Dimitri.. Thanks for this.

We’re used to add a login-message to our instances, so we can easily see on what instance we’re logging in. Alas.. The Oracle Always Free instances don’t offer that opportunity. That got me thinking.. How can I differentiate between my two instances.

The solution is to make NGINX  insert a small javascript, that checks to see if we’re on the login-page of the apex-builder, and if so, execute a line of jQuery.

Setup of NGINX:
add a line to the “/ords/” section of your /etc/nginx/conf.d/mydomain.com.conf file

  location /ords/ {
    proxy_pass https://mycloudurl.oraclecloudapps.com/ords/;
    proxy_set_header Origin "" ;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_connect_timeout       600;
    proxy_send_timeout          600;
    proxy_read_timeout          600;
    send_timeout                600;
    sub_filter '</body>' '<script src="/insert-logo.js"></script></body>';
  }

The extra line (see sub_filter) looks for the “</body>” tag in the returned HTML and replaces that with the script-tag followed by the original closing tag.

Now we must also create a javascript file in the source-folder of the website:

nano /usr/share/nginx/html/mydomain.com/insert-logo.js

The file should read (and please make your obvious adjustments)

if ((window.location.pathname + window.location.search).startsWith('/ords/f?p=4550:1')) {
  var logoImg  = '/smart4solutions_logo.png';
  var titleStr1 = 'SMART4Solutions B.V.';
  var titleStr2 = 'Cloud Development';
  $('div.a-Login-header').html('<span style="display: block; margin-top: 16px; text-align: center;"><img src="'+logoImg+'"></span><h1 class="a-Login-title">'+titleStr1+'<br/>'+titleStr2+'</h1>');
}

Make sure you set the file to be readable by everyone:

chmod +r /usr/share/nginx/html/mydomain.com/insert-logo.js

Also don’t forget to scp your logo to the linux instance,

scp -i ssh_key smart4solutions_logo.png opc@<my_oracle_ip>:~
mv /home/ocp/smart4solutions_logo.png /usr/share/nginx/html/mydomain.com/
chmod +r /usr/share/nginx/html/mydomain.com/smart4solutions_logo.png

This uploads my image into the home-folder of the ocp user, after which I can MoVe it into the correct folder (the one mentioned in your /etc/nginx/conf.d/mydomain.com.conf file)

or adjust the location of the image to have it fetched from another location.

Last step is to check and reload nginx

nginx -t

nginx -s reload

And refresh your login page in your browser.

The result is overwhelming 🙂

That should be it.

Be Aware:

The solution inserts the script in all pages within your /ORDS/, also the ones that you build yourself. It only executes the javascript on the instance login-page. I’m still looking for a more precise way of instructing NGINX to insert only for a specific page, so other pages are not bothered with the extra code.