0

here's my situation. I just started learning about node.js server with express and I find it to be an amazing technology, based on JavaScript that I am already a bit familiar with.

Now, so far, whenever I want to change something on the page, I have to do it with JS on the server-side with node.js, and thus, I have to refresh the page with new information. But in several cases this seems to be not the best way to handle things, like changing simple text contents or click events. I would like to use browser-side JS for that reason, but I have not found out a way to do that yet.

I tried to call js-files and import them, but I couldn't make it work.

<script src="../../public/js/index.js"></script>

I also put the index.js and functional.js in the public folder, which I have made available to node.js at all times, but the imported JS still cannot be found when the project is run on the server.

app.use(express.static('public'));
app.use(express.static(path.join(__dirname, '/public')));

The strange thing is, I have been looking all over the internet on trying to find an explanation to it for several days already, but I couldn't find anything that made it clear to me on how to use browser-JS with a node.js server.

My folder structure is this:

My node.js project folder structure

functional.js

exports.functional = () => {
    alert("Do something...");
}

index.js

const { functional } = require('./functional');

document.addEventListener('DOMContentLoaded', () => {

    const init = (() => {
        functional();
    })();
});

So now I have the following questions:

  • Can browser-side JS even be used with a node.js server?
  • If it can be used, how do I implement those js-files, so they actually work?

Every help is greatly appreciated! Thanks :)

Improve this question
1
  • 1
    So, the answer is no, you can't use "document" on the server-side as it is API provided by the browser. But if you don't want to refresh the whole page just to display the latest data, that can be done. how? Client-side rendering. you can read about RESTAPIs and client-side rendering. If your use case requires a lot of client-side rendering you can consider a framework like ReactJS or VueJS. Commented Mar 28, 2021 at 21:32

2 Answers 2

Reset to default
2

Static Folder

You're defining a static folder in Express, here.

app.use(express.static('public'));

This tells Express that every static file (css, js, images, .etc) are found in the folder public. Now Express handles this smart and now knows that when you're looking for a static file, it is in that folder you've specified.

<script src="js/index.js"></script>

This will look into the folder public for the folder js and the file index.js. public/js/index.js.

Modules

The script itself needs some modification. Node.js uses a module system called CommonJS. And the syntax works works like in your file exports.functional, require('./functional'). But that is a technology that only works on the Node.js environment. Not in the browser.

JavaScript does also have a native module system, which is also available in Node.js, which works with the import and export keywords.

export const functional = () => {
  alert("Do something...");
};

import { functional } from './functional' ;

document.addEventListener('DOMContentLoaded', () => {
  functional();
});

But wait

By using the native module system on the client side, you'll need to load all the scripts that have exported and imported values in them, otherwise you'd be missing pieces.

<script type="module" src="js/functional.js"></script>
<script type="module" src="js/index.js"></script>

Bundler

The mainstream use of import and export modules is in combination with a module bundler like Webpack, which combines all the modules into a single file, which you can serve to the browser. This is very useful for development to keep the files you work in small.

It can transform the following files from this:

public
-- dist <-- bundled files ready for distribution
-- src <-- raw source files to work with
---- js
------ index.js
------ functional.js

to this:

public
-- dist <-- bundled files ready for distribution
---- js
------ bundle.js <-- Single file ready for the browser
-- src <-- raw source files to work with
---- js
------ index.js
------ functional.js

The bundler program also works on the Node.js environment, just like Express.js, so you can include it in your project.

Alternative

If the bundlers seem like a huge hassle, then you could always choose to classically use a single file to serve your JavaScript in.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great answer!! That was exactly what I was looking for. Also the additional info on bundler software is very helpful, too. Thank you very much! :)
1

on what you did: 
<script src="../../public/js/index.js"></script

you are trying to call index.js relative to your node file (correct me if i'm wrong) its a mistake because this is what express.static does

just try:

<script src="js/index.js"></script>

beacuse you already told node to take all files from that location

so instead calling files relative to your node file you need to call it from public folder

hope i helped you

Improve this answer

1 Comment

Argh, such a simple thing. With knowledge things are so simple after all... Thank you for your helpful answer! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.