{"id":22542137,"url":"https://github.com/commercelayer/demo-store-ssr-test","last_synced_at":"2025-06-21T07:38:16.780Z","repository":{"id":87862479,"uuid":"591058716","full_name":"commercelayer/demo-store-ssr-test","owner":"commercelayer","description":"Temporary test with SSR on Netlify.","archived":false,"fork":false,"pushed_at":"2024-11-27T10:19:56.000Z","size":577,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-02T08:29:08.904Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/commercelayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-19T20:41:49.000Z","updated_at":"2024-11-27T10:20:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"4bf8fb03-59b4-4e58-9019-1ca6031bbe97","html_url":"https://github.com/commercelayer/demo-store-ssr-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"commercelayer/demo-store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fdemo-store-ssr-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fdemo-store-ssr-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fdemo-store-ssr-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fdemo-store-ssr-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commercelayer","download_url":"https://codeload.github.com/commercelayer/demo-store-ssr-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245991559,"owners_count":20706125,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T13:08:38.358Z","updated_at":"2025-03-28T07:42:55.500Z","avatar_url":"https://github.com/commercelayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Commerce Layer Demo Store\n\nThis Demo Store is a completely static ecommerce solution (with SSR capability) powered by Commerce Layer. The store is [full-featured](#features) and fully operational, with no third-party services required. You can easily tailor your own with different levels of customization. Keep reading to learn more.\n\n\u003e The Demo Store project consists of [two repositories](#how-it-works), this one is the GitHub template.\n\n## What is Commerce Layer?\n\n[Commerce Layer](https://commercelayer.io/) is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.\n\n## Table of contents\n\n- [Features](#features)\n- [How it works](#how-it-works)\n- [Getting started](#getting-started)\n- [Customization](#customization)\n- [Deploy](#deploy)\n- [Need help?](#need-help)\n- [Troubleshooting](#troubleshooting)\n- [License](#license)\n\n## Features\n\nWe decided to build the Demo Store removing all third-party services that are usually used to create a comprehensive ecommerce website experience (CMS, search, PIM, etc.).\n\nEverything related to [content](https://commercelayer.io/docs/core-concepts/content-vs-commerce) is stored as JSON files. To build your own Demo Store you will need to create these files manually or via scripts.\n\nThe Demo Store comes with:\n\n- [x] a built-in search engine with facet search powered by [fuse.js](https://github.com/krisk/Fuse)\n- [x] a full product catalog management with taxonomies and taxons\n- [x] single product variants management\n- [x] multi-language capabilities to make selling internationally easier\n- [x] the whole extensive set of features provided out of the box by Commerce Layer APIs (multiple currency price lists, inventory models that support multiple stock locations and fulfillment strategies, market-specific payment gateways, delivery options and carrier accounts, etc.)\n\nThe integration with Commerce Layer is achieved by leveraging some of our open-source [developer tools](https://commercelayer.io/developers), specifically:\n\n- the [React components](https://github.com/commercelayer/commercelayer-react-components)\n- the embedded version of our [Hosted cart](https://github.com/commercelayer/commercelayer-cart#embedding-the-cart)\n- the [Hosted checkout](https://github.com/commercelayer/commercelayer-react-checkout)\n\n## How it works\n\nThe Demo Store project consists of two repositories that you can leverage to build your own store, based on the amount of customization you need to add:\n\n- [`demo-store`](https://github.com/commercelayer/demo-store)\n\n  This is a **GitHub template** that uses the below-mentioned `demo-store-core` as a [git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules). If you're happy with the features and the look and feel of the Commerce Layer Demo Store we suggest you follow this path. You won't have to care about the whole source code and you'll be free to focus just on [your data and content](#customization). On top of that, you'll get free updates with [almost no risk](#managing-updates) just by running:\n\n  ```sh\n  git submodule update --remote\n  npm install\n  ```\n\n- [`demo-store-core`](https://github.com/commercelayer/demo-store-core)\n\n  This repository contains the source code. If you need to fully customize your store (behavior, UI, UX, etc.) you just have to fork this repo and create your own. **This is also the way to contribute.**\n\n  \u003e :warning: Please note that if you follow this path and start diverging too much from the original source code the risk is to lose all future updates or not be able to replicate them.\n\n## Getting started\n\nIf you have no experience with Commerce Layer, you can start by creating an account (it's free!) and following the [onboarding tutorial](https://docs.commercelayer.io/developers/welcome/onboarding-tutorial).\n\n\u003e :information_source: Please note that to set up a Demo Store you need a properly configured organization with at least a few products and one market.\n\nIf you prefer to start from scratch, you can create a new organization and use the following commands to configure a Commerce Layer's Demo Store-like project.\n\n### Setting up your organization\n\nOnce the organization is created, you need to create two [API clients](https://docs.commercelayer.io/developers/api-clients): a **sales channel** and an **integration**.\n\nIf you haven't yet, install the [Commerce Layer CLI](https://github.com/commercelayer/commercelayer-cli) and two of its plugins: the [seeder plugin](https://github.com/commercelayer/commercelayer-cli-plugin-seeder) and the [imports plugin](https://github.com/commercelayer/commercelayer-cli-plugin-imports):\n\n```sh\nnpm install -g @commercelayer/cli\n\ncommercelayer plugins:install seeder\ncommercelayer plugins:install imports\n```\n\nNow you can log in to your integration API client from the CLI:\n\n```sh\ncommercelayer applications:login \\\n  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... \\\n  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... \\\n  --organization my-awesome-organization \\\n  --alias cli-admin\n```\n\n### Building your store\n\nOnce your organization is set up, to build you store you need to follow some simple steps... let's get started!\n\n#### 1. Create a new repository\n\nWhichever [path](#how-it-works) you choose, first of all, you need to create a new repository for your store:\n\n- If you decided to keep the `demo-store` template you just need to click on the _\"Use this template\"_ from the [repository homepage](https://github.com/commercelayer/demo-store) on GitHub and then run:\n\n  ```sh\n  git clone \u003cyour-repository-url\u003e my-new-project\n  cd my-new-project\n  git submodule update --init\n  npm install\n\n  cp ./demo-store-core/packages/website/.env.sample.submodule .env.local\n\n  cp -r ./demo-store-core/packages/website/data/json ./data/json\n  ```\n\n- If you decided to fork the `demo-store-core` [repository](https://github.com/commercelayer/demo-store-core) you can run this instead:\n\n  ```sh\n  git clone \u003cyour-repository-url\u003e my-new-project\n  cd my-new-project\n  npm install\n\n  cp ./packages/website/.env.sample ./packages/website/.env.local\n  ```\n\n#### 2. Set the environment variables\n\nEdit `.env.local` and fill in all the missing information:\n\n```properties\n# this is the 'sales channel' client id\nNEXT_PUBLIC_CL_CLIENT_ID=er34TWFcd24RFI8KJ52Ws6q...\n\n# this is the 'base endpoint'\nNEXT_PUBLIC_CL_ENDPOINT=https://my-awesome-organization.commercelayer.io\n```\n\n#### 3. Seed the data\n\n\u003e :information_source: This step is optional. If you already have a properly configured organization on your Commerce Layer account, you can skip it.\n\nThe following script will populate your organization with all the resources you need to build a multi-market ecommerce with Commerce Layer (the ones we are using for our [Demo Store](https://commercelayer.github.io/demo-store-core)).\n\n```sh\nnpm run seeder:seed -ws --if-present\n```\n\nIf the command above executes with no errors, please [skip to step 4](#4-choose-the-countries-where-youre-going-to-sell). Otherwise, you can still seed your organization with sample data using the CLI by running the following:\n\n```sh\ncommercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/\n```\n\n#### 4. Choose the countries where you're going to sell\n\nThe `json/countries.json` file contains a list of available countries for your ecommerce. You can change it with your preferred editor. Just make sure to replace all findings of `\"market\": xxx` with the related markets of your organization. You can get the list of your markets from the Commerce Layer admin dashboard or by running this command:\n\n```sh\nnpm run markets -ws --if-present\n```\n\n#### 5. See it in action :rocket:\n\n```sh\nnpm run dev\n\n# http://localhost:3000/\n```\n\n\n## Managing updates\n\nYou can always find the latest code of the `demo-store-core` in its `master` branch.\n\nTo update your Demo Store to the latest changes you can simply run:\n\n```sh\ngit submodule update --remote\nnpm install\n```\n\nSometimes can happen that a new major version contains breaking changes. In this case, by updating to the latest, your Demo Store could stop working and you'll need to manually solve all the issues by following the [release notes](https://github.com/commercelayer/demo-store-core/releases).\n\nIf you like, you can receive a [GitHub notification](https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository) as soon a new version is released.\n\n\n## Customization\n\nWhen you're using our Demo Store template you can customize three main elements: content data, locales, and configuration files.\n\n\u003e :warning:  We're going to continuously improve our Demo Store to add new features and optimize the existing ones. When you update to the latest release, the build could fail. Take a look at the release notes to understand how to fix it by updating your customized files.\n\n### JSON data files\n\nAs mentioned earlier, our Demo Store is built around a set of data that are stored as JSON files, to decouple it from any third-party services. To build your store you'll have to create and manage these files.\n\nJSON files are located at `data/json/`, but you can choose a different position by changing the environment variable `NEXT_PUBLIC_JSON_DATA_FOLDER`.\n\nType-definition files are located at `packages/types/src/json/`. We are using [zod](https://github.com/colinhacks/zod) for schema validation. Take a look at these files to understand which structure you have to follow.\n\nWhen you are done with all the changes you can check if everything is correct by running:\n\n```\nnpm run test:data\n```\n\n### Locale data files\n\nOur Demo Store is a multi-language website. When you built your data in the previous step, you probably noticed that some fields were localized. You can add new languages or change existing translations.\n\nLocale JSON files are located at `data/locales/`, but you can choose a different position by changing the environment variable `NEXT_PUBLIC_LOCALES_DATA_FOLDER`.\n\nDo as follows to start customizing the locales:\n\n```sh\ncp -r ./demo-store-core/packages/website/data/locales ./data/locales\n```\n\n```properties\n# .env.local\nNEXT_PUBLIC_LOCALES_DATA_FOLDER=../../../data/locales/\n```\n\n### Configuration files\n\nConfiguration files are located at `config/`, but you can choose a different position by changing the environment variable `NEXT_PUBLIC_CONFIG_FOLDER`.\n\nThere are three configuration files that you can manage:\n\n- `general.config.js`  \n  This file contains the general configuration.\n\n- `facets.config.js`  \n  This is the facets configuration file. You can choose the order in which they are displayed in the filter panel, their appearance, and the sorting rules of their values.  \n  \u003cimg width=\"400\" alt=\"demo-store-facets\" src=\"https://user-images.githubusercontent.com/1681269/184152000-2163e484-d4bd-441a-b3cb-20c3b03b875a.png\"\u003e\n\n- `variants.config.js`  \n  This is the variants configuration file. You can choose the order in which they are displayed on the product detail page and their appearance.  \n  \u003cimg width=\"180\" alt=\"demo-store-product-variants\" src=\"https://user-images.githubusercontent.com/1681269/184152670-bdd5ea2b-d30f-42e8-b5a7-6c541396cd90.png\"\u003e\n\nDo as follows to start customizing the configuration:\n\n```sh\ncp -r ./demo-store-core/packages/website/config ./config\n```\n\n```properties\n# .env.local\nNEXT_PUBLIC_CONFIG_FOLDER=../../../config/\n```\n\n### Additional environment variables\n\nThere are some environment variables that you can use to customize your store. For an exhaustive list and description, you can take a look at [additional-env.d.ts](https://github.com/commercelayer/demo-store-core/blob/master/packages/website/additional-env.d.ts) file.\n\n## Deploy\n\nYou can deploy the Demo Store wherever you prefer. You just need to:\n\n1. Set all the environment variables in the system that you'll use to run the build, according to your needs.\n2. Decide if you want to go with [static site generation](#static-site-generation) or [server-side rendering](#server-side-rendering).\n\n\u003e :information_source: The Demo Store is designed to be SSG first and foremost, but you can switch to SSR in a snap. We tested some ways to deploy it (e.g. using GitHub Workflow, Netlify, Vercel, etc.) and you can find more information about it [here](DEPLOY.md). If you did it differently or used other services and you want to share the steps with the community, please [join the discussion](https://github.com/commercelayer/demo-store-core/discussions/new?category=show-and-tell), and thanks in advance!\n\n### Static site generation\n\nTo build and deploy the Demo Store:\n\n1. Set the following environment variable accordingly:\n\n   ```properties\n   NEXT_PUBLIC_DATA_FETCHING=ssg\n   ```\n\n2. Run `npm run export` to create a statically optimized production build of your application.\n3. Copy the folder `demo-store-core/packages/website/out` to your preferred static hosting.\n\n### Server-side rendering\n\nThe Demo Store can be deployed to any hosting provider that supports Node.js. To do that:\n\n1. Set the following environment variable accordingly:\n\n   ```properties\n   NEXT_PUBLIC_DATA_FETCHING=ssr\n   ```\n\n2. Run `npm run build` to create an optimized production build of your application.\n3. Run `npm start` to start the Node.js server in production mode.\n\n## Need help?\n\n- Join [Commerce Layer's Discord community](https://discord.gg/commercelayer).\n- Open a new [Q\u0026A discussion](https://github.com/commercelayer/demo-store-core/discussions/categories/q-a)\n- Ping us on [Bluesky](https://bsky.app/profile/commercelayer.io), [X (formerly Twitter)](https://x.com/commercelayer), or [LinkedIn](https://www.linkedin.com/company/commerce-layer).\n- Is there a bug? Create an [issue](https://github.com/commercelayer/demo-store-core/issues) on this repository.\n\n## Troubleshooting\n\n1. **Q.** Even if I changed `NEXT_PUBLIC_JSON_DATA_FOLDER`, `NEXT_PUBLIC_LOCALE_DATA_FOLDER` or `NEXT_PUBLIC_CONFIG_FOLDER`, the website is still referring to previous files.\n\n   **A.** These environment variables are used as `alias` in Webpack. Starting from Webpack 5, caching for faster builds has been introduced. Changing these environment variables will not invalidate the Webpack cache. You have to remove `.next` folder manually or by running:\n\n   ```sh\n   # update the path if needed\n   rm -rf demo-store-core/packages/website/.next/\n   ```\n\n## License\n\nThis repository is published under the [MIT](LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercelayer%2Fdemo-store-ssr-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommercelayer%2Fdemo-store-ssr-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercelayer%2Fdemo-store-ssr-test/lists"}