NobloxJS, Express & NodeJS Basics

NobloxJS, Express & NodeJS Basics

Noblox.js | Express | NodeJS | Visual Studio Code

Chapter 1

Requirements:

  • NodeJS (Installed)
  • IDE (Integrated Development Environment)

Things to Know:

  • Root Folder - The parent folder of your project.
  • Port - A number used for an application to transfer data through.

Introduction

Hello everyone and welcome to my NobloxJS, Express & NodeJS Basics community tutorial. In this tutorial, I’ll be teaching you the basics of NobloxJS, Express and NodeJS.

Before we start, let me tell you about NobloxJS and NodeJS.

NodeJS is used to create most of the internets most amazing web applications. A couple are;

  • Visual Studio Code
  • Twitch
  • Microsoft Teams

Isn’t that amazing? Not only that but you can also create Discord Bots! If you don’t know yet, NodeJS using Javascript. (Node Javascript and Noblox Javascript)

Not only that, Javascript is quite easy to learn as well! You only need to know some basic things to create great web applications like myCenter or Hyra. (Both Roblox web applications)

We will also be using a package called express which helps run our web application, and listen on a port.

NobloxJS is a package that makes it easier to interact with the RobloxAPI. Such as getting game info etc…


Part 1: Setting Up Our Project

Setting up our application is extremely simple. Now guessing you have your root folder opened, use your terminal or command line to run the command npm init. This will initiate our project and ask us to configure some things. To skip this, run npm init -y instead.

image

As you can see, I kept some things blank and skipped them just by pressing enter.

After this, you should now have a new file called package.json in your root directory.

image

Now if you’d like, you can open that package.json file and see everything you’ve configured.

image

Now, once we start installing packages, all our installed packages will be listed in this package.json file. The package.json file is just like a configuration file which stored some json data. The actual package files will be kept in the node_modules folder in our root directory once we install some packages.


Part 2: Installing Packages

Now that we’ve got our project set up, we can now start installing some packages. To do this, we’ll head pack to the command line. Now we want to install 2 packages and 1 developer package. To do this, we’ll run npm install express noblox.js.

image

Just a notice, it make take a bit to install all packages.

Now that we’ve install express and noblox.js, we can now install nodemon. Nodemon makes it so whenever we make changes to our main Javascript file, it we automatically restart our application.

To install nodemon, we have to install it as a developer dependency. To do this, we’ll run npm install --save-dev nodemon or npm install -D nodemon. -D is just a shorter way of writing --save-dev.

image

Now we have all our packages installed, we can head to our package.json file and see if our packages are there.

image

They are! As you can see, nodemon is listed as a developer dependency. Now one thing before we finish, we have to set up our nodemon command which will make the application auto-restart. To do this, we can go into package.json and add another script called "dev" and set the script as nodemon index.js

image

Make sure to add a comma after the "test" script!


Part 3: Creating Our Index.js File & Setting Up Our Web Server

Now that we’ve done all of the setup, we can now create our index.js file which is our main application file.

To do this, create a file called index.js in the root folder.

image

Now we are going to use variables and make a reference to our packages. If you’ve scripted in Roblox Lua, you’d find it’s quite similar to that.

We have 2 different types of variables:

  • const - A constant variable that gonna be changed by code.
  • let - A variable that can be changed by code.

For our package references, we’ll be using const. To do this, create a variable and use the require() function.

const express = require('express')

Now we’re going to be creating another const variable which will be calling express as a function.

const express = require('express')
const app = express()

Notice I’ve called it app? That’s because it’s what our web application will be mainly using.

We’re also going to refer our noblox.js package above of express.

const noblox = require('noblox.js')
const express = require('express')
const app = express()

Your code should now look like this:

image

Now that we’ve referred our app, express and noblox.js packages, we can now add a listener for our web application to listen on.

Before we do this, we can do functions in 2 ways.

const myFunction = () => {

}

or

function myFunction() {

}

We’ll be using the top method for a listener. We can add a listener by writing:

image

Notice we have a number at the beginning? That’s our port. The second part of this is separated by a comma, which is our function. We want to log something after the web application has started listening on this port. To do this, inside of our function we’ll add console.log('Listening on port 3000.')

image

Now we can run npm run dev which will use our script we made before using nodemon.

image

After you see this, you can visit localhost:3000 (or whatever port you used) in the browser and you should see this:

image

Good job! You’ve now created the beginning of your web app.


Part 4: Setting Up Our First Get Route

Now that we’ve created the beginning of our web application, we can now create a get route which people can visit and can see.

To do this, above our listener, we’ll add our first get route.

image

Notice how it’s similar to our listener function? Instead of the first part being a port, it’s the directory on which users will visit for the data to be displayed. Here’s a useful example:

These are just examples, you can set it as anything you’d like. We also have two new things. req and res. req is the request data from the person visiting your site. res is our result that we can use to send data to the user.

For now, we will send a hello message to our users.

image

Refresh your tab and you should see this:

image

Nice! You just created your first route. Just a notice, there’s also POST routes. We’ll get more in-depth with those in another chapter.


Part 5: Getting A User's ID from Username

We’ll now be using our NobloxJS package to help us get a user’s UserID from their username.

Most functions from packages you’ll need to wait until they send back data before you continue with your other code otherwise you’ll get <Promise> returned. To fix this, we’ll change our get route’s function to async. This is as easy as adding async before our function. (Google for a more accurate description of async)

image

Now that we’ve made our function asynchronous, we can now get a player’s ID from their Username. For now, we’ll manually set the username.

