In my previous post, I’ve shared how easy is to get your Next.js Commerce solution up and running powered by Sitecore OrderCloud®. Please have a look at the previous post before getting into this reading as this is a continuation that focuses on the development environment, the local solution setup, and the CI/CD approach.

Local solution setup

Let’s get back to our Github repo and clone it locally, then open it on Visual Studio Code.

We have our solution cloned locally, let’s open a terminal now and run npm install to install all dependency packages needed by the solution.

Vercel CLI

The Vercel’s command-line interface enables instant cloud deployment and local development.
To learn more, visit the official documentation, let’s get started now by installing the CLI:

Now we can just run “vercel link” to link our local repo with the Vercel project.

Use your Vercel credentials to login, choose your scope, and Vercel will magically recommend the proper project to link to. Veryfi all this information and proceed, if everything went good, you should see a green tick saying your project is now linked.

Now we need to get in our local all the environment variables we got created on Vercel:

We can speed up the process of creating those variables locally by using the Vercel CLI command “vercel env pull“

You can see now that a new .env file got created and contains all the variables we need:

Also, the previous step created the “vercel” folder where we can find the project.json configuration file.

Let’s test it out!

We got now everything in place, so let’s just run the app locally in develop mode by running “npm run dev“

Pum! Another unexpected exception 😦

After some analysis, I noticed there is an issue in this file (packages/commerce/src/config.cgs), while trying to build the path to the next.config file under packages:

const commerceNextConfig = importCwd(path.join(provider, 'next.config'))

I just updated with the hardcoded path and it seemed to fix the issue. Check this open issue for more details, or you can also refer to this PR that seems to be fixing the issue.

The app is now running locally in development mode and connected to Sitecore OrderCloud.

Let’s test our CI/CD

Let’s make a quick change on our project, test it locally, push it to Github and then deploy to Vercel.

So, in order to make some changes to the homepage, open and edit the pages/index.tsx file:

As you can see, I’m moving the marquee before the grid, and adding a heading text (note that you’d need to first add the import):

Here we go! As we’re running the app on development mode, we get feedback instantly, so get back to the local site in the browser and refresh it:

The marquee is now at the top and right after the heading text we added (“Sitecore OrderCloud Rocks!“).

Cool, so now that we’re fine with our local test, we commit and push to the repo…

Just verify we pushed the changes to Github

Go back to the Vercel portal and check that the build got automatically triggered 🙂

Amazing, isn’t it? Our changes are now deployed and pushed live to Vercel:

That’s it! The main reason behind this post was to show how easy is to get started with Sitecore OrderCloud, Next.js Commerce Templates, and Vercel. The starter kit gives you everything to start working with and for start learning this new technology stack as well. So don’t waste time and go try out this by yourself!

I hope you found it interesting, and see you soon with more Sitecore related stuff!