Vue.js Server Side Render Theme

Hi,

Would just like to share my experiences with you and let you know what I have managed to get a vue.js server side rendered theme up and running with CS-CART. I haven't fully tested everything yet, but early indications are good.

I went with SSR to tackle any doubt around SEO that exists with client side rendering and so far I am happy with the results.

We have 2 vue components on our page that contain session cart data, so hopefully I can cache everything on my pages with varnish except for these 2 components (using ESI) and of course we will not cache the checkout.

Of course my theme is heavily domain specific to our business, but that is one of the reasons we went the route of writing our own theme, we have greatly simplified the smarty templates for our site and replaced them with something that can be managed with webpack. It makes updates to the theme very quick. All of the content for our theme is controlled by a single addon that only executes for allowed storefronts - this way our manipulation of data does not corrupt any other storefronts we may run with a different theme.

We had to manipulate data to some degree to always deal with JSON responses to the front end, and we managed to do all of this using the existing cscart code hooks.

Fingers crossed for successful deployment!

Hello

Can you give an www address where you can see the effect?

Best regards

Robert

Not at the moment, but it will be live soon.... basically the process I came up with was:

- Create new theme folder

- Create package.json in new theme folder

- Developed inside theme folder the entry points for the application just as you would any other webpack based project...

When it came to SSR, I ended up hooking into:

dispatch_before_display

At this point:

I could grab the root template used by CS-CART and use that as a template for SSR

I server rendered my application using node and custom script that was based off a lot of the docs available on https://ssr.vuejs.org/

It needed a few tweaks to make it more relevant to CS-CART.

I am currently doing final testing on browserstack, but I can share my config in more detail when I have finished... so far, so good...

any news about this project?

Yes, you can see it here - there are elements that still need work, but in general it seems to be working ok.

https://www.bar-fridges-australia.com.au

Basically I just wrapped and intercepted standard CS-CART requests, ajaxified the ones that I was interested in so that they would talk to axios and vue.js nicely and thats pretty much it. I managed to implement Server Side Rendering use node.js and other more advanced vue.js features. When you do this, you do take on a certain amount of responsibility for getting things to play nicely with CS-CART but I believe it was worth the trade off.

Not all of the standard CS-CART DSL things work properly, but any of the things you lose (like cm-ajax) and others are available to you through vue.js and associated libraries, so I haven't lost the ability to communicate with CS-CART where required.

great work ! i am waiting similar solutions from cs-cart team at V5.

Yes, you can see it here - there are elements that still need work, but in general it seems to be working ok.

https://www.bar-fridges-australia.com.au

Basically I just wrapped and intercepted standard CS-CART requests, ajaxified the ones that I was interested in so that they would talk to axios and vue.js nicely and thats pretty much it. I managed to implement Server Side Rendering use node.js and other more advanced vue.js features. When you do this, you do take on a certain amount of responsibility for getting things to play nicely with CS-CART but I believe it was worth the trade off.

Not all of the standard CS-CART DSL things work properly, but any of the things you lose (like cm-ajax) and others are available to you through vue.js and associated libraries, so I haven't lost the ability to communicate with CS-CART where required.

I've took different approach so i decoupled cs-cart storefront using Nuxt nad activate storefront rest api from cs-cart

Yes, I did think of doing that, but I couldn't access everything I wanted to with the API at the time - I can't remember what API calls I was missing. Did you have to add custom API endpoints?

So you still created a theme in cs-cart or did you completely separate into its own application?

We had also been running under a 3rd party TPL theme for a couple years prior and had a few addons installed that relied on template hooks. So I also ended up running with this approach so we could keep that functionality.

But if I was starting over, I would definitely go the way you went and add to the API where required. It would be cleaner and easier to test.

Yes, I did think of doing that, but I couldn't access everything I wanted to with the API at the time - I can't remember what API calls I was missing. Did you have to add custom API endpoints?

So you still created a theme in cs-cart or did you completely separate into its own application?

We had also been running under a 3rd party TPL theme for a couple years prior and had a few addons installed that relied on template hooks. So I also ended up running with this approach so we could keep that functionality.

But if I was starting over, I would definitely go the way you went and add to the API where required. It would be cleaner and easier to test.

For me the reason doing this approach because i'm not familliar at all with cs-cart at that time but the pm need the development keep going. Most of the api i needed is available on cs-cart rest api, i found out there's graphql add on installed on cs-cart but i haven't manage to connect to it.

yeah, so we running some kind of headless cms architecture but because we have tight timeline we decoupled only the buyers / store front part not the entire cs-cart front-end.

I'm new to cs-cart, could you explain a bit about your testing strategy? do you have some unit-test when you create add on cs-cart or when you modify the cs-cart core?

also did you run some CI/CD for your project?