Integrating CLOG into an existing project that also uses CLACK. #310

K1D77A · 2023-09-18T14:33:53Z

K1D77A
Sep 18, 2023

Hi all,
I just wanted to share how I managed to integrate CLOG into an already existing website that used Ningle + CLACK.
But this would work for any HTTP server.
For context all of my webpages are generated using Spinneret (HTML5) + LASS (CSS).

To integrate into CLOG I had to do the following:

Start CLACK (for my original website) on port N1
Start CLOG on port N2

With Ningle create 2 routes one that returns a custom version of boot.js @ /js/boot.js
and the other returns jquery.min.js @ /js/jquery.min.js

I modified line 93 of boot.js to be

    if (location.port != '') { adr = adr + ':' + N1; }

Finally I add my #'clog:initialize
And add the scripts to the pages I want to integrate into CLOG.

  (spinneret:with-html
    (:script :src "/js/jquery.min.js" :type "text/javascript")
    (:script :src "/js/boot.js" :type "text/javascript")))

I am pointing this out because the tutorial that exists as an example of integrating into an existing project is ridiculous and using static .html files.

It would be nice if the /js/boot.js was written using Parenscript.

If I come up with a better solution I'll share it.

aykaramba · 2025-12-23T20:08:39Z

aykaramba
Dec 23, 2025

Doubling back on this, I don't get how this integrates with a locally run CLOG instance. Details:

This makes the boot.js aware of its local special port started on another (non CLOG) server:

 if (location.port != '') { adr = adr + ':' + N1; }

In my case it is php -S localhost:9000:

if (location.port != '') { adr = adr + ':' + 9000; }
adr = adr + '/clog';

This tells Spinneret to server out the local boot js:

  (spinneret:with-html
    (:script :src "/js/jquery.min.js" :type "text/javascript")
    (:script :src "/js/boot.js" :type "text/javascript")))

In my case we just put the basic boilerplate in the local index.html file seved with the php web server:

<!doctype HTML>
<HTML>
   <HEAD>
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="/js/jquery.min.js" type="text/javascript"></script>
      <script src="/js/boot.js" type="text/javascript"></script>
      <noscript><%= (@ meta) %></noscript>
   </HEAD>
<BODY>
  <noscript><%= (@ body) %></noscript>

this is php.html

</BODY>
<noscript>Your browser must support JavaScript and be HTML 5 compilant to see this site.</noscript>
</HTML>

Question for you for Spinneret with the hope I can get this working on the php webserver for testing: The above samples configure boot.js so it is aware of it's new location under a new server. HOW does anything on the new server interact with the CLOG instance sitting on port N2?

I presume we would be calling /this or /that route, but how is that executed on the N2 CLOG port and then updates the dom on the Spinneret/php webserver pages sitting on the N1 port?

What am I not understanding here?

0 replies

K1D77A · 2025-12-23T20:23:30Z

K1D77A
Dec 23, 2025
Author

Clog isn't going to work if you aren't using a common lisp server. Spinneret is a library for generating HTML from Lisp.

3 replies

aykaramba Dec 23, 2025

Oh, hey thanks for a quick response!

Question, what does this mean: "But this would work for any HTTP server."

You have two webservers running: One running Spinneret and the other running CLOG.

I have two servers running: One Php web server and the other running CLOG.

How are your two independent webservers interacting with each other (in the case of the example above, the one instance running on port N1 and the other instance running CLOG on port N2 (assuming localhost))?

K1D77A Dec 23, 2025
Author

Theres a youtube video somewhere on how to do this https://www.youtube.com/watch?v=I6cl0_6m6sM But its a purely Common Lisp exercise.

aykaramba Dec 23, 2025

Oh, I see. That is really interesting.

I was under the impression that the boot.js file can "just" connect from any web server to a CLOG instance (with maybe window.onload call or something like that) and let CLOG serve out data to the browser using that connection.

Okay, this opens up a whole new set of questions. Thanks for providing that video, that very much explained what you meant by integration. Great!

aykaramba · 2025-12-24T04:24:56Z

aykaramba
Dec 24, 2025

Heads up, this also works with Apache / php webserver, etc. A quick demo:

CLOG - Create a simple CLOG project, start it up on port 8000. Open your browser to 127.0.0.1: 8000 to view content. This will appear on the php server we will setup next.
PHP - Create a folder with files like this:

php-test-folder
   ├── index.html
   └── js       
      ├── boot.js
      └── jquery.min.js

PHP - In the index.html file put the following boilerplate:

<!doctype HTML>
<HTML>
   <HEAD>
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="/js/jquery.min.js" type="text/javascript"></script>
      <script src="/js/boot.js" type="text/javascript"></script>
      <noscript><%= (@ meta) %></noscript>
   </HEAD>
<BODY>
  <noscript><%= (@ body) %></noscript>
</BODY>
<noscript>Your browser must support JavaScript and be HTML 5 compilant to see this site.</noscript>
</HTML>

