rewrote-entire-website-from-node-ejs-to-laravel-vue

Rewrote entire website from Node + EJS to Laravel + Vue

So I had 3 projects developed in Node.js and EJS:

  1. Social Network
  2. Video Streaming Platform
  3. E-commerce

A client approaches me and wanted to have all these platforms in 1 website. So I decided to keep the original stack. But there was 1 problem: Client had a shared hosting and he didn’t wanted to go to VPS or Dedicated hosting. As you know Node.js does not run on shared hosting. I tried to convince the client but he didn’t agree. So I decided to use the following platforms for deployment:

  • Heroku for Node.js
  • mlab for MongoDB

I combined all the platforms into 1, interconnects them via hyperlinks and made the website live within a week. Soon after the website goes public, I started getting issues.

Storage was not permanent

When user uploads an image or a video, it gets saved in “public” storage folder at the root of Node.js app. But since we were using the basic plan from Heroku, it did not allowed permanent storage. The files uploaded gets deleted after 2-3 days. So I decided to use MongoDB GridFS to save files instead of physically storing the files in folder. But that comes with it’s own problems.

MongoDB GridFS

I rewrote my entire file upload and fetch system to use MongoDB GridFS. After 4 weeks, I was able to use GridFS entirely on all 3 platforms. In GridFS, files are stored in 2 different collections in MongoDB. They are not interconnected, so deleting from 1 collection won’t delete from the other one. This became more and more complex as we start adding more and more features. For example, when user tries to delete his video or product, we have to go through all the documents created in both collections and delete them. This costs a lot because there is a lot happening on the background workers.

Laravel + Vue

I tried to convince my client that if he wants to use shared hosting, we should move to Laravel. But that comes with extra cost because I had to rewrite all 3 platforms. After 1 year of fixing problems in the current stack, client finally agreed that we should move to another stack and keep using Shared hosting. So I spent days and nights and developed all 3 platforms in following stack:

  • Laravel as backend API
  • Vue.js for frontend rendering

It wasn’t a Single Page Application, but I used hydration technique to do Search Engine Optimization while using Vue.js on the frontend. It took me almost 8 months to develop all 3 platforms in Laravel and Vue.js because it was a pre-AI era where we have to write all the code by ourself 🤣.

Results

With Laravel, the website was more secure and robust than ever. The file storage was working fine, background threads are working silently and we had no difficulty in adding more and more features. The client finally starts getting some real sales. In couple of months, site reached to 40,000 users. Client asked to add a “whole sale” feature where retail stores can sell in bulk. This was a big move from him and his profits skyrocketed.

That client is still with me, he keeps asking me to add more and more features and I love doing that. So that was my short and to-the-point story, what I learned and how it profits my client.