NobloxJS, Express & NodeJS Basics
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.
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.
Now if you’d like, you can open that package.json file and see everything you’ve configured.
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.
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.
Now we have all our packages installed, we can head to our package.json file and see if our packages are there.
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
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.
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:
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:
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.')
Now we can run npm run dev which will use our script we made before using nodemon.
After you see this, you can visit localhost:3000 (or whatever port you used) in the browser and you should see this:
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.
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:
-
'/'- https://localhost:3000 -
'/login'- https://localhost:3000/login -
'/dashboard'- https://localhost:3000/dashboard
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.
Refresh your tab and you should see this:
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)
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.
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.
Now that it’s a string, we can now send it.
Save and visit your browser again and you should see the UserID of the person you used.
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.
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.
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.
Now when we visit the page it should say something.
Nice! Now let’s try adding a username.
Yay! It works.
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!
