How can I make a visual UI in the browser for a Node application?

How can I link index.html to index.js in my Node app?
I wanna make an app using node, but don't know how to link them.

Comments

[Michael Currin]

Here is another example without React

github.com/MichaelCurrin/single-pa...

That is for the single page application model. Same for React.

Once you get a basic app working, consider other ways to build apps with Node. You could use Electron to make an app that runs on your desktop, like VSCode and WhatsApp are built in Electron.

Or you have multiple HTML pages. And you have JS on the pages to fetch and insert data around say user activity and photos. Using a REST API built in Express JS or Python. With a database behind it. That is how a site like Instagram essentially works.
So then your HTML pages are static and give you the UI. and your Node app is the server side REST app that sends and returns data as JSON. And works without a frontend.
e.g. GET localhost/api/photos/123
POST localhost/api/photos/

Yet another architecture is having your Node app generate HTML pages dynamically.

Sorry for all the info. Hope it makes sense and my first comment with a snippet solves your need. Share your repo on GitHub if you have one. You can even host a Node app for free on GitHub Pages using just an index.html page and index.js. No running of Node needed. Might put all your dependencies for jquery etc. in your head tag of your HTML.

[Calin Baenen]

But I don't understand. How will this allow Node to work? Do I need to use live-server or something? It just imports the index.js.

[Michael Currin]

Node is something that executes JS files on your machine. Not the browser.

One use of Node is to run your script

node index.js

Which may not be that useful if it needs a frontend.

Another use of Node is to run libraries you download for example live-server

Install

npm install -g live-server

Then run from anywhere. In this case you want to run in the directory where index.html is

live-server 
# serving on localhost:3000... etc 

Neither Node nor live-server runs your index.js file.
Your browser will use index.html and see it point to index.js and execute that code on the browser only.

The advantage of live-server is your page will refresh if edit index.js or index.html

Consider using Live Server extension in VS Code where you click a button to stop and start you server so you don't need the command line

[Michael Currin]

You don't even need Node installed. your browser can load and run the JS file itself.

Using live-server of course needs Node installed but using VS Code extension does not need Node.

In fact if you have Python installed you could start a server, without live reloading though.

python3 -m http.server

[Calin Baenen]

It can't run without Node, as I'm using Node modules (DiscordJS).

[Michael Currin]

I see. It would have been useful to see your use case in your original question since this topic of JS is broad.

According to Discord JS docs, you should have a solid grasp of JS before handling this more advanced library

discordjs.guide/

Anyway.

Okay so your Discord bot or whatever you use to interact with Discord API is going to run as a Node script on your machine. No browser needed.

Your script will get messages or channel info from the Discord API and it will send a message on an event (in response to user) or when you run the script.

There is no obvious frontend that makes sense for this application. No HTML page needed. No live-server needed.

You'll start you application as

node myBot.js

# or, if configured
npm start

To see what your application is doing you would look at Discord website itself.

Or you the terminal log where you server is running. ie whenever you app does something it can log. e.g.

12:00 Starting bot
12:02 Recieved message from @ABC
12:03 Sent message to @ABC

Perhaps there is a more visual way of seeing what your bot is doing and if you come across anything in the docs then follow that.

Follow a tutorial in the docs that will get your bot started and it should explain what you need to do. But again unless the docs cover an HTML frontend you should not try to add that for Discord bot.

[Michael Currin]

I would recommend an intro video on YouTube about Node or Discord JS so you can watch someone setup and run an application.

[Calin Baenen]

But the bot is meant to serve as an application. So for my case, it is.
It's a weird use-case.

[Michael Currin]

In a Node app that is accessible in the browser, typically you have index.html which has:

<head>
  <script src="main.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

And you would use Node to install and bundle dependencies and convert TypeScript etc. to plain JS and output as a single main.js or index.js file.

For a simple project, the main JS file could be the file as you wrote it, without transformation

[Michael Currin]

See for example the React tutorial for adding React to an HTML page.

reactjs.org/docs/add-react-to-a-we...

You don't even need any JS files if start really simple but it will be easier to manage as multiple files.

[Calin Baenen]

I still don't understand. If I run live-server, will that allow Node to run in index.html?

[Ivan Jeremic]

I recommend first learning node

[Michael Currin]

See comment

[Christian Kozalla]

Node is a Javascript runtime, that allows you to use JS as a server-side language. So with Node you will be able to set up a web server that serves static HTML files under different routes.

You can also use that node server to set up an API for querying a database or process data dynamically on the server side before sending the HTTP response to the Frontend. Express.js is often used to set up an API on a node server. You can create a CRUD API (create, read, update, delete) for example.

It would be very helpful, if you shared some of your code and / or explain more about what you want to achieve. 👍

[Calin Baenen]

All I want to do is link Node (as a backend) to a frontend (any GUI toolkit).

I'm making a Discord bot to be used as a an application (separate from Discord, but serving a similar purpose to).

[Christian Kozalla]

let's say you use a React frontend with your Node backend. Then your backend might have a route /messages on which you can perform a GET request from your frontend, e.g.

fetch('https://yournodebackend.com/messages)
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse)) // or do whatever you like

If your node backend supports more routes and request types like POST, PUT, DELETE, you can query them from your frontend similarly.

Hope, this could go in the right direction for your purpose..! Happy hacking 😄

[Michael Currin]

If you want to build something more complex, see the React quickstart app.

react-quickstart

• public/index.html
• src/index.jsx
• src/App.jsx

As per notes in the HTML file, the build step will inject the JS into the body tag for you.