PHP - Modify the boot.js file around line 91 from this:

    if (location.port != '') { adr = adr + ':' + location.port; }
    adr = adr + '/clog';

to this:

    if (location.port != '') { adr = adr + ':' + 8000; }
    adr = adr + '/clog';

This tells the boot.js code to connect to port 8000 on the 127.0.0.1 via web sockets, which is were we conveniently have CLOG already listening.

HINT!!! You must not change this, it is important as CLOG loads up data from your local clog directory: adr = adr + '/clog';

PHP - CD into the dir with the index.html file and start the php server on port 9000 with:

php -S 127.0.0.1:9000

BROWSER - Open up your php website in your browser @ 127.0.0.1:9000 and the content from your CLOG website will render.
GENERAL NOTES - You can play with routes on your CLOG and php apps to get CLOG to deliver content in unique ways. I haven't done a lot of testing, I just wanted to see if I can get a locally hosted plain html served page to connect to a locally hosted CLOG app to confirm my suspicion that boot.js allows us a whole new set of magic we may have never considered before. Some of this magic might include integrating boot.js into a WordPress install and having it pull dynamic data from a CLOG app over web sockets instead of a REST API. The other key area to start thinking about is session handling and security as well.

More hacking to do ... if anyone has any cool ideas or tests, post them here, I would love to see them.

1 reply

K1D77A Dec 24, 2025
Author

So in this case you have integrated a common lisp powered clog site into a PHP site? If so, thats cool. I thought you were trying to use CLOG with PHP.

aykaramba · 2025-12-24T08:38:02Z

aykaramba
Dec 24, 2025

And, here is how you get another web server to render CLOG content running somewhere else on the network using web sockets:

CLOG - Create a simple CLOG project, start it up on port 8000 on a computer on your lan.
EDIT HOSTS FILE ON YOUR PHP COMPUTER- For the purposes of this example, create an entry for the CLOG server in your /etc/hosts file and give it a domain name. The javascript below will use the domain "http://clog" to map on to a machine on the lan sitting at ip: 10.20.100.10.

From your work computer, open up your browser to http://clog to see the content that the php server will render below.

PHP - On your php host on your lan, create a folder with files like this:

php-test-folder
   ├── index.html
   └── js       
      ├── boot.js
      └── jquery.min.js

PHP - In the index.html file put the following boilerplate:

<!doctype HTML>
<HTML>
   <HEAD>
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="/js/jquery.min.js" type="text/javascript"></script>
      <script src="/js/boot.js" type="text/javascript"></script>
      <noscript><%= (@ meta) %></noscript>
   </HEAD>
<BODY>
  <noscript><%= (@ body) %></noscript>
</BODY>
<noscript>Your browser must support JavaScript and be HTML 5 compilant to see this site.</noscript>
</HTML>

PHP - Modify the boot.js file around line 84 from this:

function Open_ws() {
    if (location.protocol == 'https:') {
	adr = 'wss://' + location.hostname;
    } else {
	adr = 'ws://' + location.hostname;
    }

    if (location.port != '') { adr = adr + ':' + location.port; }
    adr = adr + '/clog';

to this:

function Open_ws() {
    if (location.protocol == 'https:') {
	adr = 'wss://' + 'clog';
    } else {
	adr = 'ws://' + 'clog';
    }

    // if (location.port != '') { adr = adr + ':' + location.port; }
    if (location.port != '') { adr = adr + ':' + 8000; }
    adr = adr + '/clog';

This tells the boot.js code to connect to port 8000 on the http://clog server via web sockets, which is were we conveniently have CLOG already listening.

HINT!!! You must not change this, it is important as CLOG loads up data from the clog directory: adr = adr + '/clog';

PHP - CD into the dir with the index.html file and start the php server on port 9000 with:

php -S 127.0.0.1:9000

BROWSER - Open up your php website in your browser @ 127.0.0.1:9000 and the content from your CLOG website will render.

Well, that was fun.

0 replies

Uh oh!

Integrating CLOG into an existing project that also uses CLACK. #310

Uh oh!

K1D77A Sep 18, 2023

Replies: 4 comments · 4 replies

Uh oh!

Uh oh!

aykaramba Dec 23, 2025

Uh oh!

K1D77A Dec 23, 2025 Author

Uh oh!

Uh oh!

aykaramba Dec 23, 2025

Uh oh!

K1D77A Dec 23, 2025 Author

Uh oh!

Uh oh!

aykaramba Dec 23, 2025

Uh oh!

Uh oh!

aykaramba Dec 24, 2025

Uh oh!

K1D77A Dec 24, 2025 Author

Uh oh!

Uh oh!

aykaramba Dec 24, 2025

K1D77A
Sep 18, 2023

Replies: 4 comments 4 replies

aykaramba
Dec 23, 2025

K1D77A
Dec 23, 2025
Author

K1D77A Dec 23, 2025
Author

aykaramba
Dec 24, 2025

K1D77A Dec 24, 2025
Author

aykaramba
Dec 24, 2025