How to set up a retro in 2022 (IIS) (Nitro HTML5) - (Part 3)

Object

?
Nov 10, 2017
332
218
This is part 3, which is the last part of the: How to set up a retro (IIS) series:

What will we cover in part 3:
In part 3 which is the last and final part of the series, we will be setting up:
Java
Arcturus Morningstar emulator (3.5.1)
Nitro v2 (Latest as of August 2022)

Arcturus Morningstar Emulator set up:
Before we can enter our hotel, we'll need to set up our emulator and to do that, the first thing we need to do is to install Java.

To install Java all you have to do is to download it -

Once Java has been downloaded, go through the setup process, by leaving everything to their default preset (Simply click "Install" and let Java install itself).

Java has been installed:
When Java has been installed, it should look like the image below:
You must be registered for see images attach

Set up the Arcturus MS Emulator:
Before we download the Arcturus MS Emulator, we will need to install 7-ZIP, as the emulator will come pre-packed as a .zip file.

To install 7-ZIP all you have to do is - .

Once 7-ZIP has been installed & set up, you can go ahead and download the Arcturus Morningstar emulator - .

When you're at the download page for the emulator, find the part where it says " " now click on " " (or you can click directly on it from this thread).

The emulator will then download, once it has been downloaded, open up the .zip file and extract the "release" to the desktop of your server.

Once the "release" folder has been placed on your desktop, open it up and open the "config.ini" file in your preferred editor.

You will then have to edit the database credentials so that they match the ones you made when setting up MariaDB - If you don't remember your credentials, simply open the .env file located in the root folder for Atom CMS and take them from there. Once you have filled in the correct credentials, we want to put a few parameters, to allow for eg. UTF-8 characters .- Find
Code:
db.params=
and replace it with
Code:
db.params=?characterEncoding=utf8&useTimezone=true&serverTimezone=UTC&useSSL=false
you can now safely save and close the config.ini file again.

Next open the "start.bat" file in your preferred editor and replace everything inside of it with the code below:
Code:
java -Dfile.encoding=UTF8 -jar Habbo-3.5.1-jar-with-dependencies.jar
pause

There you go! Your emulator should now run smoothly. The next step will be to compile & set up the nitro client - Exciting right? We're almost ready to launch your new hotel 🥳

How to set up Nitro v2:
Finally! We're at the part where we will not only compile the Nitro v2 client but also set it all up so that we can actually have fun and play on your newly set up hotel🙈 Exciting right? Let's get going!

Step one:
The first step on our journey of setting up Nitro v2 is to clone it and its default assets, that don't come with the pack we converted earlier.

Clone the missing default assets:
We'll need to clone the missing default assets for nitro, in order to make nitro function properly, and to do that, open your Command Prompt and enter the following:
Code:
cd C:\inetpub\wwwroot\atomcms\public\client\nitro && git clone https://github.com/ObjectRetros/default-assets.git

The default assets will then be cloned into the
Code:
C:\inetpub\wwwroot\atomcms\public\client\nitro\default-assets
folder - which is almost correct. To maintain a clean folder structure, move all the files from the
"C:\inetpub\wwwroot\atomcms\public\client\nitro\default-assets" into "C:\inetpub\wwwroot\atomcms\public\client\nitro" folder - If you're unsure of what to do, please watch the GIF of the entire process show in this gif:

Step 2 - Setup Nitro v2:
In step 2, we will focus on cloning, compiling, and setting up the nitro client.

Clone Nitro v2:
To clone the nitro client, all you have to do is open your Command Prompt and write the following:
Code:
cd C:\inetpub\wwwroot\atomcms\public\client\nitro && git clone https://github.com/billsonnn/nitro-react.git

If you're unsure on how to clone the Nitro v2 repository, here's how to do it:

Now inside of the "C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react" folder, navigate into the "public" folder and rename the "renderer-config.json.example" and "ui-config.json.example" to:
"renderer-config.json" & "ui-config.json"

Here's a GIF of that process:

Once the two config files have been renamed, open the "renderer-config.json" and the "ui-config.json" in your preferred editor and link everything correctly - Don't worry if you have been following the series from step one, you can simply replace your entire both your "renderer-config.json" and "ui-config.json" with the ones below:

If you have been following this series 1:1, you can simply head over to and click on the green button saying "code" and then click "Download ZIP".

