In this post, I'll describe the steps to get a full development environment from scratch, using the Next.js Commerce template integrated with OrderCloud and deploying to Vercel.
Sitecore OrderCloud®
Sitecore OrderClooud is an API-First, headless cloud platform for B2B, B2C, and B2X commerce solutions. It powers custom e-commerce experiences, order management, and B2B marketplace applications for some of the world's most well-known brands.
If you don't have your account yet, go here and create one, you can sign up for free!
Vercel - Next.js Commerce
Next.js Commerce is an all-in-one React starter kit for high-performance e-commerce sites. You can clone, deploy, and fully customize with a few clicks.
Demo site at https://demo.vercel.store/es
And again, if you don't have an account yet, go here and create one, you can sign up for free!
If you want to learn more about Next.js, don’t hesitate to go through the official documentation, it's really good and useful.
Let's go and get it done!
The first step is to login into Vercel and start a new project, then we just need to choose the Next.js Commerce template:
The Vercel templates
After we choose the Next.js Commerce template, we give the Git repo a name, and click on create:
Creating the starter kit Github repo
You can now go and check what Vercel has created for you in the Github repo:
Github
If you have experience developing Next.js apps, this repo would look familiar to you.
If you look at the readme file, you will see there is a demo site powered by Sitecore OrderCloud®!
Let's get back and continue with our setup!
We have our Github repo, let's skip the add integrations step for now and go straight to the deploy:
Build/deploy running for the first time...
The project got deployed to Vercel
Yas! your project got built and deployed to Vercel, you can now go and browse it (amazing isn't it?)
The Commerce site is already up and running!
Setting up the Sitecore OrderCloud® integration
The site you're browsing now already has some content, but as we are not integrating with any e-commerce platform yet, is just statically stored and generated. Let's change that and switch our e-commerce solution to be powered by Sitecore OrderCloud®.
For doing that, go back to your Vercel project and then go to the Settings section, then click on Integrations and search for the OrderCloud by browsing the Marketplace
Browsing the integrations Marketplace
You would now see the Sitecore OrderCloud integration under the Commerce section:
SitecoreOrderCloud integration
Then click on Add Integration and choose your Personal Account as Vercel Scope. Click on continue and then select the project we just created for the OrderCloud integration.
Add the integration and then login to your Sitecore OrderCloud account.
In the next step, you're prompted to choose your OrderCloud Marketplace. You would see that you can choose an existing one, but this time I want to create a new one "Seed new Marketplace (ID: "NEW")"
You can see the progress and logs, yeah Vercel is creating everything on OrderCloud for you!
Get back now to your Vercel project, settings and check the Environment Variables. You can see the key values created in the previous step:
Check your Sitecore OrderCloud® Marketplace
Now, login to Sitecore OrderCloud, go to Marketplaces and you should be now able to see the newly created "Vercel Commerce"
Let's try this out. Go to the API Console and then select "Catalogs", click on send to make the API call, and check the results:
Copy the ID (solitary-storefront) so you can now browse categories by this Catalog ID:
Let's browse the products now, copy the category ID (shirts) and make the request from the Products section:
Time to deploy it!
We just checked that the data is created on OrderCloud and we can easily query the API to get the results. Our Vercel integration is ready and now is time to deploy it so get our app consuming OrderCloud data.
just get back to your Vercel project, go to the deployments section, select the latest green one and redeploy it:
Uuuups! the build failed this time... That's weird and unexpected, but let's check logs and see what's going on:
As I mentioned in the previous step, the OrderCloud integration created the environment variables to make the app communicate with OrderCloud.
Ok, that's odd, it seems the "COMMERCE_PROVIDER" variable is not set properly. Let's follow the logs recommendations and update it from "ordercloud" to "@vercel/commerce-ordercloud". Save it and redeploy:
Yas! it seems to be good now, and the build is going good, you can also see in the logs how the site is being statically generated but making requests to the OrderCloud API this time:
You can see now our site getting data from OrderCloud!
Let's make a quick update on OrderCloud and check changes in our storefront.
Let's make an update on the Black Hat product. For that, go to the "Products" search for the "Black Hat" and then choose "PUT Create or update a product". Change the price from 80 to 40, and the name to "OrderCloud Black Hat":
We can query again to make sure the price got updated:
Get back to the site and check the updated product:
We have now our e-commerce solution deployed to Vercel, powered by Sitecore OrderCloud, and our Next.js app created on our Github repo.
In the next post, I'll be exploring and sharing the local solution setup and the CI/CD so you can get an idea of how easy is to start building your solution with this tech stack.
I hope you found this post useful!
If you are interested in this topic, please don't hesitate to watch the full demo example from Rob Earlam on YouTube.
