Creating your own Web Server for Roblox Integrations [JS]

Many people want to achieve advanced things like the ability to share data between games, or the ability to pull things off Roblox that you may not ordinarily be able to do. That being said, I decided to give a basic tutorial on how you could use NodeJS to setup a basic Web Server and send or request data from it on Roblox. Do note that this tutorial will only work for Windows users. I may work on adding a Mac version of it later. We will be using JavaScript as our Web Server’s programming language.

A couple of things you will be needing:

A host

I prefer to use my own Raspberry Pi, but you can make do with several other hosts like Heroku or Amazon Web Service.

Visual Studio Code

You could probably get away with using your favorite code editor like Atom or anything else. For simplicity sake for those who’ve never done it, Visual Studio Code will work best.

Node.JS/npm

This can be found off of https://nodejs.org.
When you install, be sure to install the npm package manager. This is crucial! I’ve attached a screenshot of where you would install npm.
image

Once you’ve installed and got all three things, you will be able to setup a Web Server.
Step 1
Create a new project folder. I called my folder “A_Roblox_Tutorial”

.image

Step 2
If you’ve installed Visual Studio Code correctly, you should be able to open the file with code. Right click your folder and hit “Open with Code”.

image
Doing so will open Visual Studio code. It should look similar to this. (Obviously I use mine, but yours will be similar)

Step 3
Let’s configure our Web Server. First things first is that we will need a blank file. Go up to the top left of Visual Studio and click “New File”. (This is located right next to the name of the folder you opened)

image

Create a new file and name it “index.js”. The “.js” part is extremely important as it denotes that this file is a JavaScript file. We’re calling it “index” as traditionally that is good practice in making website back-ends, and various other things pertaining to the web.

Step 4
Let’s ignore our index.js file now and initialize this new project. We’ll be using npm for this and a special command. Specifically:

npm init

This is telling npm to initialize a project.
We can do this by opening (if not already) our terminal.

Opening the terminal

You can do this by going to View (on the top bar) and going down to Terminal, or use Ctrl + `.

If you’ve done it correctly, you should now see:

Type in our command. “npm init”. As you see, this gives you a nice prompt.

image

You can move on by hitting the space key. By the time you’re done it will say something like this:

image

image

If this is alright for you, type yes. If not, type no. You are able to easily edit this in the future however, so do not worry too much.

When I type yes, it creates a new file titled package.json. Do not delete this, as it may be important for your Web Server.

image

Within package.json, you can find all the settings you filled out and more.

Step 5
Installing our key Web Server piece will be important here.
Using npm, we will be typing another command into our terminal.

npm install express --save

The “–save” is not needed, but it is a useful habit to get into as you can immediately save any package you choose to install. Once you run this command, you’ll see something like this.

image

If you see something like “killed” or some form of an error, it is possible that npm is unable to write to whatever location you’ve chosen to make your project, or you simply ran out of memory.

You will also notice that there are now more files in our project folder.

image

package-lock.json is also important. Don’t delete it.
node_modules is important if you want to be able to locally run your project on your device. Most hosts will not need it (such as Heroku). If you’re planning to host this in your house though, or what to do some testing, you will need this folder. Inside it, do not be alarmed. There are a lot of files. These are packages needed for Express.js. (You can read all about Express.js https://expressjs.com/

Step 6
Let’s get back to our lonely index.js file.
Let’s initialize our express.js package.

This can be done with

const express = require('express');
const app = express()
// This may vary with your version of JavaScript.

Step 6
Let’s create a basic link for a get request.

The basic ways to handle stuff coming to your Web Server is using GET and POST requests. You can denote when you want your server to handle what by using:

app.get
// OR
app.post

For our purposes we’ll be using a get request. Here’s what it will look like.

app.get('/mytestapp', function(request, response) {
console.log("My get function works");
    response.send('Hello World!');
});

Step 7
We have one final step to do. We need to have our application listen. We can do this by pasting

app.listen(3000,function(){
console.log("App listening on port 3000");
});

Your final product should look something like this:

Step 8
Our next step is to verify that our Web Server will run. Open the terminal, and type

node index.js

You should see something like the screenshot below.
image

You may get an error message if you’ve done something wrong.

If you want to shut the process down, type Ctrl+C.

Step 9
Put the app on your preferred host. If you’re hosting it at your house, be sure to do some port forwarding magic.

I’d put more here, but it depends on your host, and you’ve got a lot of options.

Step 10
The next step is to do Roblox sided stuff. This will (obviously) be using the http service!
https://developer.roblox.com/en-us/api-reference/class/HttpService

If you’ve never used Http requests before, check out that link. You’ll need to learn how to enable http requests for your game. Since we’re using a get request, we’ll be using RequestAsync.

https://developer.roblox.com/en-us/api-reference/function/HttpService/RequestAsync

For this step we’ll setup a simple get request in our game. As a pointer, you should be using a pcall. However to keep our tutorial simple, and maybe you don’t know what a pcall is, we won’t be using it here.

function test()
local url = "your url" -- Set this to whatever url your web host gives you, or your home IP address if you've port forwarded a port. 
local request = httpService:GetAsync(url+"/mytestapp")
print(request)
end

test()

You can put this into a server script and it will run. Assuming you’ve got the correct url and all your code functions, you should see in the output on Roblox “Hello World!”. You can also verify that your Web Server works by checking it’s output. If it says “My get function works”, then it is working.

Notes
In the event at you decide to use this in your works, use pcalls. I say this, as should your Web Server unexpectedly go offline (Do not tell me it won’t. Even google can go down at times), your code on Roblox will error out. A pcall will catch this and prevent everything you’ve worked hard to make from breaking.

Now maybe you’re asking yourself, well what can I do with this? A lot! This skill has allowed me to share data between games and store it on databases, as well as allowed me to make systems to hook up to stuff like Nodeblox.js

Ever wonder how Robloxjs Server was created? (The predecessor to Nodeblox.js). It was made using express! If you want to check that it, it can be found here: Roblox.Js Server

Wonder how products like Clan Labs function in game? Express was probably at the heart of that.

The possibilities are near limitless.

Resources
Hosts

https://heroku.com/
https://aws.amazon.com/

Links for JavaScript Chunk

https://nodejs.org
https://code.visualstudio.com/

Please let me know if this tutorial was easy to follow, as this was my first.

  • Easy to follow
  • Hard to follow

0 voters

26 Likes

This topic was automatically closed after 14 minutes. New replies are no longer allowed.