Confusion on how to execute javascript server-side vs client-side

Question

I'm unsure if I'm asking the right question here. I apologize in advance for my ignorance, I'm only a year into teaching myself full stack JS and web app architecture and I'm trying to understand this on a granular level. Previous attempts to ask this question seem to offend some devs, so maybe it's a dumb question.

I'm trying to understand how to, or if its possible to, explicitly designate or assign a specific file or block of javascript to process/run/execute on a server vs on the client/browser.

Writing some javascript in a an app.js file and running node app.js seems to still expose that script to the browser, viewable in the Sources tab in Dev Tools.

PHP is interpreted by a server and then sends static HTML to the client. Is this "pre-processing", the equivalent of Server Side Rendering with Javascript App frameworks? Or Is writing a.php file inline with HTML server-side (like you'd see in Wordpress) more equivalent to inline javascript client side? And there is a different method to have JS interpreted server-side?

I've been reading about GENERATE_SOURCEMAP, but that seems more like it's used to hide client-side JS modules.

Other possible wordings of this question

• How to not expose server side Javascript to the client?
• How to run/execute Javascript on a server vs in browser?

I am NOT ASKING for the definition of server-side vs client-side JS, or for suggestions of server side application frameworks.

Again, I think i've confused myself or missing something very basic. Maybe the only answer is to segment your private web application from your client application and access via API. Thank you for any help.

Answer 1

Summary: Your JavaScript executed by the node daemon on the server side is not visible on the client side, the only thing visible is the output of your JS.

When you create a file with the .php extension you need an executable that executes this file, to return the result to the client to render it.

For example:

• create a php file index.php with the following syntax:

<?php
    echo '<script>console.log("HelloWorled")</script>'
?>

to run this file, you need the PHP daemon (the php interpreter) to run the file to get this output <script>console.log("HelloWorled")</script> next; the output will be returned to the client to be execute on client browser;

In the case of PHP this operation is managed directly by the http server such as nginx via this configuration:

server{
   location ~ \.php$ {
     include snippets/fastcgi-php.conf;
     fastcgi_pass unix:/run/php/php<version>-fpm.sock;
   }
}

which you will find inside the /etc/nginx/sites-available/default file

This rule simply tells nginx to make all files with the .php extension go through the php proxy to be executed and then return only the result of the execution to the client.

You have to imagine the exact same thing with nodejs.

I created an index.js file with the following syntax:

....
process.write( '<script>console.log("HelloWorled")</script>');
....

running the file with node index.js you will just get the output <script>console.log("HelloWorled")</script> which your server (eg expressJS) will send back to the client to run it client side to get los same result of the php code.

NOTES:

• YOU DON'T NEED TO EXPOSE YOUR JS CODE, YOU NEED ONLY A PROXY TO SERVER IT Like PHP WITH NGINX (read more about expressJS and the other nodejs servers frameworks).
• IF you need to expose a client side scripts,images,styles, you need to specify it in your proxy configuration