Object
?
- Nov 10, 2017
- 429
- 350
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:
How to set up Nitro v2:
Configure the WebSocket plugin:
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.
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.
You have finally made it:
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:
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)
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-
Compile the nitro client:
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:
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" 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.
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-reactIf you're unsure on how to clone the Nitro v2 repository, here's how to do it:
You must be registered for see links
- 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:
Once you've verified you're within the nitro-react folder simply use the following command to compile Nitro v2
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.
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.
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
Code:
yarn install && yarn build:prodHere's a GIF showing some of the compilation process:
You must be registered for see links
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:
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:
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:
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-IPYou 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
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:
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
If that is the case, simply fill out the fields, so that they look like the image below:
Once you have filled out the fields, like the image above, click on "Save and Deploy"
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:
Add the DNS rule:
To add the necessary DNS rule, navigate yourself to the
You must be registered for see links
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
You must be registered for see links
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:
You must be registered for see links
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:
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:
and replace the line with the following code:
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.
Once the nitro client path has been set, head into the following folder:
Code:
C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/distOnce 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:
You must be registered for see links
How to protect your hotel against minor attacks:
You must be registered for see links
You must be registered for see links
Attachments
Last edited:
! Correct me if I’m wrong but you’ve forgot the adding .nitro to the MIME types?
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 :/
