Xcites Package Documentation

The Product Package of Socites

What is Xcites?

Xcites, the Product Package of Socites, is a set of libraries that can be easily used to create and operate a community with social and real time interaction, offering the possibility of having the best of a social network (Facebook, Twitter, Instagram, etc ...) and the best of a CMS (Wordpress, Ghost, etc ...) working fast, secure and easy way for you. It takes just minutes configure and put in operation of a community, is so simple that only requires choosing the right domain name for your project, download the user interface code and make simple configuration steps for your new social site.
With libraries for the management of the site design, comments, content, messaging, keep tracking of users and topics, users directories, even has a library to handle payments. You no longer have to waste time worrying about the business logic. Just focus on promoting the idea that you have in mind.

How I do that?

The first step is go to the registration page on Socites platform, where once filled the registration form and confirmed the email, can proceed to create your first community.

Prerequisites

There are some simple prerequisites for setting up your new community. It require Node.js, at least version 4.0.0 LTS and NPM version 2.17. Only that, the rest will be the text editor of your choice.

Register the Community

To register a community you first need be registered on the Socites platform, to do this go to the signup page. Once registered and your account has been validated the next step is to go to register your community and choose the name of it. This process can take a few seconds and once completed will be redirected to the dashboard of your community, that's where the information required to set your community to work for the development and customization process is, these are the app id and the app secret key.

When creating your community an administrator user is created so you can then do the tests during development and manage the community, this user corresponds to the email you used during registration platform socites but still has no password set, it is a good time to create this password at this point.

Installation

To install the package Xcites and assuming that your computer already meets the prerequisites, just use the following command
copy
npm install xcites -g

Configuration

To configure just have to modify a file, yes, just a file called application.json, in this file is where you have to place the app key and the app id that was given when registering your community.
							 	{
									  "version": "0.1",
									  "params": {
									    "application": {
									      "ID": "123fde6598743012458bc321",
									      "key": "32f789b9fba9dd85369742ca8fcd3d41"
									    },
									    	...
									    },
									    ...
									  },
									  ...
									}
							
These data are necessary for the development time, once it's in production, authentication is associated with the url of your community.

See in Action

At this point, you can see locally how your community looks like. To that has to start the development server, making use of the command 'node server'. Then in the browser go to the url that shown in the console. Once is loaded you can see the basic layout of the community.

Like you can see the template has a basic style that probably is not enough for you project, and this bring to the next part, customization.

Customization

Quite possible that after configuration you want to customize your community. For this is the skin.json file you can specify some static files that can be used and define the styles and create variables that Xcites style files used to customize the appearance of your community.
{
  "auth": {
    "floating": {
      "title": {
        "color": "white",
        "shadow": "1px 1px 2px black"
      },
      "slogan": {
        "color": "#1e70b2",
        "shadow": "1px 1px 2px white"
      },
      "description": {
        "color": "white",
        "shadow": "1px 1px 2px black"
      }
    }
  },
  "menubar": {
    "gradient": {
      "from": "#ffaa4d",
      "to": "#ff8200",
      "percent": "17%"
    },
    "logo": {
      "height": "110px"
    },
    "logoIco": {
      "height": "35px"
    }
  },
  "colors": {
    "main": {
      "color": {
        "hex": "#4fd8bf",
        "rgb": "0,176,133"
      },
      "contrast": {
        "hex": "white",
        "rgb": "255,255,255"
      }
    }
  }
}
As you can see in the example above, values for some items you want customization are defined in this file, like the authentication popup, the menubar even define variables css.

Ready to put online your community?

Once done testing your community locally, made all changes and customizations you had in mind, it's time to put your community publicly available, this is a process of a few steps that can be performed quickly.

You must first make the build your community, using the command 'npm run build' which optimizes and packs all necessary files to be uploaded to your static files server. Remember Xcites not require any special server configuration as PHP, Python, Node.js, mysql, etc., for operation, only a web server to resolve http requests.

You must first make the build your community, using the command 'npm run build' which optimizes and packs all necessary files to be uploaded to your static files server. Remember Xcites not require any special server configuration as PHP, Python, Node.js, mysql, etc., for operation, only a web server to resolve http requests.

Some of the most interesting alternatives to serve static files are Github Page, aerobatic and firebase, there are certainly other options, you can choose the one that best suits your tastes and needs.

After uploading files to your server you should go to your dashboard in Socites to indicate the url of your community, as it is from this URL that requests will be accepted.

Going deeper

Want more control over the "look & feel" of your community, you can go one step further and customize views. And If you still want to go deeper, you can also read the documentation of the model.
Ready to take the Socites red pill?