VNC into the tinkerboard with x11vnc

I wanted to vnc into my tinkerboard, and using the default mac vnc client. I tried different packages, like RealVNC but that has license only for RaspberryPi, then I tried tightvnc but it was not working with the default mac client and getting tigervnc up was also not a smooth process, as it was giving error related to fonts.

Then, finally I came across x11vnc and it worked like a charm. To install it, simply run the following command on your tinkerboard

Once installed you can start the vnc server using:

If you want to run it with the password, first set a password using the following command

Now you can run the x11vnc with the password, run the command

Now, on the mac if you want to connect to the tinkerboard in the terminal type

It will launch the vnc the client and prompt you to enter the password, and you’ll be in.

That’s it!

Running Jenkins behind NGINX Proxy

I have a Jenkins server with a private IP address and an NGNIX server with a public IP. I wanted to point the domain for the Jenkins server to the NGINX server and the NGINX server would forward the request the Jenkins server.

I got this working through NGINX proxy pass, here is NGNIX configuration that I have used to get it working.

Assume the domain used for Jenkins server is jenkins.mydomain.com and the IP address of the Jenkins server is 192.168.1.20 running at port 8080.

On the Nginx server we create the file under the sites-available folder, here is the exact path: /etc/nginx/sites-available/jenkins.mydomain.com

Then linked the jenkins.mydomain.com file to sites-enabled

sudo ln -s /etc/nginx/sites-available/jenkins.mydomain.com /etc/nginx/sites-enabled/

Test the updated configuration

sudo nginx -t

Restart the nginx server

sudo systemctl restart nginx

That’s it! Let me know if you have any questions or comments.

Running your apps on your own server – This site is running on my own server

I have two software projects and a bunch of websites and databases running on the internet. They cost me around $1000 /mo. in terms of server cost to run, and I was sick of the slow performance and high costs of the computers running in the cloud.

I have been inspired by the Jeff Atwoods blogs posts (particularly this and this) for a long time. When he first blogged about running your own server, is much cheaper in the long run and then his recent blog post on running mini-pc server, and how the performance of the mini-pc was much better than the cloud computing which costs more than $5700 to run over the period of 3 years. Just to be clear nothing beats the flexibility of cloud computing, you can spin up a server in a matter of seconds and it is great for testing out ideas and running your application for some time, which I have been doing, but if you want to run something for a long term you are better off running your own server.

And I have been reading a lot about the cheap 1U server and few years old Xeon CPUs coming to the used market and selling ludicrously cheap, so I finally decided that I will buy a used server and host all my applications myself.

Hosting the server in your home is not a particularly great idea, as data centres are getting quite inexpensive it is best to put the server in the data center, so I decided to put mine in the Nuday networks datacenter. They also offer an IPMI connection to my server over the VPN which is an amazing service that would allow you to restart/boot/manage the server remotely, and it is quite cheap at just $59 CAD /mo. (they took a $99 one-time setup fee as well)

So, I was looking for used servers and I found a great one, a Supermicro 1U server with dual Xeon 6 core CPUs. A total of 12 cores and 24 threads and 64 GB of RAM.  I installed the VMware Hyper-v on it and created virtual machines that I require. 

I will be writing more about how I configured the server and setup the firewall and everything.

My server is currently running 6 VMs:

  1. MongoDB server
  2. MariaDB server
  3. Nginx server
  4. Dead Simple Chat Server
  5. Dead Simple Screen Sharing Server
  6. Firewall

There is an internal network through all the VMs are connected to each other sort of a VPC that we can have in AWS and the Firewall provides a VPN, so I can connect via VPN and manage the services.

This site is currently running on the Nginx Server along with few other sites, and the performance is really compared as compared to other hosting options.

So far I am very happy with my setup and it costs a fraction to run as compared to the services running in Google Cloud and AWS and is approximately 10 times more powerful.

If you want services to running for a long time then I think hosting your own servers is the best way to go.

Maximizing productivity when working on multiple software development projects

