General question(s) about the "new" Storefront/UI/Boilerplate
Hi folks, a week a ago I did my first steps with the "old" Storefront (vue2, nuxt2) but after some chats here, I learned, that there is a new Version (coming). For example the Storefront UI (just did introduction on the page with nuxt3 and tailwind) and there is also some a kind of middleware (Boilerplate/SDK), I also played with that, thinking I need it for the old Storefron (I was wrong?!).
At first I thought I can't use the new version, because the is no complete Nuxt3 Storefront yet, just the components (there is only one written in React). But it turns out I just need a public list of Products (frontend) from a private ElasticSearch Instance (through middleware?) in the first place, so the Storefront UI ProductCard is enough. I just need to fetch the data
How do I integrate my clean Nuxt3/Storefront UI project with the Boilerplate? Just run two node instances? Or can I integrate the Boilerplate in my nuxt3 project (server side)
Do I even need the Boilerplate or can I just create some custom PHP middleware (we have no node developers here) with some endpoints, or do I miss lot of nice features from the boilerplate?
16 Replies
or...do I create https://github.com/vuestorefront/integration-boilerplate and add my ProductCard there?
GitHub
GitHub - vuestorefront/integration-boilerplate: Framework Independe...
Framework Independent boilerplate containing SDK and API Client starters. - GitHub - vuestorefront/integration-boilerplate: Framework Independent boilerplate containing SDK and API Client starters.
Hey, can you elaborate more on your use cases?
You linked INTEGRATION boilerplate which is used to build integrations with thir-party vendors for Boilerplate and SDK. Eg you can connect an ecommerce platform
It's a separate thing from storefront boilerplate which is a storefront development acceleration. I suppose you want the latter one?
In the first step I actually just need a simple product list with filters with some kind of Middleware to serve the products from an internal elasticsearch.
My current approach is a simple vue3 app with the Vue storefront ui components/blocks (like the product card) and a symfony 6 Middleware with just one /products endpoint
---
Coming back to Vue storefront. I tried to connect these two
Installation | Storefront UI
Documentation for the Storefront UI
And this
Vue Storefront
YouTube
Build a frontend-agnostic integration for your headless backend | S...
Our Newsletter: https://vuestorefront.io/developer-newsletter
Boilerplate Repo:
https://github.com/vuestorefront/integration-boilerplate
Storefront UI
https://docs.storefrontui.io/v2/
Join us on Discord:
https://discord.vuestorefront.io/
Hi @nalincah π ,
If I understand correctly, you want to create a custom integration, like in the video, and use that custom integration in a Nuxt 3 project.
If that assumption is correct, you would use it just as it's used in the playground, but installed from a registry like npm.
so,
Step 1: get everything working in the playground
Step 2: publish your integration to some sort of registry
Step 3: install the integration into your Nuxt 3 app
Step 4: use it the same way as you did in the playground.
Does that answer your question?
Yes, thanks.
Is there no workaround while playing around with everything wihtout a registry?
That's what the playground is for π
okay, but where to put the "shop" (in our case just a produclist with filters) in the playground? which folder and where to access it? when I start the server I only see the backend-playground where I can execute queries
You can also install packages locally via yarn link: https://classic.yarnpkg.com/lang/en/docs/cli/link/
The playground is a Nuxt or Next application. You can add whatever components you like to test fetching from the middleware.
but doesn't it collide with the autogenerated code when I create a new endpoint?
No, just create a new page an use it like you would any other Nuxt/Next application. π
ah, okay. I see.... π€
Thanks, will look at it again, later
π