[BroZeus]

node.ucp




This is a full-fledged isomorphic javascript control panel written on top of nodejs and react. The purpose of this control panel is to serve as an example or boilerplate code for others as it is fully-fledged and very flexible.

I wrote the code to be easily adaptable for different use-cases and database types and structures. You can find solutions written by me to many problems related to server-side rendering, react, handling cache busting of volatile resources in service workers and handling sessions manually in the source code of this application.

The code uses ES6’s arrow functions and Promise vastly, so get familiar with these concepts if you are not already! I have tried to comment as much as possible to explain the working of the application in the source code, however, if things are not clear feel free to ask.

Demo

Username: Jonas
Password: test

Click here for the demo.
Click here for the images in-case the demo is not working.

Github

See github repository for more instructions.
Github repo link


SA-MP Map in UCP

Some players may not use the full UCP but the SA-MP Map feature of this UCP is pretty unique so I would like to showcase it specifically.
Link to it: https://node-ucp.fgethell.xyz/properties
Features:

• Location tracking: If you zoom in on the map and move across it, you will notice that the location on the bottom left corner will change.
  
• Filters: It has filters to enable/disable icons on the map.
• Properties information: If you click on icons you can see information regarding properties. This tooltip for showing information can be customized according to your needs!
  

[DavidKember]

This is lit. I'll give it a try and let you know about what I think.

[DavidKember]

It's pretty simple but yet it's discreet. It's pretty easily adaptable. Good job. This could be really helpfull for the newbies.

[StrikerZ]

That's dank

[Revazix]

good job mate!

[Fairuz]

Dope af.
Good job!

[WarZ]

Zeuuus ._.
it's Same of eXm's UCP ( you are the dev there i know )
Good job btw

[BroZeus]

Quote:

Originally Posted by ****** This is not isomorphic at all. A universal app should render both server and client side, so why do you need an "INITIALIZING AWESOMENESS" message, instead of just delivering fully rendered HTML? Basically, this is totally broken for any without JS, or with it disabled. For a moment I was quite interested in the prospect of a UCP that was rendered server-side, since it's far too rare a commodity in web design today. This is not it.

It is isomorphic and the content along with data is rendered on the server-side. If you right-click on the page and click on view page source option you will actually see that it is indeed rendered on the server side(view-source:https://node-ucp.fgethell.xyz/top/cash). The "initializing awesomeness" part is for authenticating login cookies since the isomorphism is mainly for crawling bots and they are not supposed to have any login cookies so I don't have a check on server-side for it.

[BroZeus]

Quote:

Originally Posted by ****** Well I just get stuck on that splash page. The pages are there underneath, but I have to manually delete the div to see anything interesting.

I didn't think that anyone at this time and age would have javascript disabled, my main purpose was to target crawl bots with isomorphism. If however, there are people out there who still does this, I will modify the app to do cookie authentication on serverside as well.

EDIT:

Quote:

Originally Posted by ****** I didn't look much further, since I have to redelete the div on every page, but the properties page is just a grey box with a spinning box - so that information isn't pre-rendered whatever its meant to be (and I checked the DOM this time).

The properties page doesn't actually have text and only just a ****** map so there was no use targetting it for crawl bots so I decided not to render it on server-side. Only the properties page and the protected routes(which requires you to be logged in) are not rendered on server-side.

Quote:

Originally Posted by ****** And the `top list` link doesn't work at all (especially when you try open it in a new tab).

The top list link is associated with a dorpdown kind of list, it opens with the help of javascript, maybe thats why its not working for you.


Do you actually have javascript disabled? If not, then can you tell me the browser and the browser version you are using.

[BroZeus]

Quote:

Originally Posted by ****** Yes: Firefox 52 (ESR) with NoScript.

I tested it with NoScript the issue was that the UCP domain was not on the trusted site so it blocks the cookie authenticating call to API and hence the splash screen on the start never disappears. The go0gle map api is getting blocked for the same reason and hence you cant see the go0gle map on properties page.

I never used NoScript so I wasn't aware of what it does, I will shift the authenticating to server-side on this weekend and then the problem should be fixed, however, you have to add the domain maps.******.com to your trusted site list in NoScript for properties page to work since ****** maps ToS prevents me from hosting the API on my own site or pre-rendering it on the page.

[[cS]Owain]

omg thats me but good job zeus =)

[CoaPsyFactor]

Quote:

Originally Posted by Y_Less Yes: Firefox 52 (ESR) with NoScript.

How do you expect javascript framework to work with javascript disabled?
Please try using *******, ********, ****** or any web application with javascript disabled, and tell me what do you see?

Server can provide HTML, but client cannot "hydrate" dom, as JS is disabled....

[Marricio]

Quote:

