All about http://mehla.in…

Gaurav Mehla
Apr 2, 2018 · 5 min read

I just left my job (). After spending some days over watching movies, anime and playing games, I thought lets start working on something. What else is better to work on than our own portfolio. I started working on it and after 2 days of learning and implementing, I have finalised the first version of my portfolio. I am happy from the end product. It is one of the project that I started from scratch. I like it because it is light-weight, beautiful and totally interactive. While building this, I learned a lot of new things and I wanna share those things like.. the architecture, server setup, the various libraries and modules which I used, etc with you. Also, we will see how you can use continuous deployment, which makes It is very easy for me to keep update my portfolio. Let’s dive in.

Why a separate blog post on it ?

It is because if we look at this architecture with a different angle, we are kind of deploying and maintaining a NodeJS application and using continuous deployment to stay out of dirty work. You can use this architecture setup to make any NodeJS application live & you can use this setup into production also, only if you are a small startup and the traffic is not high.

Prerequisites

There are few things that you must do before proceeding —

  1. A VPS( Virtual Private Server)
    I am using a EC2 instance. If you want to know more about how to create one .
  2. NodeJS App
    I am using my own portfolio. If you want to see the code, . I used express-generator to get a boilerplate

If you have all the things which are mentioned above, we can proceed.

Lets’ begin!!

⚜️ Architectural Design

The first thing we will discuss is the core architecture. This is the one that I am following.

This is what happens every time when I push changes over Github.

This type of architecture is very flexible. You can add services into this architecture very easily. The only thing that you have to do is just chain it into this process. For example — You want to do something after the code is pulled from Git. Just add that thing into Jenkins Job and that’s it.

⚜️ Server Setup

One of the most important thing in which developers stuck is how to setup the server so that they have scalability and flexibility. I am sharing how I configured my server. I am using Nginx as a proxy-server and I have up-and-running my node application using PM2 on the server.

# Sample Nginx config file
#
server {
listen 80;
server_name mehla.in www.mehla.in;
location / {
proxy_pass http://127.0.0.1:1111; # <= here app is running
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

In this config, I have configured that just keep listening on port 80 and whenever a request comes on it, first, check that request is for mehla.in and then pass that request to my node application which is running at localhost:1111.

You can add multiple conf. files like this into /etc/nginx/sites-available and keep listen to same port 80. Just change the server name according to your domain. It will help Nginx in distinguishing which request is came for which application.

Important Advice

One another important flexibility that this architecture provides is that you can have multiple applications on same server, which means if you have two domains, you can map them with different applications which is running on the same server. There is no need to put extra cost on another server. Just configure Nginx and that’s it. I have only one mini server which cost me near around $5 per month and I have 4 Node applications ,1 MongoDB instance and 1 Wordpress Website running on it with each node application mapped with different domain. If you want to know more about all this, feel free to ping me anytime at gaurav@mehla.in

⚜️ Libraries / Modules

I just combined bootstrap and handlebars in this version. I have a lot of plans for the future of this and the list in this section will keep increasing with time.

  • Bootstrap
  • Hover.css (
  • Express Generator
  • Express / Handlebars
  • PM2

Soon, there will be a lot more about this section on Github.

That’s it!!

Hope this will help you. In the last, please visit me and share your valuable suggestions with me…

Happy Coding !!


👏

_devblogs

Stories for Full-Stack Web developers which help them in pursuing their goals as a developer, mastering the modern web technologies and *hacking the web.

Gaurav Mehla

Written by

Software engineer & Web hacker. Spent 30+% of life on playing with JS

_devblogs

_devblogs

Stories for Full-Stack Web developers which help them in pursuing their goals as a developer, mastering the modern web technologies and *hacking the web.