Partially migrating existing PrestaShop website to Vue Storefront - Challanges and solutions

[samberrry]

Migrating an existing website (specially a big one with many custom codes) to new solution is difficult enough to be considered as a big challenge. Technically, the normal process and the best way for this migration is to replace the front technology completely with the new one, and it starts with API development. We develop APIs for existing business logics, and after that we proceed with the front side, Vue development.

However, an alternative to fully implement the entire website, could be migrating the website partially, or incrementally. We implement a part as an increment, release it and then go to the next part. This might be a good strategy for several reasons:

• budget constraints
• better testing the solution in a real environment
• bringing the idea into the real world much sooner
• getting feedback sooner
• still developing the old system, etc.

In this discussion we try to highlight the challenges and to find feasible solutions to mitigate this process. This idea has some inherent challenges, is it worth it and is it feasible to do that partially?

Note: this approach is not recommended.

[samberrry]

This discussion started by @flachica in Vue Storefront Discord channel and I found it a valuable point, so I moved the discussion here to keep the answer to this question.

[samberrry]

In theory migrating the system (and even developing both systems in parallel) is a good idea (in terms of time and cost), but you know there are some challenges in practice. However, it highly depends on how the implementation goes on. I thought about that a little, and I think it's possible in some ways. Let me share my thoughts.

The most important thing that we should care about is SEO. We know that we have three types of pages in any shop that are mosly SEO-related, home page, PDPs and PLPs (product detail pages and category pages). I think that's where the migration should start.

We can achieve this partial migration with migrating just Home page, PDPs and PLPs and the leaving the rest to be on the old version (but still needs more discussion). Think of the main domain is: mydomain.com. We transfer the existing website to another domain like: old.mydomain.com. To keep everything working we need to migrate home page, PDPs and PLPs to modern pages. Now we have SEO-sensitive pages on modern pages, and the rest will be served from old.mydomain.com.

One challenge is cart management and cookie management, because we need to keep the users' session across the domains. We may achieve this through url encoding or adjusting same-origin policy (xhr.withCredentials). FYI, in REST API module we use the same cookie mechanism for auth system.

One another complex scenario could be serving the old.mydomain.com on a path on the main domain like: mydomain.com/old with reverse proxy that forwards requests to old.mydomain.com, this also needs changing the old URL references in code.

The idea is similar to the way we normally separate the cart management (shops like PrestaShop) from blogs (cms systems like WP), however the partial implementation of modern pages comes with more challenges.

Considering all this, it's important to maintain harmony between the old and new websites. Do not forget that the goal of this migration is to deliver better user experience.

I think this approach could be the most feasible way to partially migrate, but injecting PrestaShop pages or part of them into Vue pages could not be feasible.