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

Object

?
Nov 10, 2017
417
330
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:
Nitro v2 (Latest as of July 2023)

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-

Here we'll 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 && cd nitro-react

If you're unsure on how to clone the Nitro v2 repository, here's how to do it: - Don't mind that the folder structure differs a little from yours, this gif was taken a while back.

Now inside of the "C:/inetpub\wwwroot/atomcms/public/client/nitro" folder, copy the "renderer-config.json" & the "ui-config.json" files and paste them into "C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/public" folder.

Once the two config files have been copied, 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-DOMAIN" entries with your own domain and then save both files.

Compile the nitro client:
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, 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 install && 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

Now we must correct the path to our nitro assets and to do that simply open the index.html within the nitro-react/dist folder in your prefered editor. Once opened you must add a dot "." in front of all the assets - Please refer the screenshow below, in-case of uncertainty.

You must be registered for see images attach

Configure the WebSocket plugin:
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:
Code:
*.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:
Code:
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 back into your database and open the "website_settings" table, scroll down till you find the "nitro_path" entry. Once found verify that it's set to match your folder structure - If you followed the structure provided within those guides, it'll work out of the box, no further changes is required.

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

Once your inside the "C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/dist" 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"],

If your font looks odd in-game copy the src folder inside "C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/dist" and paste it into the "C:/inetpub/wwroot/atomcms/public" folder.

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! 🥳

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

  • 1639006586025.png
    1639006586025.png
    19.8 KB · Views: 2,750
  • 1639013335688.png
    1639013335688.png
    273.5 KB · Views: 2,079
  • 1639013967074.png
    1639013967074.png
    61 KB · Views: 924
  • 1639013980463.png
    1639013980463.png
    61 KB · Views: 553
  • 1639017587634.png
    1639017587634.png
    90.8 KB · Views: 538
  • 1639323949899.png
    1639323949899.png
    2.6 KB · Views: 1,310
  • Screenshot_20211218-221712_Discord.jpg
    Screenshot_20211218-221712_Discord.jpg
    136.4 KB · Views: 493
  • Screenshot_20211218-221712_Discord.jpg
    Screenshot_20211218-221712_Discord.jpg
    136.4 KB · Views: 630
  • Screenshot_20211226-110043_Discord.jpg
    Screenshot_20211226-110043_Discord.jpg
    733.2 KB · Views: 635
  • 1641134782693.png
    1641134782693.png
    101.6 KB · Views: 1,079
  • 1641134996874.png
    1641134996874.png
    209.8 KB · Views: 1,122
  • 1661082770407.png
    1661082770407.png
    123.7 KB · Views: 1,502
  • 1661089451625.png
    1661089451625.png
    226.2 KB · Views: 1,955
Last edited:

Object

?
Nov 10, 2017
417
330
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
3
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
417
330
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
3
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
417
330
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
3
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
417
330
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
3
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
417
330
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
3
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
417
330
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
417
330
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