To begin using the NextJS storefront, we’ll start by cloning the NextJS storefront repository directly from KIBO Software’s GitHub. To begin using the NextJS storefront, we’ll start by cloning the NextJS storefront repository directly from KIBO Software’s GitHub. This initial step downloads all the necessary files and sets the foundation for our local development environment. This ensures we have the latest version of the codebase to work with. This initial step downloads all the necessary files and sets the foundation for our local development environment. This ensures we have the latest version of the codebase to work with. Following the instructions provided in the repository’s “readme” file, the next step involves installing the required “Node” packages. This is crucial as these packages contain all the necessary dependencies for the storefront to function correctly. Following the instructions provided in the repository’s “readme” file, the next step involves installing the required “Node” packages. This is crucial as these packages contain all the necessary dependencies for the storefront to function correctly. Additionally, we’ll copy the environment variable template to a local file, which will hold our configuration settings. Additionally, we’ll copy the environment variable template to a local file, which will hold our configuration settings. Now, we’ll configure our environment variables. Whether we’re using an existing application or creating a new one, we’ll need to input the appropriate credentials. These credentials will allow the local storefront to communicate with the KIBO platform. This step is essential for connecting the storefront to our KIBO tenant and accessing the necessary data. Now, we’ll configure our environment variables. Whether we’re using an existing application or creating a new one, we’ll need to input the appropriate credentials. These credentials will allow the local storefront to communicate with the KIBO platform. This step is essential for connecting the storefront to our KIBO tenant and accessing the necessary data. Next, let’s dive into the specifics of setting up those credentials. The host URL should be set to “home.mozu.com”. The payments endpoint, which is optional but necessary for completing a checkout flow, should be set to “payments-sb.mozu.com”. The “API host URL” will follow a specific format: our “tenant ID”, followed by our “site ID”, and then “sandbox.mozu.com”.With all the correct credentials configured, we can then run the command “npm run dev” from the console. This will start the local development server and host our site locally, allowing us to begin testing and customizing the storefront. Next, let’s dive into the specifics of setting up those credentials. The host URL should be set to home.com. The payments endpoint, which is optional, but necessary for completing a checkout flow should be set to payments Dash. SB Dot mozu.com. The API host, URL will follow a specific format. Our tenant ID, followed by our site ID, and then sandbox Dot mozu.com. With all the correct credentials configured, we can then run the command npm, run Dev from the console. This will start the local development server and host our site locally allowing us to begin testing and customizing the storefront. One common issue we might encounter is an error in serializing the “categories tree”. This error typically arises if the credentials are not configured correctly. One common issue we might encounter is an error in serializing the “categories tree”. This error typically arises if the credentials are not configured correctly. The “category tree serialization” error is often the first indicator of misconfigured credentials because it’s the initial request sent to build the homepage. This makes it a crucial point for early error detection. Addressing this error promptly ensures that the rest of the setup process can proceed smoothly. The “category tree serialization” error is often the first indicator of misconfigured credentials because it’s the initial request sent to build the homepage. This makes it a crucial point for early error detection. Addressing this error promptly ensures that the rest of the setup process can proceed smoothly. Another potential issue is a syntax error indicating an “unexpected token”. This usually means the “Node” version is outdated. To resolve this, we’ll need to ensure we’re using Node version “14.19.2” or higher, although Node version “20” or higher is preferred.Using an up-to-date Node version is essential for compatibility with the project’s dependencies and syntax. Another potential issue is a syntax error indicating an “unexpected token”. This usually means the “Node” version is outdated. To resolve this, we’ll need to ensure we’re using Node version “14.19.2” or higher, although Node version “20” or higher is preferred. Using an up-to-date Node version is essential for compatibility with the project’s dependencies and syntax.
Want to learn more?
React Storefront
Learn more about this topic