DEV Community

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

View post

Replies for: Here is another example without React github.com/MichaelCurrin/single-pa... That is for the single page application model. Same for React. Once ...

Collapse
 
baenencalin profile image
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.

Collapse
 
michaelcurrin profile image
Michael Currin • • Edited

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
 
michaelcurrin profile image
Michael Currin • • Edited

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
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
baenencalin profile image
Calin Baenen •

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

Thread Thread
 
michaelcurrin profile image
Michael Currin • • Edited

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Thread Thread
 
michaelcurrin profile image
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.

Thread Thread
 
baenencalin profile image
Calin Baenen •

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