Software development is a creative pursuit and to enable the creative mind some cues are required, to get in the zone and kickstart the process.

I am a web and mobile app developer who works on multiple projects during the day, and to enable myself doing so I have created different zones for each project, where I can get in the zone and work on my craft, working on multiple projects requires some amount context, and switching context is taxing on the brain.

So in order to work on multiple projects during that day, I work on one project at a time, with a dedicated time slot for each project and a different workspace for each project.

A different workspace means a different desk, chair and a computer for each of my projects and ideally at a different location. Currently, I am working on 3 projects, so I have 3 computers and 3 desks, each dedicated to a separate project.

Now some of you might think it is wasteful, but trust me it is not. Dedicating a workspace for a project is one of the best money I have ever spent because after I am done working on one project, I do not have to close the editor, the tabs etc. I can just leave the things where they are and come in the next day and continue from where I left.

If you look at the desk of creative geniuses like for e.g Einstein or Steve Jobs they have messy desks, and the programs open in your computer is akin to things on your desk that you require when working on your project easily accessible so that you don’t have to break the flow of the what your working on and quickly access the programs and files and keep going and working productively and seamlessly resume where you left of.

By closing all the windows on the computer to switch to a different project and then coming back to the first project you have to re-think and re-load all the variables again in your brain, whereas if they are already open you still have to do some mental loading of the task but it is far less as compared to the re-opening all the stuff e.g the editor and browser tabs.

Steve Jobs Desk at his home office
Einstein’s Last Desk

With computers being more and more affordable it is an incredible luxury afforded to us by the modern times that I can dedicate an entire computer for one project and it has been a great boon for my productivity as I do not have to load things into my brain, when I sit on the desk for a project I just get going.

So if you are a programmer that works on a single project at a time then great for you! But if your profession demands you to work on multiple projects then trust me dedicating a separate workspace for each of the projects would be a great investment.

Conculsion

So in summary based on my experience the best way to work on multiple projects is to have a dedicated workspace for each project so that you can get in the zone with minimal effort.

If you have something more please share your thoughts in the comments.

5 Most useful ES6+ Features

In this post, I am going to share with you Javascript ES6+ features that I find the most useful:

  1. For…of Loop
  2. Arrow Functions
  3. Async and Await
  4. Template literals
  5. Destructing

For…of Loop

Before either we had to write a full for loop or call the forEach function on the array to iterate over its item.

Previously we had to do this

Now with the new version of JavaScript, we can simply write the For…Of loop

If we have to iterate over an object’s keys we can use the For…In loop

Arrow Functions

If you have done programming in JavaScript you must be familiar that we have to create a LOT of functions in javascript as it is an asynchronous programming language.

With the new Arrow Functions, it makes the code cleaner and also saves you a few keystrokes.

Consider the following example, previously we had to do this

Now with the ES6+ syntax, it can be compressed into a single line, in a single like arrow function we don’t have to write the return statement, the value of whatever expression preceding the arrow will be returned.

We can also create multi-line arrow functions that accept multiple arguments

Async and Await

This is the feature that I use a lot especially when doing server-side programming using Node.JS, but you can also use it on the front-end and it also works in all the major browsers.

With Async and Await keywords, you can write asynchronous code that uses promises appear as if it is synchronous and make the code more readable.

Consider the following example without async await

Now with Async and Await keywords, we can update the code and make the asynchronous functions look like synchronous functions and it results in a much cleaner code, see for yourself:

As you can see with the update the code is much more simplified. To use async-await first you have to create a function with keyword async, then inside the function, you can call asynchronous methods that uses promise and add the await keyword in front of the function call.

Template literals

Template literals is a very useful feature, previously we had to use string concatenation the can quickly get out of hand if we are using multiple values or if want to construct a multi-line string, consider the following example

The code can be simplified with template literals

