Looking for boiler plate for a more dynamicly rendered storefront app | Medusa Community | Page 1

lethal pumice Mar 14, 2023, 2:33 PM

#

I am unfortunately a little constrained by my devops situation in that I need to host the storefront statically but I cannot guarantee reliable access to the backend api within my build containers for deployment. This means that using the nextjs setup that constructs each product page html is going to be impossible. I've looked into contentful but I think I will have the same issue with failing to access remote data to build the page. That's kind of nextjs's whole thing so I guess I'm wondering if there is a project somewhere that uses a more client-side react approach to construct dynamic pages that can just be built entirely offline. That might just not be how medusa works but I'm hoping there is some work around as I may be forced to scrap Medusa otherwise 😦

#

Looking into the Vite start up tutorial but it seems like its more of a "learn to build" type of thing. Would be very interested if someone has a boiler plate repo to cut through some of the setup 😄

raven wave Mar 14, 2023, 3:10 PM

#

You could simply change how product pages are generated so instead of being done at build time, you wait with building them until the first time a user visits them.

This would require that you change the getStaticPaths to:

export async function getStaticPaths() {
  return {
    paths: [], // results in paths being generated at build time
    fallback: true, // ensures that we don't throw a 404 if a page hasn't been visited before
  }
}

Vercel has a demo on the subject that you can check out: https://static-tweet.vercel.app/

lethal pumice Mar 14, 2023, 3:32 PM

#

But is the page build clientside? I thought next.js was server side rendering and I'm hosting the site statically so I have no server running to build the page. Ideally I want to be hosting static javascript that constructs the page dynamically, probably a SPA.

#

I believe just setting this up with Vite is the answer but I was just hoping that I wouldn't have to start from scratch. A similar level of boiler plate to whats in the nextjs starter kind of. I am a very terrible UI dev so anything helps lol. but if it doesn't exist I can accept that 🙃

raven wave Mar 14, 2023, 4:01 PM

#

Ahh okay, we don't have anything like that, as you would be missing out on some key upsides to static/server-side rendering that can be pretty important for running a successful e-commerce store.

But if that is the only option you got then you could just strip out anything that has to do with static/server-side rendering. You can use Next without any of that, although it is obviously not how it is meant to be used.

You could also uninstall Next.js from the project, and replace it with Vite and react-router-dom. It would require doing a bit of clean up to remove all traces of Next, but should be very manageable, if you would prefer not starting from scratch

Also I am pretty sure I've seen a couple of articles on Medium before, where people have implemented pure React storefronts, so you could try to do a google search medusa react storefront and see if you can find one where they have shared their repo, although they will properly not be as fully fledged as the starter

junior basin Mar 14, 2023, 4:50 PM

#

Another option is to configure a revalidate api on nuxt, and on the backend you configure a subscriber for product created/updated and you call that revalidate api on your nuxt storefront - that would re-render the product page

#

Not sure how to go about not having the backend unavailable - I mean - everything ends up going trough the backend (payment, cart, etc...) so if it is unavailable, a lot won't work anyways

#Looking for boiler plate for a more dynamicly rendered storefront app