Minimal saleor + nextjs boilerplate?

[genox]

Hi,

I'm wondering if there is a minimal boilerplate of a nextjs app with sailor available somewhere, with just the basics covered: product listing, cart, checkout, auth, as close to vanilla as possible.

[peelar]

Hello @genox 👋

Currently, I am afraid not. Can you describe your use case? What are you trying to do, and how does react-storefront fit into that?

Regarding the minimal boilerplate: the majority of the complexity of react-storefront comes from managing the payments. In the current architecture, your Storefront can hardly be minimal if you want to have checkout.

[peelar]

Thanks, @genox, that's valuable insight.

What we definitely want to do in the near future is to provide a basic Next.js boilerplate. It will include auth, an example of communication with our GraphQL API, and a simple UI. You could treat it as a starting point for building your storefront.

So you would have two ends of the spectrum that is building a Storefront: something very basic (boilerplate) and something very opinionated (react-storefront). AFAIK, your best bet would be to use the first one to try to "recreate" the second.

Also, react-storefront will evolve. We will keep your feedback in mind when working on it 😉.

[genox]

Yes, exactly. Something like that. I think react-storefront scratches the itch of people that use Saleor and want to get a shop online as quick as possible, for this use case it's certainly great. But when you already have a (in many ways already opinionated) stack and need to integrate saleor, there is not much to go on there, except trying to use bits and pieces and cobble something together. Or start with the very basic things and reinvent the wheel.

Current generation of frontend stuff is super opinionated already and I am not any better. For example, adding apollo client etc is something I would try to stay away from as well, I would rather use an OpenAPI spec file and have a few hooks generated with Orval or wrap API calls in SWR hooks and I generally try to stick as much as possible to vanilla react with my own context/reducer and use as little overhead as possible.

So, something very distilled would certainly be appreciated.

Not sure if this is viable, but providing a library of components that provide integration options similar to a headless UI component approach might be something that a lot of people would enjoy using.

[peelar]

Not sure if this is viable, but providing a library of components that provide integration options similar to a headless UI component approach might be something that a lot of people would enjoy using.

It won't solve your problem right now, but you may be interested in following the development of our UI library: Macaw-UI. Definitely some curious things are going on there 👀.

[peelar]

Hello 👋

Coming back to you with saleor-next-boilerplate 🎉.

The core idea is to make opinions where it matters and stay bare-bones everywhere else. I already have some features I would like to implement (see: issues), but other than that, I think the scope will stay pretty much the same.

I am curious about your opinion. Do you think it solves your problem (at least partially)?

[genox]

Wow, thank you. I will definitely check this out when I get back to the e-commerce side of things on that project and will let you know how it went. :-)

[timuric]

Please check https://github.com/saleor/saleor-next-boilerplate

[genox]

I had a look at the provided repo and it looks nice and simple, but it seems to me that there are many essential parts missing that would provide central features like a cart, authentication for registered customers, creating orders, etc. Basically all the "default features" I would look for. Nonetheless, I think I will use this as a starting point and build out from there, using the other starter project for inspiration on how to extend. However, order creation, authentication and security features in general is the thing that makes me most anxious when having to be implemented in NextJS by hand.

The example is basically just a read-only product catalogue at this point and I might end up downsizing the starter project instead of building up from the boilerplate.

[peelar]

Authentication is going to be added in the next couple of weeks. I am afraid that by adding the rest, we would end up recreating what we have in react-storefront. Hence the limited scope of saleor-next-starter.

We want react-storefront to be not only a showcase of Saleor but a learning place you can use for reference. If something is unclear for you about react-storefront, please let us know.

[genox]

You can project the same process as storefront but keep it simple in the sense that everything is in the same nextjs project, isn't visually that much built out (only minimal design, no fancy widgets for variants etc, leave that to the developer) but instead focuses on showing which gql requests to make at which point in time, until a payment is received and an order is made. That is what I would call the minimum. Leave the form creation and the UI stuff to the dev, just provide a process skeleton as a place to where people can start building their custom solutions with their own stuff. If I just wanted to build a generic shop I would install phpCommerce and call it a day, that's the whole point of headless: customisation and bring-your-own-frontend.

For my particular project, the storefront project is way oversized and too built out in all the details to consider, heavily integrated into the vercel ecosystem with all the tooling - this is fine if someone wants to make the buy-in, but I can't say that I fancy that option. I am the kind of person that prefers running an ephemeral docker container on my own setup, so I have to refactor the whole thing from the beginning, anyways.

