Technologies are used here are: 

• Docker swarm
• Node.Js
• React.Js
• Mongo

Docker swarm

Docker swarm is an orchestrator tool. Why do I use Docker Swarm for a simple portfolio site? Is it an overhead? Do I use it just to follow docker hype? No, it is not. Docker swarm is a good abstraction. I actually have no idea how to run a daemon or use systemctl for hosting apps in a Linux environment, but I know Docker Swarm and can use it to host anything. Swarm gives me rolling updates and it restarts failed containers which add site stability.

The application has 3 swarm "services": Traefik, Nginx, the site itself and MongoDb. Traefik automatical get "Let's encrypt" certificate and handle routing for multiple sites, Nginx caches resource files and images, and MongoDB stores data.

Node.Js backend and MongoDb

The site is based on KeystoneJs CMS. It has nice UI to handle data in MongoDB and simple open source WYSIWYG editor to edit blog posts :). The great thing about the CMS that it stores user passwords not as plain text.

MongoDB is simple and fast data storage which operate data as JSON, that make it perfect for choice for Node Js.

React.JS and SSR

Since web 2.0 became standard more developers try to do sites and application as SPA and get all data with AJAX. That is perfect for apps, but sites still need advantages of HTML pages, like SEO tags and fast loading. Isomorphic javascript and node.js server sides rendering give me the best of both worlds by writing the code ones. To make it happen I use Fluxible isomorphic container library. It simply put state as JSON on the page after rendering and then collects it rehydrate the state. It is a really simple one. I invest so many time in it that I even did a Types.

The front end is written in React and bundled as one file with polyfills that make it works on IE11 too.

Monitoring and logs

Monitoring is an important part of any application, even as simple as this site. It is needed to be sure that application works and to fix exceptions as quickly as possible.

Health checks

I ran a simple curl every 10 minutes.

  
  curl --fail https://xbim.dev/healthcheck || curl -s -X POST https://telegram
  

It checks that site is answering and if it fails it notifies me via telegram.

TICK stack

For logs and metrics, It uses TICK stack.

To get to InfluxDb logs make quite a ride. Winston library writes to stdout. Logspout collects logs from docker driver and sends them to telegraf by Syslog protocol on another machine. Telegraf parses logs and saves them to influxDb. Influxdb is good for small projects. It doesn't require a lot of storage or RAM. It works with grafana. Grafana checks event in influxDb and alerts me if any exceptions happen via telegram.

Application Insights

App insights is an Azure service. It helps to monitor how many users came to the site and what they did. My favorite feature is that it translates user IP to a country of origin.

Conclusion

The site uses many simple technologies that are easy to learn but require some time to master. Feel free to ask your questions in comments.