Once you have downloaded the ZIP file containing the two fixed nitro configuration files, simply copy both the "ui-config.json" and the "renderer-config.json" file into your "C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react\public" folder.

Once copied and moved into your "C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react\public" folder, open the "ui-config.json" and the "renderer-config.json" files and replace "YOUR-DOMAIN" with your domain name and save both files.

Compile the nitro client:
It's time for us to compile Nitro v2, so we soon will be able to play your new hotel! Start by opening your Command Prompt and navigate yourself into the nitro-react folder by entering:
Code:
cd C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react
Once you're inside the "nitro-react" folder enter the following command
Code:
volta pin [email protected]
By pinning node with the command above, we tell that we want to use node v18.12.1 within the nitro-react project

Once you've entered the 2 commands above, it's time to install the dependencies that Nitro v2 relies on, and to do just that enter:
Code:
yarn install
Nitro v2 will then start to fetch and install all its necessary dependencies.

Here's a GIF of the process:

Once nitro is finishhed installing its dependencies, your terminal should look something like the below image.
You must be registered for see images attach

Perfect! We've come very far already, and it's now time to build Nitro v2 into compiled assets - This is a very easy step and doesn't require us to do much, so let's get to it!

In your command prompt make sure you're still within the "C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react" folder, and if you aren't then simply use the command below:
Code:
cd C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react
Once you've verified you're within the nitro-react folder simply use the following command to compile Nitro v2
Code:
yarn build:prod
Compiling the assets might take a while, so please be patient⏰

Here's a GIF showing some of the compilation process:

Once Nitro v2 is finished compiling, your terminal should look something like the image below.
Once the nitro client has been compiled, it should look something like the image below:
You must be registered for see images attach

Add the Nitro WebSocket plugin:
In order for the emulator to accept incoming WebSocket requests, that nitro will make use of, we'll need to add a plugin specifically made for Arcturus Morningstar.

Arcturus Morningstar requires a plugin for us to be able to use Nitro - The plugin is named "NitroWebsockets-3.1" and this part will explain how to add it and set it up.

First off we need to download the plugin, which you can do by .

Once the plugin has been downloaded, we must add it to our Emulator, luckily for us, this is a simple process.
Start by closing your emulator, if it's running.

Next, all you have to do is to open your emulator folder on your desktop, head to the "plugins" folder within it, and place the "NitroWebsockets-3.1.0.jar".

Now boot up your emulator, so that it will insert the necessary data into your database. It should look like the image below:
You must be registered for see images attach

Once the emulator has booted fully up, close it by writing "stop" and then press enter inside of the emulator.

Here's a GIF of the entire process: (The process has slightly changed, as you no longer have to click download yourself, you simply have to download the plugin from and then follow the rest of the gif that shows how to add the plugin to the emulator).

We will now have to edit a few things within our database so that the emulator will handle our requests properly when connecting to the Nitro v2 client.

So open up DBeaver, find the "emulator_settings" table, and find the "websockets.whitelist" entry. Once you've found the "websockets.whitelist" entry change its value from "localhost" to "*.YOUR-DOMAIN-WITHOUT-HTTPS://".

We'll also have to change one more thing, which is the "ws.nitro.ip.header". Once you've found it, change its value to "CF-Connecting-IP".

You can now click on "save" and the data will then be loaded upon your next emulator start.

If done correctly, it should look like the image below:
You must be registered for see images attach

Setup the Cloudflare DNS & Page rules
In order for nitro to accept our connections through the WebSockets, we'll need to do 2 things within our Cloudflare dashboard.
The first thing will be to add a DNS record and the second is to make a page rule, disabling SSL for our nitro WebSocket.

Add the DNS rule:
To add the necessary DNS rule, navigate yourself to the and click on the domain, that you are using for your hotel. Once you have clicked on your domain navigate to the DNS page by clicking "DNS" in the sidebar on Cloudflare.

Next up click on the blue button saying "Add record" - A new row should be added just below and inside the "Name" field write "nitro" for the "IPv4" field, write your server IP and click "Save".

If done correctly it should look like the image below:
You must be registered for see images attach