To use the template literal we have to enclose the string in ` and then enclose the variable name under ${<variable_name>}

Template literals can also expand to multiple lines

Imagine constructing the above code using string concatenation, it would be an unreadable mess.

Destructuring

Destructuring allows us to extract values from an object and easily assign it to variables.

Considering the following example, here is what we normally do when we want to extract values from an object

With destructuring you can simplify the code as following:

and we can use the name, age, and occupation as variables in our code.

That’s it!

These the feature that I find the most useful in ES6+, please share if you found it interesting and let me know in the comments what ES6+ feature you like the best.

 

Embedding Rocket Chat using iFrame Auth

Recently I was working on a project where I had to embed Rocket.chat on a website, and when the user login to the website, they will also get automatically logged-into Rocket.chat

The following steps have to be performed:

  1. Check if the user exists in Rocket.chat
  2. If the user exists then login user
  3. If the user doesn’t exist then create the user in Rocket. chat and log in the user

I went through the Rocket chat documentation and figured out the best way to do it would be through a combination of iFrame Auth and the Rocket chat REST API. The iFrame Auth will be used to perform login and Rocket chat REST API to create a new user and generate tokens, but the documentation regarding the iFrame Auth was not quite clear and it was confusing, I also studied the provided example code and then after some fiddling I was able to implement my solution and I will walk you through the steps:

Login, Create Account and Server Setup

When doing iFrame Auth, Rocket chat sends few requests to our server so we will have to create few API’s on our server that Rocket chat server would call to authenticate the user.  I am using Node.JS + Express on the server side in the following example but the logic is similar even if you are using a different server or programming language.

Creating a wrapper to encapsulate Rocket chat API

We will call the Rocket Chat API to create a user in Rocket chat and we will also use it to Login the user and get the token.

First, we will have to obtain Rocket Chat Admin UserID and Admin Auth Token, this can be done by simply calling the Rocket Chat Login API:

 

Here http://localhost:3000 is the Rocket Chat URL and in place of myusername enter your Rocket chat admin username and under mypassword enter your password.

You’ll get a response something like this

 

Extract authToken and userId from the above response as we would need it in the next step.

Now we have to authToken and userId of the Rocket chat admin, we can use this to call Rocket Chat API and create new users in Rocket Chat.

The above code snippet we have created a few methods that are very self-descriptive. We will use these methods to create and login user into the Rocket Chat when user login to our server.

Creating API’s

In the above code snippet, we are creating routes that Rocket Chat will call to fetch the login token and authenticate the user, in the next step we will update the Rocket Chat Setting and include these routes.

Setting up Rocket Chat

There are few configurations that we have to make in Rocket chat to get it working with iFrame Auth.

Step 1:

Go under Accounts->iFrame and update the settings as per the screen-shot below Here we are specifying the routes that we had created in the previous step. http://localhost:8080 is where our local Node.JS server is running.

Step 2:

Go under General->iFrame Integration and update the settings as per the screenshot 

Embedding Rocket Chat

Now, after the setting on Rocket chat is done, we will embed Rocket chat into our web page, now embedding Rocket Chat is as simple as adding the iFrame on the page you want to embed

See the example below

Here http://localhost:3000 is the address of the Rocket Chat server and adding ?layout=embedded shows are cleaner UI.

Conclusion

That’s’ it! Let me know if you have any questions or suggestions in the comments below.

How to setup multi-domain SSL in Node.JS using letsencrypt-express/greenlock-express

Updated (14/June/2019)

Updated (22/June/2018): Support for Let’s Encrypt v2

I have updated the code snippet below to include the support for Let’s Encrypt v2 in the snippet below:

I wanted to set-up a multi-domain SSL certificate using LetsEncrypt for my app “Dead Simple Screen Sharing” because people complained about the long meeting URL, so I bought a short domain mnow.io and edited the code to generate short 6 digit meeting ids, so the new meeting URL became much cleaner e.g https://mnow.io/345686 instead of the original https://app.deadsimplescreensharing.com/meeting/bgasGca-1

But I needed a new SSL certificate for the domain mnow.io, and as this domain will also be pointed to the same server, I required a multi-domain SSL certificate.

I had already configured greenlock-express (letsencrypt-express is now called as greenlock-express) on my server so just had to make some changes in the configuration and add my domain, but simply adding the domain in the domains array didn’t work, so after some trial and error I finally figured it out.

Here is the final code snippet, that you can use, add this in your app.js or server.js:

In line 10 replace ‘domain1.com’ and ‘domain2.com’ with your own domains, if you have more than 2 domains you can add them in the array, if you have only one domain then you also keep just one single domain in the array.

In line 12 replace ‘youremail@example.com’ with your email address.

The code on line 19 to 23 is optional, you can add it if you want to redirect all your traffic to https, and if you skip it then both HTTP and HTTPS versions of your site will be live.

Let me know if you have any questions, concerns or suggestions in the comments.

How to Setup WordPress blog with static homepage (Updated for 2017)

In the blog post, I will guide you through the process of setting up a static homepage for your WordPress blog when using the default TwentySeventeen theme.

The process of setting up a static homepage for your blog is straightforward. follow the steps below to make it happen:

Step 1: Upload your static homepage

The first step will be to upload your static homepage into your site, to do this you’ll have to FTP or SFTP into your blog, you can find the information on how FTP into your blog from your hosting provider and you can use a program like FileZilla or Cyberduck to FTP into your blog.

After you connect to your blog via FTP/SFTP go to the themes folder of your WordPress installation, usually it is located at htdocs/wp-content/themes/<theme_name> as we are editing the default “twentyseventeen” theme in our case the theme_name will be twentyseventeen htdocs/wp-content/themes/twentyseventeen 

Then in this folder, there will be a file named front-page.php, rename that file to front-page-old.php, if we don’t rename this file then WordPress will server this page as the homepage,  so we have to change the name of the file from front-page.php to something else.

After you have renamed the file, create new file name page_home.php in that folder, and paste the following contents into that file:

After the ?> tag paste the html content of your homepage in this file and save the file.

Now go to the htdocs folder and upload all the other static HTML pages you want to upload and CSS files associated with your homepage.

Step 2: Updating Settings in WordPress

Login to your WordPress Admin panel, Go to Pages->Add New, and create a new page with title Homepage and from the Page Attributes section select the Template as “Static Front Page” as shown in the  image below, and save the page.

Then we will also need a page to show our blog posts, Go to Pages-Add New and create another page, with title Blog, and edit the permalink of the page to /blog.

Then go Settings->Reading and in the section where it says “Front page displays” select “A static page” and from the drop-down select “Homepage” as the front page and “Blog” as the Post page.

 

Step 3: That’s it!

Following the above simple steps, you can setup the static homepage, let me know if you have any questions in the comments.

 

DeadSimpleScreenSharing 2: Open source browser based self-hosted screen sharing

This blog post is about a project that I have built, which is called DeadSimpleScreenSharing 2, which the next version of DeadSimpleScreenSharing, and it is much better and faster than the previous version.

It offers audio conference out of the box and supports sharing your screen with any number of users just by sharing a URL, and it is very high quality and super fast.

I am also offering a self-hosted version of the application that you can run on your own server, and the self-hosted version is also white label so you can rebrand it with your organisation’s brand name.

So, here is how you can use this super simple service:

Step 1: Go to http://deadsimplescreensharing.com and click the “Host a Meeting” button

Step 2: It will take you the chrome extension page, where you’ll have to install the extension

Step 3: After installing the extension, click the extension icon, and a window will appear, in that window click the “Host a Meeting” button

Step 4: Done! Your screen is being shared, you can share the URL with others so that they can join your session.

Using Postgres with Parse Backend

Facebook killed parse last year, but thankfully they Open-Source the parse backend. Initially, the Parse Backend only supported MongoDB database, but later support for  Postgres has been added by the contributor from the community.

So using Postgres with Parse Backend is really quite simple, you just have to install the latest version of Parse Backend, and in the databaseURI specify the Postgres connection string.

Here is an example:


 

As you can see in the example above we have specified the connection string to connect to the Postgres database.

If you are not familiar with the structure of the connection string, then here is the breakdown.

If you have any question, please leave the comment below.