image

You may be wondering why we have await there. This is why we needed to add async. Await will wait for a response before continuing with our code. If you use await outside of an asynchronous function, you’ll get an error.

Now that we’ve done that, it returns a number, not a string. If we try sending just the number it will error as the code will think it’s an error code. To fix this, we’ll create another variable and use it to convert the number into a string.

image

Now that it’s a string, we can now send it.

image

Save and visit your browser again and you should see the UserID of the person you used.

image

Nice!


Part 6: Queries

Now that we covered that, we can now add a query to make it so anyone can change the username without having to change the code. To do this, we’ll add a new variable.

image

The new variable get’s the query from the request called username. If you’re wondering what a query is, this is an example:

https://localhost:3000?username=Cindering

The query is the username and it’s separated by the question mark.

Now, instead of getting the UserID from a username, we can use the query instead.

But now, if we visit the web page without a query we’ll get an error. To fix this, we’ll have to check if the query exists. We can do this by adding a simple if statement.

image

Now if we visit the page without a query, the page will just infinitely load without any errors. What if we wanted to show a message though? To do this, we can add else onto the if statement.

image

Now when we visit the page it should say something.

image

Nice! Now let’s try adding a username.

image

Yay! It works.

image

Nice job!

Notice: The post has been re-done as it was missing quite a lot of things before. Chapter 2 will be coming soon which will show Noblox’s group ranking features.

Please comment under this post if you have any questions or feedback. Thank you!

9 Likes

If you are going to make a tutorial on Noblox, you should probably showcase its group ranking features instead of something that can already be done in studio like fetching UserIds from a username.

However, I do have a few suggestions for this tutorial:

  • Utilize req.query to find the UserId of any username instead of “qvgk”
  • For the sake of simplicity only, you could use app.listen and not even have to deal with http
  • Send a JSON response using res.json
1 Like

I love the feedback!

For this basic tutorial, I decided to just show the most basic ways on how to use NodeJS. For Chapter 2, I will be showing how to use req.query so the username can be changed much more easier instead of having to change the code and save it.

For app.listen, I truly appreciate that. I was personally taught to use http but from now on, I’ll be using app.listen instead.

As for JSON responses, that’ll also be covered in the next chapter.

Adding to all of this, I’ll also be introducing Nodemon so that the application will automatically be restarted once any changes are detected, making development much easier.

Edit: I forgot to mention the group ranking features. I will be showing those at another time, maybe as a separate tutorial.

Once again, thank you for your feedback! It means a lot. :slight_smile:

2 Likes

It seems a very good tutorial for those who are new to Noblox.js, as well as NodeJS!

1 Like

Thank you! I could have probably gone more in-depth but I will in a bit of a hurry :sweat_smile:

Could you show us how to print game statistics in the next tutorial? I struggled for over 8 hours figuring that out and I’ve already forgotten it.

Of course! But may I ask, what exact game statistics are you looking for?

Probably visits, active players, release date, and the last update.

Alright so I was able to find a solution to your problem.

First you’ll need to get the game’s Universe ID. To do so, you can make a request to

https://api.roblox.com/universes/get-universe-containing-place?placeid=[PLACEID]

and replace [PLACEID] with the game’s ID.

Then, using Noblox’s Library you can use the getUniverseInfo function to get the game’s data.

After that you can just use console.log() to log the data you would like.

https://noblox.js.org/global.html#UniverseInformation

Please, reply if you’re having problems! I’m here to help.

2 Likes

Adding onto what @R0bl0x10501050 said you should not just put one port in server.listen as it may be occupied so you should instead use

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => {
    console.log(`Server started on port ${PORT}.`) 
})

So if the server starts and the port is not available it will choose 3000, when testing you then need to install dotenv, add a .env file and create the PORT variable PORT = 3001 and initialize dotenv with require('dotenv').config(); (this must run before the PORT variable declaration). If the server runs on a host container and it assigns you a port you will definitely get an available one and your server will not crash

Great idea but it’s not really needed as this is just a basic tutorial, not an actual production-made resource. Plus, I think it’s better for user’s to be able to change their port instead of it being auto-assigned if the port is already taken.

If the port is taken and there’s not any alternative the server will not start

As I said it’s just a basic tutorial, also again as I said, people can just easily change the port to whatever they would like to instead of it being manually assigned.

So if the port isn’t available they should edit the code and run again? And if the next time it’s occupied again? Do they change the code for the second time?

Changing port to whatever they want is manually assigning, the best option is always to grab a port from environment, and if that’s not there, grab whatever other port you prefer - you say its a simple tutorial, but yet you exclude that most hosting services for example assign you a port in the environment, you can’t just ‘manually pick’. (which means that the reader has to figure it out themself, which makes it more complex, not simpler)

1 Like

I think it’s a good tutorial, but it’s completely lacking the information about why it is beneficiary to use Noblox and NodeJS; include the reasons why we should use it. This should be the first/second paragraph of the tutorial, since uninformed individuals like myself do not understand why I should use Noblox. At least provide some examples of Noblox being used in an experience.

1 Like

The post has been reworked and I should have hopefully gone a bit more in-depth than the old post. I hope you enjoy :smiley:

Notice: Chapter 2 covering group ranking features should be out in a day or two. Sorry!

Is chapter 2 released yet? I still can’t find it. Also, can you show us how we can make a call from a roblox server to the web app? For example, after a player earns a badge in game it will make a call to the web app to auto rank them? Thank you.