Create a Cloudflare page rule:
We're soon at the end of our journey, before we will be able to connect to our newly setup hotel, will be to create a page rule, disabling SSL for our nitro subdomain, and luckily for us, Cloudflare makes this extremely easy. All we have to do is find "Rules" in the side navigation of our and click on it. Once you have clicked on the "Rules" navigation link, you should see a page, with a blue button saying "Create Page Rule". Click on the "Create Page Rule", which will then take you to the following page (see the image below):
You must be registered for see images attach

If that is the case, simply fill out the fields, so that they look like the image below:
You must be registered for see images attach

Once you have filled out the fields, like the image above, click on "Save and Deploy"

You must be registered for see images attach

We're almost done - Allow port 2096:
Our second last step of this amazing journey is to enable port 2096 to accept TCP connections.

To enable port 2096, simply search for "Windows Defender Firewall with Advanced Security" in your windows search menu and click on it, once you have opened the "Windows Defender Firewall with Advanced Security" application, click on "Inbound Rules" on the left and then "New Rule..." on the right, a new popup should now appear.

Once you see the popup, select "Port" and click "Next" on the next page, leave everything as it is and type "2096" in the text field next to "Specific local port" and click "Next" until you you're able to give the rule a name and enter any name of your choice - Mine will be "nitro" and then click on "Finish".

Here's a GIF of how to create the firewall rule:

Link Atom CMS to your nitro client (The last step):
We're almost done! the last step of our journey is to link Atom CMS to the nitro client.
All we have to do, to achieve this is to navigate into "C:\inetpub\wwwroot\atomcms" and open the ".env" file in your preferred editor, scroll to the bottom until you find "NITRO_CLIENT_PATH" and replace it with:
Code:
NITRO_CLIENT_PATH=/client/nitro/nitro-react/build

Once the nitro client path has been set, head into the following folder:
Code:
C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/build

Once your inside the "C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/build" folder open the "index.html" in your preferred editor and find:
Code:
"config.urls": ["renderer-config.json", "ui-config.json"],

and replace the line with the following code:

Code:
"config.urls": ["./renderer-config.json", "./ui-config.json"],

You have finally made it:
If you have been following along and done everything correctly, you should now be able to get on the client, and have tons of fun! 🥳

You must be registered for see images attach

Did I miss anything?
Please let me know if I missed anything, as the guide contains a lot of information.

Recommended threads:
How to setup Atom Housekeeping (A standalone housekeeping, working with Atom CMS out of the box) - Link soon to come

Bonus threads:
How to setup the nitro avatar imager for Atom CMS:
How to protect your hotel against minor attacks:

 

Attachments

  • 1639013967074.png
    1639013967074.png
    61 KB · Views: 627
  • 1639013980463.png
    1639013980463.png
    61 KB · Views: 338
  • 1639017587634.png
    1639017587634.png
    90.8 KB · Views: 334
  • 1639323949899.png
    1639323949899.png
    2.6 KB · Views: 1,093
  • Screenshot_20211218-221712_Discord.jpg
    Screenshot_20211218-221712_Discord.jpg
    136.4 KB · Views: 277
  • Screenshot_20211218-221712_Discord.jpg
    Screenshot_20211218-221712_Discord.jpg
    136.4 KB · Views: 379
  • Screenshot_20211226-110043_Discord.jpg
    Screenshot_20211226-110043_Discord.jpg
    733.2 KB · Views: 376
  • 1641134782693.png
    1641134782693.png
    101.6 KB · Views: 818
  • 1641134996874.png
    1641134996874.png
    209.8 KB · Views: 867
Last edited:

boz

don daddy
Mar 23, 2021
152
66
Nice tut denni⚡! Correct me if I’m wrong but you’ve forgot the adding .nitro to the MIME types?
 

Object

?
Nov 10, 2017
332
218
Nice tut denni⚡! Correct me if I’m wrong but you’ve forgot the adding .nitro to the MIME types?
you are right, gr8 catch & thanks for noticing me.

ill make sure to update the thread when im on my pc 😅
Post automatically merged:

Thread updated, with the explanation of adding the .nitro mime type
 
Last edited:

DeMaZe

New Member
Oct 24, 2018
6
1
I'm having a problem with my client being black screen and have a hard time troubleshooting the exact problem.. Do you know which solutions could solve this problem? Followed your guide step by step and thank you for your work!
 

Object

