Object
?
- Nov 10, 2017
- 429
- 352
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 -
A working site / CMS (IIS must already have been set up and have a CMS must be up and running)
Create a subdomain:
Clone the nitro imager:
Set up & build the Nitro imager
Setup the reverse proxy:
Create the imager IIS site
Create the URL Rewrite rule:
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 last step:
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.
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
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.
Our subdomain is now ready to be used
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.
Once you have navigated yourself into the desktop path on your VPS write the following command:
When the imager have been cloned, your terminal should look something like the screenshot 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.
Now when you have edited your config to match your paths, open your cmd and enter the following command:
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:
Volta not installed?
Next up, write the following:
then
And the very last command to run
Once your imager has been started, it should look something like the image below:
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
Code:
npm run build
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 -
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:
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"
Once ticked, click "Apply" on the right side.
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
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.
How the reverse proxy rule should look:
Once you have filled all the mentioned fields, your rule should look like the images below.
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.
- 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
- The second field to fill is the "Pattern:" field and inside of that write "(.*)"
- 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:
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 "
Here's how mine looks:
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
Last edited: