How to setup nitro imager for your CMS (IIS)

Object

Object

?
Nov 10, 2017
414
328
Hey Devbest 👋

As I promised in part 3 of my how-to setup a retro series, I'll guide you through how to set up the Nitro imager for your CMS, so that you can load custom clothing - Yes no more half-naked avatars🙈

Requirements:
Git -
You must be registered for see links

A working site / CMS (IIS must already have been set up and have a CMS must be up and running)

Create a subdomain:
To create a subdomain, head to the your Cloudflare dashboard and go to the "DNS" tab

You must be registered for see images attach

Once you're within the DNS panel, add a new "A" record with the name "imager" and target should be your VPS Ip-address. Once filled in simply click "Save"

I've attached a screenshow below, in-case you're unsure to what I mean.

You must be registered for see images attach

Our subdomain is now ready to be used🎉

Clone the nitro imager:
The first step on our road, to set up the nitro imager will be to clone the git repository, and to do that simply open your Command Prompt and navigate yourself into the desktop path, which for the most part is something like the code below.
Code: 
cd C:\Users\YOUR-VPS-USERNAME\Desktop

Once you have navigated yourself into the desktop path on your VPS write the following command:
Code: 
git clone https://github.com/billsonnn/nitro-imager.git

When the imager have been cloned, your terminal should look something like the screenshot below:
You must be registered for see images attach

Set up & build the Nitro imager
Once the repository has been cloned and is on your desktop, open the folder as your normally would by double-clicking it, once the nitro-imager folder has been opened, open the "config.json" in your preferred editor.