?
Nov 10, 2017
332
218
I'm having a problem with my client being black screen and have a hard time troubleshooting the exact problem.. Do you know which solutions could solve this problem? Followed your guide step by step and thank you for your work!
Try to open your developer tools by clicking "f12" when you're trying to load the client. Click "Console" and see if it shows any errors when you're reloading, if not try and go to the "Network" tab in your dev tool as well and see if anything sticks out there.

Also are you entering domain-name/hotel=beta or domain-name/hotel ?

It's important that you're trying to enter domain-name/hotel=beta as this will be the url that cosmic will be using for nitro :)
 

DeMaZe

New Member
Oct 24, 2018
6
1
On domain-name/hotel the screen is just stuck at being black and on domain-name/hotel=beta it shows a nitro "getting ready" loading screen and never loads. I have screenshots of both with f12 developers tools on this link:
 

Object

?
Nov 10, 2017
332
218
On domain-name/hotel the screen is just stuck at being black and on domain-name/hotel=beta it shows a nitro "getting ready" loading screen and never loads. I have screenshots of both with f12 developers tools on this link:
That all sounds correct the /hotel won't work unless you set up flash and will be using a browser supporting such (my series, doesn't cover this as flash is no longer supported by the majority of browsers). you'll always have to use the /hotel=beta URL

For your nitro to connect, did you finish the entire tutorial, like setting up Cloudflare rules, starting your emulator, adding the nitro WebSocket plugin, etc? :)


*edit
Looking at your screenshot, the reason it won't load is due to it not being able to find the external flash texts json file.

Have you converted your assets yet? and also have you edited your renderer-config properly?
 
Last edited:

DeMaZe

New Member
Oct 24, 2018
6
1
I'm still working on it, once again thank you for your time and help. Just one more question: What do you do with the default assets you download in part 2? Do you just place them on the desktop or do you have to do something special there?
 

Object

?
Nov 10, 2017
332
218
I'm still working on it, once again thank you for your time and help. Just one more question: What do you do with the default assets you download in part 2? Do you just place them on the desktop or do you have to do something special there?

No worries, however, there's actually an error in part 2, which I have just corrected.

The nitro imager config I provided said:
"output.folder": "C:/inetpub/wwwroot/Cosmic/public/client/html5/",

But it should actually be:
"output.folder": "C:/inetpub/wwwroot/Cosmic/public/client/html5/nitro-assets/",

This means your assets didn't get converted into the correct folder structure - hence u had issues before most likely.

I'd recommend for you to change your output folder in your configuration.json inside of your converter, delete the previously converted assets, and re-convert.


For your question about the assets. If you're using the git clone command that I have stated, it should automatically place the assets into /client/flash inside of the public folder
 

DeMaZe

New Member
Oct 24, 2018
6
1
Thank you! I made the client work on the VPS, but I can't connect to the client from public (my own pc), i get a black screen with this error: :/
 

Object

?
Nov 10, 2017
332
218
Thank you! I made the client work on the VPS, but I can't connect to the client from public (my own pc), i get a black screen with this error: :/
Are you visitting the correct url /hotel=beta ? :)

To always enter the correct url, just click on the "to hotelname beta" button instead of the "enter hotelname"
 

DeMaZe

New Member
Oct 24, 2018
6
1
Yes I made sure that I entered the correct URL don't worry :p But still getting the black screen unfortunately. I thought it maybe had something to do with not open ports, but i double checked and it was not the case, so now im kinda lost again :/
Post automatically merged:

It also says "waiting on 21253.live.streamtheworld.com" in the bottom left corner when it's loading if that additional information is something useful
 
Last edited:

Object

?
Nov 10, 2017
332
218
Yes I made sure that I entered the correct URL don't worry :p But still getting the black screen unfortunately. I thought it maybe had something to do with not open ports, but i double checked and it was not the case, so now im kinda lost again :/
Post automatically merged:

It also says "waiting on 21253.live.streamtheworld.com" in the bottom left corner when it's loading if that additional information is something useful
Sent u a DM
 

Object

?
Nov 10, 2017
332
218
Everything is correct and its still not work.
Can you please post a screenshot of the entire client including your URL bar.

Also please open your devtools by pressing f12 and head to "console" and show me a screenshot of this aswell - Thank you
 

Users who are viewing this thread

Top