Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Server Development
Habbo Retros
Habbo Tutorials
How to set up a retro in 2023 (IIS) (Nitro HTML5) - (Part 3)
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Object" data-source="post: 471887" data-attributes="member: 78351"><p>This is part 3, which is the last part of the: How to set up a retro (IIS) series:</p><p></p><p><strong>What will we cover in part 3:</strong></p><p>[SPOILER="We will set up"]</p><p>In part 3 which is the last and final part of the series, we will be setting up:</p><p>Nitro v2 (Latest as of July 2023)</p><p>[/SPOILER]</p><p></p><p><strong>How to set up Nitro v2:</strong></p><p>[SPOILER="Set up the Nitro v2"]</p><p>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<img class="smilie smilie--emoji" loading="lazy" alt="🙈" title="See-no-evil monkey :see_no_evil:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/1f648.png" data-shortname=":see_no_evil:" /> Exciting right? Let's get going!</p><p></p><p><strong>Step one:</strong></p><p>[SPOILER="Clone Nitro v2"][/SPOILER]</p><p>The first step on our journey of setting up Nitro v2 is to clone it-</p><p></p><p>[SPOILER="Set up the nitro client"]</p><p>Here we'll focus on cloning, compiling, and setting up the nitro client.</p><p></p><p><strong>Clone Nitro v2:</strong></p><p>To clone the nitro client, all you have to do is open your Command Prompt and write the following:</p><p>[CODE]</p><p>cd C:\inetpub\wwwroot\atomcms\public\client\nitro && git clone https://github.com/billsonnn/nitro-react.git && cd nitro-react</p><p>[/CODE]</p><p></p><p>If you're unsure on how to clone the Nitro v2 repository, here's how to do it: <a href="https://gyazo.com/b1c422336451ed22e2054e654ba4384d" target="_blank">https://gyazo.com/b1c422336451ed22e2054e654ba4384d</a> - Don't mind that the folder structure differs a little from yours, this gif was taken a while back.</p><p></p><p>Now inside of the "<strong>C:/inetpub\wwwroot/atomcms/public/client/nitro</strong>" folder, copy the "<strong>renderer-config.json</strong>" & the "<strong>ui-config.json</strong>" files and paste them into "<strong>C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/public</strong>" folder.</p><p></p><p>Once the two config files have been copied, open the "<strong>renderer-config.json</strong>" and the "<strong>ui-config.json</strong>" 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.</p><p>[/SPOILER]</p><p></p><p><strong>Compile the nitro client:</strong></p><p>[SPOILER="Compile Nitro v2"]</p><p>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!</p><p></p><p>In your command prompt make sure you're still within the "<strong>C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react</strong>" folder, if you aren't then simply use the command below:</p><p>[CODE]</p><p>cd C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react</p><p>[/CODE]</p><p>Once you've verified you're within the nitro-react folder simply use the following command to compile Nitro v2</p><p>[CODE]</p><p>yarn install && yarn build:prod</p><p>[/CODE]</p><p>Compiling the assets might take a while, so please be patient<img class="smilie smilie--emoji" loading="lazy" alt="⏰" title="Alarm clock :alarm_clock:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/23f0.png" data-shortname=":alarm_clock:" /></p><p></p><p>Here's a GIF showing some of the compilation process: <a href="https://gyazo.com/d4406535d1bf6aa6bbe168b8db88efde" target="_blank">https://gyazo.com/d4406535d1bf6aa6bbe168b8db88efde</a></p><p></p><p>Once Nitro v2 is finished compiling, your terminal should look something like the image below.</p><p>[SPOILER="Successfully compiled"]</p><p>Once the nitro client has been compiled, it should look something like the image below:</p><p>[ATTACH=full]13621[/ATTACH]</p><p>[/SPOILER]</p><p></p><p>Now we must correct the path to our nitro assets and to do that simply open the <strong>index.html</strong> within the <strong>nitro-react/dist</strong> 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.</p><p></p><p>[ATTACH=full]14700[/ATTACH]</p><p></p><p>[/SPOILER]</p><p>[/SPOILER]</p><p></p><p><strong>Configure the WebSocket plugin:</strong></p><p>[SPOILER="Configure the Nitro WebSocket plugin"]</p><p>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.</p><p></p><p>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:</p><p>[CODE]*.YOUR-DOMAIN-WITHOUT-HTTPS://[/CODE]</p><p></p><p>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:</p><p>[CODE]CF-Connecting-IP[/CODE]</p><p></p><p>You can now click on "save" and the data will then be loaded upon your next emulator start.</p><p></p><p>If done correctly, it should look like the image below:</p><p>[SPOILER="How it should look"]</p><p>[ATTACH=full]14036[/ATTACH]</p><p>[/SPOILER]</p><p>[/SPOILER]</p><p></p><p><strong>Setup the Cloudflare DNS & Page rules</strong></p><p>In order for nitro to accept our connections through the WebSockets, we'll need to do 2 things within our Cloudflare dashboard.</p><p>[SPOILER="Setup the Cloudflare DNS & Page rules"]</p><p>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.</p><p></p><p><strong>Add the DNS rule:</strong></p><p>To add the necessary DNS rule, navigate yourself to the <a href="https://dash.cloudflare.com/" target="_blank">Cloudflare dashboard</a> 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.</p><p></p><p>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".</p><p></p><p>If done correctly it should look like the image below:</p><p>[SPOILER="Cloudflare DNS"]</p><p>[ATTACH=full]12949[/ATTACH]</p><p>[/SPOILER]</p><p></p><p><strong>Create a Cloudflare page rule:</strong></p><p>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 <a href="https://dash.cloudflare.com/" target="_blank">Cloudflare dashboard</a> 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):</p><p>[SPOILER="Create page rule"]</p><p>[ATTACH=full]12952[/ATTACH]</p><p>[/SPOILER]</p><p></p><p>If that is the case, simply fill out the fields, so that they look like the image below:</p><p>[SPOILER="How to fill the page rule fields"]</p><p>[ATTACH=full]12953[/ATTACH]</p><p>[/SPOILER]</p><p></p><p>Once you have filled out the fields, like the image above, click on "Save and Deploy"</p><p></p><p>[SPOILER="Cloudflare page rule"]</p><p>[ATTACH=full]12950[/ATTACH]</p><p>[/SPOILER]</p><p></p><p><strong>We're almost done - Allow port 2096:</strong></p><p>Our second last step of this amazing journey is to enable port 2096 to accept TCP connections.</p><p></p><p>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.</p><p></p><p>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".</p><p></p><p>Here's a GIF of how to create the firewall rule: <a href="https://gyazo.com/f3c727037eaa5f9fe5dd85f3cadb57f3" target="_blank">https://gyazo.com/f3c727037eaa5f9fe5dd85f3cadb57f3</a></p><p>[/SPOILER]</p><p></p><p><strong>Link Atom CMS to your nitro client (The last step):</strong></p><p>We're almost done! the last step of our journey is to link Atom CMS to the nitro client.</p><p>[SPOILER="Link the Nitro v2 client"]</p><p>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.</p><p></p><p>Once the nitro client path has been set, head into the following folder:</p><p>[CODE]</p><p>C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/dist</p><p>[/CODE]</p><p></p><p>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:</p><p>[CODE]</p><p>"config.urls": ["renderer-config.json", "ui-config.json"],</p><p>[/CODE]</p><p></p><p>and replace the line with the following code:</p><p></p><p>[CODE]</p><p>"config.urls": ["./renderer-config.json", "./ui-config.json"],</p><p>[/CODE]</p><p></p><p>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.</p><p>[/SPOILER]</p><p></p><p><strong>You have finally made it:</strong></p><p>[SPOILER="You have made it!"]</p><p>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! <img class="smilie smilie--emoji" loading="lazy" alt="🥳" title="Partying face :partying_face:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/1f973.png" data-shortname=":partying_face:" /></p><p>[/SPOILER]</p><p></p><p><strong><span style="font-size: 15px">Did I miss anything?</span></strong></p><p><span style="font-size: 12px">Please let me know if I missed anything, as the guide contains a lot of information.</span></p><p></p><p><span style="font-size: 15px"><strong>Recommended threads:</strong></span></p><p>How to setup Atom Housekeeping (A standalone housekeeping, working with Atom CMS out of the box) - Link soon to come</p><p></p><p><span style="font-size: 15px"><strong>Bonus threads:</strong></span></p><p>How to setup the nitro avatar imager for Atom CMS: <a href="https://devbest.com/threads/how-to-setup-nitro-imager-for-your-cms-iis.92569/" target="_blank">How to setup nitro avatar imager</a></p><p>How to protect your hotel against minor attacks:</p><p><a href="https://devbest.com/threads/l7-ddos-mitigation-megathread.90653/" target="_blank">- https://devbest.com/threads/l7-ddos-mitigation-megathread.90653/</a></p><p><a href="https://devbest.com/threads/tut-prevent-direct-ip-iis-flood-using-cloudflare.90575/" target="_blank">- https://devbest.com/threads/tut-prevent-direct-ip-iis-flood-using-cloudflare.90575/</a></p></blockquote><p></p>
[QUOTE="Object, post: 471887, member: 78351"] This is part 3, which is the last part of the: How to set up a retro (IIS) series: [B]What will we cover in part 3:[/B] [SPOILER="We will set up"] 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) [/SPOILER] [B]How to set up Nitro v2:[/B] [SPOILER="Set up the 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! [B]Step one:[/B] [SPOILER="Clone Nitro v2"][/SPOILER] The first step on our journey of setting up Nitro v2 is to clone it- [SPOILER="Set up the nitro client"] Here we'll focus on cloning, compiling, and setting up the nitro client. [B]Clone Nitro v2:[/B] 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 [/CODE] If you're unsure on how to clone the Nitro v2 repository, here's how to do it: [URL]https://gyazo.com/b1c422336451ed22e2054e654ba4384d[/URL] - Don't mind that the folder structure differs a little from yours, this gif was taken a while back. Now inside of the "[B]C:/inetpub\wwwroot/atomcms/public/client/nitro[/B]" folder, copy the "[B]renderer-config.json[/B]" & the "[B]ui-config.json[/B]" files and paste them into "[B]C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/public[/B]" folder. Once the two config files have been copied, open the "[B]renderer-config.json[/B]" and the "[B]ui-config.json[/B]" 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. [/SPOILER] [B]Compile the nitro client:[/B] [SPOILER="Compile Nitro v2"] 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 "[B]C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react[/B]" folder, if you aren't then simply use the command below: [CODE] cd C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react [/CODE] 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 [/CODE] Compiling the assets might take a while, so please be patient⏰ Here's a GIF showing some of the compilation process: [URL]https://gyazo.com/d4406535d1bf6aa6bbe168b8db88efde[/URL] Once Nitro v2 is finished compiling, your terminal should look something like the image below. [SPOILER="Successfully compiled"] Once the nitro client has been compiled, it should look something like the image below: [ATTACH type="full" width="578px" alt="1661083248475.png"]13621[/ATTACH] [/SPOILER] Now we must correct the path to our nitro assets and to do that simply open the [B]index.html[/B] within the [B]nitro-react/dist[/B] 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. [ATTACH type="full" alt="1690480828324.png"]14700[/ATTACH] [/SPOILER] [/SPOILER] [B]Configure the WebSocket plugin:[/B] [SPOILER="Configure the Nitro 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://[/CODE] 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[/CODE] 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: [SPOILER="How it should look"] [ATTACH type="full" alt="1672359470195.png"]14036[/ATTACH] [/SPOILER] [/SPOILER] [B]Setup the Cloudflare DNS & Page rules[/B] In order for nitro to accept our connections through the WebSockets, we'll need to do 2 things within our Cloudflare dashboard. [SPOILER="Setup the Cloudflare DNS & Page rules"] 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. [B]Add the DNS rule:[/B] To add the necessary DNS rule, navigate yourself to the [URL='https://dash.cloudflare.com/']Cloudflare dashboard[/URL] 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: [SPOILER="Cloudflare DNS"] [ATTACH type="full" alt="1639016601038.png"]12949[/ATTACH] [/SPOILER] [B]Create a Cloudflare page rule:[/B] 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 [URL='https://dash.cloudflare.com/']Cloudflare dashboard[/URL] 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): [SPOILER="Create page rule"] [ATTACH type="full" alt="1639017864694.png"]12952[/ATTACH] [/SPOILER] If that is the case, simply fill out the fields, so that they look like the image below: [SPOILER="How to fill the page rule fields"] [ATTACH type="full" alt="1639017939254.png"]12953[/ATTACH] [/SPOILER] Once you have filled out the fields, like the image above, click on "Save and Deploy" [SPOILER="Cloudflare page rule"] [ATTACH type="full" alt="1639017570968.png"]12950[/ATTACH] [/SPOILER] [B]We're almost done - Allow port 2096:[/B] 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: [URL]https://gyazo.com/f3c727037eaa5f9fe5dd85f3cadb57f3[/URL] [/SPOILER] [B]Link Atom CMS to your nitro client (The last step):[/B] We're almost done! the last step of our journey is to link Atom CMS to the nitro client. [SPOILER="Link the Nitro v2 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 [/CODE] 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"], [/CODE] and replace the line with the following code: [CODE] "config.urls": ["./renderer-config.json", "./ui-config.json"], [/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. [/SPOILER] [B]You have finally made it:[/B] [SPOILER="You have 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! 🥳 [/SPOILER] [B][SIZE=4]Did I miss anything?[/SIZE][/B] [SIZE=3]Please let me know if I missed anything, as the guide contains a lot of information.[/SIZE] [SIZE=4][B]Recommended threads:[/B][/SIZE] How to setup Atom Housekeeping (A standalone housekeeping, working with Atom CMS out of the box) - Link soon to come [SIZE=4][B]Bonus threads:[/B][/SIZE] How to setup the nitro avatar imager for Atom CMS: [URL='https://devbest.com/threads/how-to-setup-nitro-imager-for-your-cms-iis.92569/']How to setup nitro avatar imager[/URL] How to protect your hotel against minor attacks: [URL='https://devbest.com/threads/l7-ddos-mitigation-megathread.90653/']- https://devbest.com/threads/l7-ddos-mitigation-megathread.90653/[/URL] [URL='https://devbest.com/threads/tut-prevent-direct-ip-iis-flood-using-cloudflare.90575/']- https://devbest.com/threads/tut-prevent-direct-ip-iis-flood-using-cloudflare.90575/[/URL] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Server Development
Habbo Retros
Habbo Tutorials
How to set up a retro in 2023 (IIS) (Nitro HTML5) - (Part 3)
Top