fairbanksio / tiles-client

Pixel art chatrooms with your friends!

Tiles

Pixel art chatrooms with your friends!

Getting Started

Prerequisites

The following will need to be installed before proceeding:

• Node v8+
• Mongo DB
• Nginx
• Tiles API

Clone the Project

# Clone it
git clone https://github.com/Fairbanks-io/tiles-client.git
cd tiles-client/

Setup Backend API

The frontend requires the Tiles API to be running for saving drawings and managing chats. To setup the backend API, please checkout the Tiles API readme.

Install & Launch the Frontend

npm install
npm start

The Tiles UI should now be available at http://localhost:3000

Nginx

The following is an Nginx configuration block for both frontend and backend:

server {
    listen               443  ssl;
    ssl                  on;
    ssl_certificate fullchain.pem;
    ssl_certificate_key privkey.pem;
    server_name    tiles.mysite.io;
    large_client_header_buffers 4 8k;
    location / {
        proxy_pass      http://127.0.0.1:3000/;
        # Upgrade for Websockets
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location /socket.io/ {
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_http_version 1.1;
            proxy_set_header Host $host;
            proxy_pass http://127.0.0.1:4001/socket.io/;
    }
    location /tiles {
        proxy_pass      http://127.0.0.1:4001/tiles;
        # Upgrade for Websockets
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Docker

The Tiles UI can also be launched via Docker using the following example:

docker build -t Fairbanks-io/tiles-client .
docker run -d -p 3000:3000 --name 'tiles-client' Fairbanks-io/tiles-client