Originally Posted by Y_Less Thanks, I'll check it in bit. This is advertised as "isomorphic" - that means the same jS can be run on the server or the client. So you shouldn't need client-side JS because the server renders everything and sends full HTML. Many websites work without JS, and if they don't, they should do. Starting with content, then HTML, then CSS, then JS, is basic web best practice, and always has been - that's how you write a site that works on any browser by default, instead of requiring your users to be on Chrome Canary so that you can exploit the latest battery level API... However, you mentioned "web application". In my mind, that is something that requires constant input (such as a game), or provides constant output (such as a video). If change is fundamental to a things being, then yes, you need the part of web tech dedicated to change - JS. However, if your "web site" is constant (i.e. doesn't need to do something every few seconds or faster), then it doesn't need change code does it? Blogs - static, forum - static (I've been on this one page a few minutes now), even a UCP is mostly static (maybe not a real-time map, but changing settings, viewing stats, those don't need sub-second updates). So technically you're right, most "web applications" I am forced to whitelist things for, but for "web sites" I refuse (and complain a lot to people when they don't work properly). Edit: Even a map can be done server-side with last known co-ordinates. The data might not be up-to-the-second accurate, but dynamicisim is not fundamental to the operation of a map (as proven by the fact that we can print them on paper).

You've caught my attention. What's the best way you can think of for building an isophormic application? I've been writing one the past few weeks but I'm having very serious doubts about the way I have been implementing javascript.

[CoaPsyFactor]

Quote:

Originally Posted by Y_Less Thanks, I'll check it in bit. This is advertised as "isomorphic" - that means the same jS can be run on the server or the client. So you shouldn't need client-side JS because the server renders everything and sends full HTML. Many websites work without JS, and if they don't, they should do. Starting with content, then HTML, then CSS, then JS, is basic web best practice, and always has been - that's how you write a site that works on any browser by default, instead of requiring your users to be on Chrome Canary so that you can exploit the latest battery level API... However, you mentioned "web application". In my mind, that is something that requires constant input (such as a game), or provides constant output (such as a video). If change is fundamental to a things being, then yes, you need the part of web tech dedicated to change - JS. However, if your "web site" is constant (i.e. doesn't need to do something every few seconds or faster), then it doesn't need change code does it? Blogs - static, forum - static (I've been on this one page a few minutes now), even a UCP is mostly static (maybe not a real-time map, but changing settings, viewing stats, those don't need sub-second updates). So technically you're right, most "web applications" I am forced to whitelist things for, but for "web sites" I refuse (and complain a lot to people when they don't work properly). Edit: Even a map can be done server-side with last known co-ordinates. The data might not be up-to-the-second accurate, but dynamicisim is not fundamental to the operation of a map (as proven by the fact that we can print them on paper).

I totally agree with you, but from what I've understood isomorphic application is application that can execute on both server and client, and if server is nodejs, and it uses javascript to execute, then - not having js enabled on client doesn't mean its not isomorphic, it just means that it can not execute due something not regarding application itself.

But again, that's just what I understood

[BroZeus]

The authenticating process is now shifted to server-side, no more of that `initialzing awesomeness` splash screen.
Due to authenticating process being shifted to server-side, protected routes are now rendered on server-side as well, earlier only non-proteted routes were rendered from the server-side.

There may still be bugs in the site since this was my first reactjs project, feel free to report them.

Quote:

Originally Posted by Y_Less Well I just get stuck on that splash page. The pages are there underneath, but I have to manually delete the div to see anything interesting.

Your problem was due to NoScript plugin blocking API calls to the website, add the domain to trusted site list for the UCP to work properly. Even with javascript disabled, the UCP will work just fine now, but if javascript is enabled and API calls are blocked then the UCP won't work as expected.

[AnthonyDaBestt]

that's amazing

[Chaprnks]

shit.. I didn't even know you could code a full UCP via node.js.. I always hear about node.js, but for some reason I tend to avoid diving into learning it.. maybe I'm a die-hard Pawno/MySQL/PHP/HTML..

anyways.. I wonder how it does on performance, is it generally the same resource intensive as a standard PHP/MySQL UCP? also, would it integrate into apache2.conf/httpd.conf config as a subdomain on a standard apache2 installation?

[BroZeus]

Quote:

Originally Posted by Chaprnks shit.. I didn't even know you could code a full UCP via node.js.. I always hear about node.js, but for some reason I tend to avoid diving into learning it.. maybe I'm a die-hard Pawno/MySQL/PHP/HTML.. anyways.. I wonder how it does on performance, is it generally the same resource intensive as a standard PHP/MySQL UCP? also, would it integrate into apache2.conf/httpd.conf config as a subdomain on a standard apache2 installation?

After few days of uptime, its ram usage is at 36mb and CPU usage is less than 1% on the server that the demo is currently on, however, RAM usage seems to be more when the app is running in Windows.

As of raw performance, you can g000gle and see the benchmarks yourself, nodejs is faster in almost all scenarios.

And yes you can use apache to configure a subdomain and redirect the traffic to nodejs app, just g0ogle how to reverse proxy a subdomain to nodejs app using apache, you can also configure the apache to serve public static files to have a better performance.