Website refactored based on the MEVN stack

This article is explaining what the MEVN stack is and why I'm using it.

What is the MEVN stack?

MEVN stack is an architecture designed to make the web faster, more secure, and easier to scale. The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

Why did I refactor my web solution with the MEVN stack?

As for every developer, my first website was a bunch of static HTML and CSS files, which was fine for the time being. After a short period of time, I have chosen to use PHP as a backend language in order to do simple operations that were server required. Why I have chosen PHP? A lot of web hosting solutions had PHP implemented, and it was very convenient to use it and to be fair PHP didn't disturb me but I always knew that it's not my cup of tea. Every job which I took was pretty much based either on JAVASCRIPT or .NET. The MEVN stack took over slowly London, the majority of job posts I have seen were in massive need of a Senior-Front-End Dev or a Javascript Dev. I liked the idea of using Javascript client-side and server-side, one language for every environment. Now to answer the question, why did I refactor my web solution with the MEVN stack? Because I wanted to use javascript client-side and server-side, I wanted to develop, support and modify a web solution that is based on the MEVN stack. I wanted to see the advantages and disadvantages of it. I wanted to know which are suitable projects for this type of stack.

Which stack did I have in my previous web solution?

I had a static PHP solution that was not connected to a CMS or a database. I know it's not fancy, and that's why I have chosen to change it. With my content changing faster and faster I needed a web solution that is reactive, also it had to be an example of the MEVN stack market.

Which technologies I have chosen for my MEVN stack?

This was the funny part, which technologies to choose. I started to read and try to understand which are my best options but also in this small niche the amount of information is huge. React or Vue? Nuxt or Next? Jest or Mocha? Express or Fastify? I needed a web solution that is reactive, connected to a NoSQL database, and also caters to SEO. Also, I needed a CMS option, due to the increased volume of content.

My choice was:

• Vue.js is a progressive framework
• for SSR I have chosen Nuxt.js,
• node.js as a back end language
• express.js as a back end framework for API
• MongoDB as a NoSQL database
• Jest as a testing framework

If you want to find out my I enjoy using Vue.js in my front end projects, click here.

If you wonder why I have chosen to work with Vue, please check out this article.

The advantages of the MEVN stack?

Faster and Better Performance, it can generate new pages at deploy time and serve pre-built markup and assets over a CDN. Less expensive and easier to scale, the lesser complexity of development reduces costs, and also hosting of static files is cheap or even free. With higher security, with the delegation of the server-side and database operations, we don’t need to worry about vulnerabilities anymore. Better developer experience, frontend developers can focus only on the frontend and debugging, the expanding selection of CMS options for site generators removes the need to maintain. This usually means quicker and more focused development.

Did I have integrated a headless CMS with the MEVN stack?

Yes, I did. I liked the idea of headless CMS, and being at this step I chose to implement one. I choose to go with strapi because I could integrate it with MongoDB. By the way, strapi is awesome, I loved how easy it's to work with it, and also my clients liked it because it has a friendly interface.

Conclusion after Strapi and the MEVN stack integration

I had to admit that it was quite challenging to implement all the changes in my web solution, but if I look back now I came a long way in the MEVN stack. Now, this web application is built with Vue.js, Nuxt.js, Node.js, MongoDB, Express.js, Jest, and Strapi. All the content is dynamic and comes from the CMS. To put the cherry on the cake I have used herokuas a PaaS platform.