If you have been following my how-to set up a retro series and your folder structure is the same as from the series, you may just copy and paste the config below - If not, you can still use the config below, you'll just have to adapt the paths to match the paths that you're using.
JSON: 
{
    "api.host": "localhost",
    "api.port": 3030,
    "asset.url": "C:/inetpub/wwwroot/atomcms/public/client/nitro",
    "gamedata.url": "${asset.url}/gamedata",
    "avatar.save.path": "C:/inetpub/wwwroot/atomcms/public/client/saved-figures",
    "avatar.actions.url": "${gamedata.url}/HabboAvatarActions.json",
    "avatar.figuredata.url": "${gamedata.url}/FigureData.json",
    "avatar.figuremap.url": "${gamedata.url}/FigureMap.json",
    "avatar.effectmap.url": "${gamedata.url}/EffectMap.json",
    "avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro",
    "avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro",
    "avatar.mandatory.libraries": [
        "bd:1",
        "li:0"
    ],
    "avatar.mandatory.effect.libraries": [
        "dance.1",
        "dance.2",
        "dance.3",
        "dance.4"
    ],
    "avatar.default.figuredata": {"palettes":[{"id":1,"colors":[{"id":99999,"index":1001,"club":0,"selectable":false,"hexCode":"DDDDDD"},{"id":99998,"index":1001,"club":0,"selectable":false,"hexCode":"FAFAFA"}]},{"id":3,"colors":[{"id":10001,"index":1001,"club":0,"selectable":false,"hexCode":"EEEEEE"},{"id":10002,"index":1002,"club":0,"selectable":false,"hexCode":"FA3831"},{"id":10003,"index":1003,"club":0,"selectable":false,"hexCode":"FD92A0"},{"id":10004,"index":1004,"club":0,"selectable":false,"hexCode":"2AC7D2"},{"id":10005,"index":1005,"club":0,"selectable":false,"hexCode":"35332C"},{"id":10006,"index":1006,"club":0,"selectable":false,"hexCode":"EFFF92"},{"id":10007,"index":1007,"club":0,"selectable":false,"hexCode":"C6FF98"},{"id":10008,"index":1008,"club":0,"selectable":false,"hexCode":"FF925A"},{"id":10009,"index":1009,"club":0,"selectable":false,"hexCode":"9D597E"},{"id":10010,"index":1010,"club":0,"selectable":false,"hexCode":"B6F3FF"},{"id":10011,"index":1011,"club":0,"selectable":false,"hexCode":"6DFF33"},{"id":10012,"index":1012,"club":0,"selectable":false,"hexCode":"3378C9"},{"id":10013,"index":1013,"club":0,"selectable":false,"hexCode":"FFB631"},{"id":10014,"index":1014,"club":0,"selectable":false,"hexCode":"DFA1E9"},{"id":10015,"index":1015,"club":0,"selectable":false,"hexCode":"F9FB32"},{"id":10016,"index":1016,"club":0,"selectable":false,"hexCode":"CAAF8F"},{"id":10017,"index":1017,"club":0,"selectable":false,"hexCode":"C5C6C5"},{"id":10018,"index":1018,"club":0,"selectable":false,"hexCode":"47623D"},{"id":10019,"index":1019,"club":0,"selectable":false,"hexCode":"8A8361"},{"id":10020,"index":1020,"club":0,"selectable":false,"hexCode":"FF8C33"},{"id":10021,"index":1021,"club":0,"selectable":false,"hexCode":"54C627"},{"id":10022,"index":1022,"club":0,"selectable":false,"hexCode":"1E6C99"},{"id":10023,"index":1023,"club":0,"selectable":false,"hexCode":"984F88"},{"id":10024,"index":1024,"club":0,"selectable":false,"hexCode":"77C8FF"},{"id":10025,"index":1025,"club":0,"selectable":false,"hexCode":"FFC08E"},{"id":10026,"index":1026,"club":0,"selectable":false,"hexCode":"3C4B87"},{"id":10027,"index":1027,"club":0,"selectable":false,"hexCode":"7C2C47"},{"id":10028,"index":1028,"club":0,"selectable":false,"hexCode":"D7FFE3"},{"id":10029,"index":1029,"club":0,"selectable":false,"hexCode":"8F3F1C"},{"id":10030,"index":1030,"club":0,"selectable":false,"hexCode":"FF6393"},{"id":10031,"index":1031,"club":0,"selectable":false,"hexCode":"1F9B79"},{"id":10032,"index":1032,"club":0,"selectable":false,"hexCode":"FDFF33"}]}],"setTypes":[{"type":"hd","paletteId":1,"mandatory_f_0":true,"mandatory_f_1":true,"mandatory_m_0":true,"mandatory_m_1":true,"sets":[{"id":99999,"gender":"U","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":1,"type":"bd","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"hd","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"lh","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"rh","colorable":true,"index":0,"colorindex":1}]}]},{"type":"bds","paletteId":1,"mandatory_f_0":false,"mandatory_f_1":false,"mandatory_m_0":false,"mandatory_m_1":false,"sets":[{"id":10001,"gender":"U","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10001,"type":"bds","colorable":true,"index":0,"colorindex":1},{"id":10001,"type":"lhs","colorable":true,"index":0,"colorindex":1},{"id":10001,"type":"rhs","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"bd"},{"partType":"rh"},{"partType":"lh"}]}]},{"type":"ss","paletteId":3,"mandatory_f_0":false,"mandatory_f_1":false,"mandatory_m_0":false,"mandatory_m_1":false,"sets":[{"id":10010,"gender":"F","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10001,"type":"ss","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"ch"},{"partType":"lg"},{"partType":"ca"},{"partType":"wa"},{"partType":"sh"},{"partType":"ls"},{"partType":"rs"},{"partType":"lc"},{"partType":"rc"},{"partType":"cc"},{"partType":"cp"}]},{"id":10011,"gender":"M","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10002,"type":"ss","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"ch"},{"partType":"lg"},{"partType":"ca"},{"partType":"wa"},{"partType":"sh"},{"partType":"ls"},{"partType":"rs"},{"partType":"lc"},{"partType":"rc"},{"partType":"cc"},{"partType":"cp"}]}]}]},
    "avatar.default.actions": {
        "actions": [
            {
                "id": "Default",
                "state": "std",
                "precedence": 1000,
                "main": true,
                "isDefault": true,
                "geometryType": "vertical",
                "activePartSet": "figure",
                "assetPartDefinition": "std"
            }
        ]
    }
}

Now when you have edited your config to match your paths, open your cmd and enter the following command:
Code: 
cd C:\Users\YOUR-VPS-USERNAME\Desktop\nitro-imager

Once you're within the nitro-imager folder, we'll have to pin the correct node version to the imager and to do that simply enter:
Code: 
volta install [email protected]
volta pin [email protected]

Volta not installed?
In-case volta isn't installed on your server, head to the
You must be registered for see links
and click on the
You must be registered for see links
- go through the setup steps and restart your command prompt. Once your command prompt has been restarted, repeat the steps above.

Next up, write the following:
Code: 
npm i
then
Code: 
npm run build
And the very last command to run
Code: 
npm start

Once your imager has been started, it should look something like the image below:
You must be registered for see images attach

Setup the reverse proxy:
It's time to set up the reverse proxy, to allow the imager to be rendered through our domain.

The first thing we will have to do, to achieve this is downloading the "Application Request Routing" extension for IIS -
You must be registered for see links


Once the extension has been downloaded, go through the setup process and re-open your "Internet Information Services" application - you should then be able to see the "Application Request Routing Cache" module if you double click on the "VMIxxxx" - it should look like the image below:
You must be registered for see images attach

Once you're able to see your "Application Request Routing Cache" module, double click it and at the right side, you should see "Server Proxy Settings..." Click on that and then tick the "Enable proxy"

You must be registered for see images attach

Once ticked, click "Apply" on the right side.

Create the imager IIS site
We must add a new site to IIS, that will be hosting our imager, luckily for that it only takes a few simply steps to get going!

First up expand the "sites" folder within your IIS application, right click it and press "Add website..." - A new popup should now appear.

For the site name & host name fill in imager.your-domain

Once filled in, click the 3 dots to select a folder the site will be connected to - Once clicked another popup will appear, browse yourself to your desktop and select the "nitro-imager" folder.

I've added a gif & screenshot below, incase you're unsure if you've done it all correctly
A GIF of me doing it:
You must be registered for see links


You must be registered for see images attach

Create the URL Rewrite rule:
The second last step on our journey is to create the URL Rewrite url, which will create the reverse proxy!

The first thing you have to do is to expand the "sites" folder inside the "Internet Information Services" application, then double click on your the site we just created "imager.your-domain".

Once you've doubled clicked your site, you should be able to see the "URL Rewrite" module - Double click it and then click "Add Rule(s)..." on the right and then select "Blank rule".

Once the "Blank rule" has been selected you'll have to fill out a few fields.

  1. The first field to fill is the "Name:" the name will be totally up to you, but I will be writing "imager" inside of the field
  2. The second field to fill is the "Pattern:" field and inside of that write "(.*)"
  3. The last thing you'll have to do for the reverse proxy to be done is, scroll down until you see the "Rewrite URL:" field, inside of this field write the following: "
    You must be registered for see links
    {R:1}" - Once everything is set click "Apply" in the top right corner

How the reverse proxy rule should look:
Once you have filled all the mentioned fields, your rule should look like the images below.
A GIF of me doing it:
You must be registered for see links


You must be registered for see images attach

Give full permissions to the nitro-imager folder:
For the imager to function properly on our subdomain, we must give full permissions to it.

The first step will be going to the desktop of your VPS, right-click on the "nitro-imager" folder, and select "Properties".

A new popup will now appear, click the "Security" tab then "Edit..." and then "Add..."

We must add 2 new user groups, the first one being "IIS_IUSRS" and the second being "IUSR".

Once the 2 groups have been added click check the "Full control" for both groups and then click "Apply".

Here's a GIF of me doing it:
You must be registered for see links

The last step:
The very last step will be to tell your CMS what URL it should now be using for your avatar images.

If you're using Atom CMS this is very easy, all you have to do is open up your database, find the "website_settings" table, open it and find the "avatar_imager" and change its value to "
You must be registered for see links
"

Here's how mine looks:
You must be registered for see images attach

That's it! your nitro imager should now be set up and running🥳

It's important to leave your imager running always if not your avatars won't render properly if at all.
 

Attachments

  • 1661096511691.png
    1661096511691.png
    9.4 KB · Views: 268
Last edited:
14mokash

14mokash

New Member
Jan 4, 2023
3
0
heyy best tutorial ever!!! I really like how you've done it step by step and very clean easy to understand. Noobie in this kinda of stuff. Im stuck on the nitro converter part. I was able to get thru npm i yarn -g and yarn install && yarn build. But when I write yarn start in CMD i get this message listed below. Also when i git cloned nitro-converter the example file would not change into .json until i manually converted it thru a website.

Error: ENOENT: no such file or directory, open 'C:\Users\Administrator\OneDrive\Desktop\nitro-converter\configuration.json'] {
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: etc...

Can you please help? if this helps i have this in my configuration.json

{
"flash.client.url": "
You must be registered for see links
",
"gamedata.url": "${flash.client.url}/gamedata",
"furnidata.load.url": "${gamedata.url}/furnidata.xml",
"productdata.load.url": "${gamedata.url}/productdata.txt",
"figuredata.load.url": "${gamedata.url}/figuredata.xml",
"figuremap.load.url": "${gamedata.url}/figuremap.xml",
"effectmap.load.url": "${gamedata.url}/effectmap.xml",
"dynamic.download.pet.url": "${flash.client.url}/gordon/PRODUCTION/%className%.swf",
"dynamic.download.figure.url": "${flash.client.url}/gordon/PRODUCTION/%className%.swf",
"dynamic.download.effect.url": "${flash.client.url}/gordon/PRODUCTION/%className%.swf",
"flash.dynamic.download.url": "${flash.client.url}/dcr/hof_furni",
"dynamic.download.furniture.url": "${flash.dynamic.download.url}/%className%.swf",
"external.variables.url": "${gamedata.url}/external_variables.txt",
"external.texts.url": "${gamedata.url}/external_flash_texts.txt",
"convert.figure": "1",
"convert.effect": "1",
"convert.furniture": "1",
"convert.furniture.floor.only": "0",
"convert.furniture.wall.only": "0",
"convert.pet": "1"
}
 
mark472

mark472

New Member
Jun 15, 2014
11
0
Getting the following error trying to fix the images ( running npm start) @Object


You must be registered for see images attach

Post automatically merged:

mark472 said:
Getting the following error trying to fix the images ( running npm start) @Object


You must be registered for see images attach
Click to expand...

Still stuck on this part, help would be appreciated <3
 
Last edited:
DRTomaa

DRTomaa

New Member
Oct 20, 2020
4
2
mark472 said:
Getting the following error trying to fix the images ( running npm start) @Object


You must be registered for see images attach

Post automatically merged:



Still stuck on this part, help would be appreciated <3
Click to expand...

Hey,

Don't follow the "Nitro Imager Config" part of the tutorial, instead do this:

Go into nitro-imager folder with CMD like this:
Code: 
cd  C:\Users\YOUR-VPS-USERNAME\Desktop\nitro-imager

Then type:
Code: 
copy .env.new .env && del .env.new

Open .env inside nitro-imager's folder and edit the links like this (should be the same if you have followed the same tutorials from Object):
Code: 
API_HOST=localhost
API_PORT=3030
AVATAR_SAVE_PATH=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/saved-figures
AVATAR_ACTIONS_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/HabboAvatarActions.json
AVATAR_FIGUREDATA_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/FigureData.json
AVATAR_FIGUREMAP_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/FigureMap.json
AVATAR_EFFECTMAP_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/EffectMap.json
AVATAR_ASSET_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/bundled/figure/%libname%.nitro
AVATAR_ASSET_EFFECT_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/bundled/effect/%libname%.nitro

Now you can go back to the original tutorial after the "Nitro Imager Config" part (with Volta installation and so on)

Hope it helps !!
 
K

korosensei

New Member
Apr 2, 2015
4
1
DRTomaa said:
Hey,

Don't follow the "Nitro Imager Config" part of the tutorial, instead do this:

Go into nitro-imager folder with CMD like this:
Code: 
cd  C:\Users\YOUR-VPS-USERNAME\Desktop\nitro-imager

Then type:
Code: 
copy .env.new .env && del .env.new

Open .env inside nitro-imager's folder and edit the links like this (should be the same if you have followed the same tutorials from Object):
Code: 
API_HOST=localhost
API_PORT=3030
AVATAR_SAVE_PATH=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/saved-figures
AVATAR_ACTIONS_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/HabboAvatarActions.json
AVATAR_FIGUREDATA_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/FigureData.json
AVATAR_FIGUREMAP_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/FigureMap.json
AVATAR_EFFECTMAP_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/gamedata/EffectMap.json
AVATAR_ASSET_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/bundled/figure/%libname%.nitro
AVATAR_ASSET_EFFECT_URL=C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-assets/bundled/effect/%libname%.nitro

Now you can go back to the original tutorial after the "Nitro Imager Config" part (with Volta installation and so on)

Hope it helps !!
Click to expand...
Noice! Works for me. Thank you!
 

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top