I am currently checking out many headless ecommerce solutions after the scope reality set in with Saleor, particularly checking out the way and the complexity of what the actual user story of "I want to buy a product and see my order status" generates in terms of implementation efforts.

Saleor is great, the admin dashboard is perfect compared to others (only thing I would add is a variant generator). Really the sweet spot in terms of customisability and guided rails, I like it. Others feel like toy shops.. But the implementation into an existing nextjs page is a monumental task at this point. That is where other projects would be a much better fit as they provide simpler blueprint projects, others provide hosted checkout processes, handling everything that could get hairy, so I can focus on the UX as a designer/developer and dont spend 3 weeks reinventing the wheel.

Storefront is probably aimed at enterprise and shop-only experiences, for which it is a great fit I think, but all the small operations are a bit left out and I can imagine others will also feel overwhelmed by the stack size and the looming maintenance horror of running minimum two separate nextjs projects for a client to be able to buy a toothbrush ( ;-) ).

Well, that's just my subjective impression and I guess there are as many opinions as people. :-)

[peelar]

That's a super valuable insight, I appreciate it greatly @genox. Thank you!

I definitely see the point of react-storefront being oversized for many smaller projects. I think between two extremes:

• saleor-next-starter (renamed from saleor-next-boilerplate 😅) - lean and unopinionated
• react-storefront - feature-complete and highly opinionated

there is plenty of room for improvement. I can promise you the starter will be extended with new features, and your input will play a big role in that.

[genox]

Thanks for your response. I am really impressed by how quickly and serious you guys take my feedback, this is one of the things that keeps Saleor at the top of my list, even though the implementation looks like a trek up Mount Everest without oxygen, currently ;-).

I am happy to provide feedback if it allows me and others to start from the bottom up instead from top-down. I think this is an apt analogy and it will cover a lot more use cases much more easily and offers the potential to drive adaptation on a broader scale because we as integrators can decide wether we need a solution to cover 4 products with an easy to use cart/checkout or wether we need an enterprise grade setup that allows to horizontally scale two services, so to speak. So we can either start small and flesh out the stuff we need and even self-host if we want to (large negative point for many other headless e-comm systems) or start big and cut 2-3 features we don't need. Different projects have vastly different requirements, the only thing they share is the central process, user story, epic, whatever you want to call it: browse, add to cart, pay, see the status.

As I mentioned above, the dashboard is what makes me want to use saleor (hosted, nonetheless, I totally see the value in that), the storefront project is what pushes me to something like commerce.js or - god beware - shopify storefront api. I think the pricing for the hosted version is just fine in a commercial context and it offers a basic feature set that covers 90% and you can extend it easily if you so choose (which I dont want to, that's the whole point, hehe). I have seen solutions where the first paid tier clocks in at a whopping 1k/month and they are basically doing the same thing. So I am grateful that I stumbled over Saleor as it recognises that not everybody is an enterprise client.

I also included my client in the evaluation and he thinks it would be a good solution (other than the missing variant generator, commerce.js has a good approach for that, albeit not perfect either) to replace his old monolithic php thing.

On that front, it feels like a no-brainer to go with saleor. I tested systems that feel like SAP, others are made for 1 product. Others don't even have a way to handle personalised gift codes. Saleor really shines for me in this regard. All the options are there, but wether I want to use them, how, or not at all, is up to me and can be modelled after the use-case.

The next step for me would be to know if expecting a simple starter to build on that covers the base will take weeks or months. I do not want to come across as pushy, but I need to make a decision soon on which direction I should take and of course it would make things a lot easier if you could give a some kind of ballpark timeframe estimate. I would volunteer as a reviewer and provider of feedback, of course, that would be the minimum I could do in return. Or in any ways that would help you achieve that goal.

[genox]

Hi,

Is this still something you consider building out?

[typeofweb]

Hey! A few updates:

• the minimal starter kit is here: https://github.com/saleor/saleor-next-starter
• we've recently released the Vercel Commerce fork integrated with Next.js 13 (App Router): https://twitter.com/getsaleor/status/1656657912608030720

[genox]

I will give the Commerce integration a try. Are vendor specific libraries (lib/saleor) usually packaged as npm modules for Commerce project to make updates easier in the future? Would present itself as a cleaner solution. This said, I never used Commerce so far so I am not familiar with the architecture.. ;)

[typeofweb]

I believe it's meant to be forked and modified; it acts as a showcase / example rather than a complete storefront.