{"id":13516864,"url":"https://github.com/reactioncommerce/example-storefront","last_synced_at":"2025-10-05T19:12:21.338Z","repository":{"id":38272853,"uuid":"127972704","full_name":"reactioncommerce/example-storefront","owner":"reactioncommerce","description":"Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.","archived":false,"fork":false,"pushed_at":"2023-07-18T22:33:21.000Z","size":8350,"stargazers_count":611,"open_issues_count":35,"forks_count":284,"subscribers_count":35,"default_branch":"trunk","last_synced_at":"2025-09-12T14:12:41.327Z","etag":null,"topics":["apollo","cart","commerce","docker","e-commerce","ecommerce","ecommerce-platform","graphql","graphql-client","headless","javascript","marketplace","mongodb","nextjs","react","reactioncommerce","shop","ssr","storefront"],"latest_commit_sha":null,"homepage":"https://www.mailchimp.com/developer/open-commerce","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactioncommerce.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-04-03T21:50:03.000Z","updated_at":"2025-09-11T10:36:59.000Z","dependencies_parsed_at":"2024-01-13T19:26:29.605Z","dependency_job_id":"907da23e-1229-4f01-9095-5a5113c1785e","html_url":"https://github.com/reactioncommerce/example-storefront","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"purl":"pkg:github/reactioncommerce/example-storefront","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactioncommerce%2Fexample-storefront","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactioncommerce%2Fexample-storefront/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactioncommerce%2Fexample-storefront/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactioncommerce%2Fexample-storefront/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactioncommerce","download_url":"https://codeload.github.com/reactioncommerce/example-storefront/tar.gz/refs/heads/trunk","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactioncommerce%2Fexample-storefront/sbom","scorecard":{"id":765877,"data":{"date":"2025-08-11","repo":{"name":"github.com/reactioncommerce/example-storefront","commit":"4d6de852950ba8e0a74421bdead09dd0c6969f4f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":5,"reason":"Found 7/12 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: containerImage not pinned by hash: Dockerfile:1: pin your Docker image by updating node:12-alpine to node:12-alpine@sha256:d4b15b3d48f42059a15bd659be60afe21762aae9d6cbea6f124440895c27db68","Warn: npmCommand not pinned by hash: bin/package-link:70","Info:   0 out of   1 containerImage dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 25 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"90 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-2h3h-q99f-3fhc","Warn: Project is vulnerable to: GHSA-gmw6-94gg-2rc2","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-vxf5-wxwp-m7g9","Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx","Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc","Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w","Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf","Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-v923-w3x8-wh69","Warn: Project is vulnerable to: GHSA-f794-r6xc-hf3v","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-6g33-8w2q-4hxv","Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4vrv-93c7-m92j","Warn: Project is vulnerable to: GHSA-4x6g-3cmx-w76r","Warn: Project is vulnerable to: GHSA-6hwc-9h8r-3vmf","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp","Warn: Project is vulnerable to: GHSA-qgmg-gppg-76g5","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T00:46:25.436Z","repository_id":38272853,"created_at":"2025-08-23T00:46:25.436Z","updated_at":"2025-08-23T00:46:25.436Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278504399,"owners_count":25997936,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["apollo","cart","commerce","docker","e-commerce","ecommerce","ecommerce-platform","graphql","graphql-client","headless","javascript","marketplace","mongodb","nextjs","react","reactioncommerce","shop","ssr","storefront"],"created_at":"2024-08-01T05:01:26.668Z","updated_at":"2025-10-05T19:12:21.316Z","avatar_url":"https://github.com/reactioncommerce.png","language":"JavaScript","readme":"# Example Storefront\n\n[Mailchimp Open Commerce](https://mailchimp.com/developer/open-commerce/) is an API-first, headless commerce platform built using Node.js, React, and GraphQL. It plays nicely with npm, Docker and Kubernetes.\n\nThis Example Storefront is to serve as a reference on how to implement a web based storefront using the Reaction Commerce GraphQL API. You can fork this project as a jumping off point or create your own custom experience using your preferred client-side technology. While we believe our example storefront is full-featured enough to use in production, it may be missing features your shop requires at this time.\n\n## Features\n\nMailchimp Open Commerce comes with a robust set of core commerce capabilities right out of the box. And since anything in our codebase can be extended, overwritten, or installed as a package, you may also customize anything on our platform.\n\nThis example storefront is built with [Next.js](https://nextjs.org/), [React](https://reactjs.org/), [GraphQL](https://graphql.org/), and [Apollo Client](https://www.apollographql.com/docs/react/)\n\n- Headless ecommerce example storefront built with [Next.js](https://nextjs.org/), [React](https://reactjs.org/), [GraphQL](https://graphql.org/), [Apollo Client](https://www.apollographql.com/docs/react/)\n- [Reaction GraphQL API](https://github.com/reactioncommerce/reaction/tree/master/imports/plugins/core/graphql) integration\n- Server-side rendering\n- Payments with [Stripe](https://stripe.com/) with Strong Customer Authentication included.\n- Analytics with [Segment](https://segment.com/) or any other provider\n- Reusable, customizable, themeable ecommerce React components from the [Example Storefront Component Library](https://github.com/reactioncommerce/reaction-component-library/) with [Styled Components](https://www.styled-components.com/)\n- Written in ES6, configured with ES6\n- Containerized with Docker\n\n## Getting Started\n\nFollow the [Quick Start Guide](https://mailchimp.com/developer/open-commerce/guides/quick-start/) to install and run all the services necessary to run the storefront:\n\n| Directory: Service                                                                            | URL                                              |\n| --------------------------------------------------------------------------------------------- | ------------------------------------------------ |\n| [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL API                       | [localhost:3000/graphql](localhost:3000/graphql) ||\n| [`reaction-admin`](https://github.com/reactioncommerce/reaction-admin): Reaction Admin        | [localhost:4080](localhost:4080)                 |\n| [`reaction`](https://github.com/reactioncommerce/reaction): MongoDB                           | [localhost:27017](localhost:27017)               |\n| [`example-storefront`](https://github.com/reactioncommerce/example-storefront): Storefront    | [localhost:4000](localhost:4000)                 |\n\n**Note**: The storefront has redirects so that if you open [http://localhost:4000/graphql](http://localhost:4000/graphql), you'll be redirected to the GraphQL Playground.\n\n## Configuration\n\n### Set up Stripe\n\nWhen running the storefront and Reaction for the first time, you will need to configure Stripe payment processing and shipping options to test a complete order checkout flow. After signing up for a Stripe API key, follow these steps:\n\n1. Add public Stripe API key (`STRIPE_PUBLIC_API_KEY`) to `.env`.\n2. Open the Reaction Admin app, at `http://localhost:4080`. Log in as an Admin user.\n3. Open **Payments**: Enable Stripe by checking the box. Add a Stripe secret key and public key.\n4. Open **Shipping**: Enable flat-rate shipping by checking the box. Enable at least one type of flat-rate shipping by clicking on the option in the table and checking the box.\n\n### Set up Analytics event tracking\n\nRead the docs for [setting up Segment or a custom analytics tracker](docs/tracking-events.md)\n\n## Documentation\n\n- [Example Storefront full documentation](./docs)\n- [Example Storefront Component Library repository](https://github.com/reactioncommerce/reaction-component-library), [documentation](https://github.com/reactioncommerce/reaction-component-library/tree/master/docs)\n- [Reaction Docs: Testing with Jest](https://mailchimp.com/developer/open-commerce/docs/testing-requirements/)\n\n## Development\n\nThe Reaction Platform runs the storefront with Docker, so you will have to use Docker commands to view logs, run commands inside the container and more. To run commands specifically for the storefront, make sure to change directories into the `example-storefront` directory within the `reaction-platform` repository:\n\n```sh\ncd example-storefront\n```\n\n### Build and run in development mode with logs\n\nCreate a symbolic link to use the development Docker image:\n\n```\nln -s docker-compose.dev.yml docker-compose.override.yml\n```\n\nIf running for the first time or environment variables in `.env.example` have changed execute the command below to update environment variables.\n\n```\n./bin/setup\n```\n\nStart the storefront by executing:\n\n```sh\ndocker-compose up -d \u0026\u0026 docker-compose logs -f\n```\n\n### Run in development against a production API\n\nChange the `INTERNAL_GRAPHQL_URL` in `.env` to the production API URL. The URL should end in `/graphql`, like: `https://my-website.com/graphql`. Save the `.env` file and restart the application with:\n\n```sh\ndocker-compose run --rm --service-ports web yarn start\n```\n\n### Run commands in container\n\n```sh\ndocker-compose run --rm web [command]\n```\n\nRun any command inside a Docker container and then remove the container. Use this to run any tooling operations. Remember your project directory will be mounted and things will usually just work. See Yarn section below for more examples.\n\n### Run tests in container\n\nRun tests locally\n\n```sh\ndocker-compose run --rm web yarn test\n```\n\nRun tests locally without cache (this can be helpful if changes aren't showing up)\n\n```sh\ndocker-compose run --rm web yarn test --no-cache\n```\n\nTo run Snyk security tests (this will run tests in the same way as CI)\n\n```sh\ndocker-compose run --rm web sh -c \"cp package.json ../ \u0026\u0026 cp .snyk ../ \u0026\u0026 cd .. \u0026\u0026 snyk auth \u0026\u0026 snyk test\"\n```\n\nTo run ESLint\n\n```sh\ndocker-compose run --rm web eslint src\n```\n\n### Debugging the server with Chrome DevTools\n\nYou can use the Google Chrome DevTools to debug the code running in the Node.js application server while it's running inside Docker.\n\n- run `docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.js`\n- Open Chrome and browse to `chrome://inspect`. Find the process under **Remote Target** and click **inspect**.\n\n### Yarn Commands\n\nYarn \u0026 NPM should run inside the Docker container. We've taken steps to ensure that the node_modules are placed into a cacheable location. If you run Yarn locally, the node_modules are written directly to the project directory and take precedence over those from the Docker build.\n**Yarn Add**\n\n```\ndocker-compose run --rm web yarn add --dev [package]\n```\n\n**Yarn Install**\n\n⚠️ Always rebuild the image and start a new container after modifying yarn.lock or Dockerfile!\n\n```\ndocker-compose run --rm web yarn install\ndocker-compose down --rmi local\ndocker-compose up -d --build\n```\n\n### Testing component library in the storefront\n\nSometimes we need to test the [Example Storefront Component Library](https://github.com/reactioncommerce/reaction-component-library) components in the context of the storefront. Unfortunately, there isn't an easy wasy to do this within our Docker containers, so we need to run the `storefront` outside of docker.\n\n1. `cd` to your local [`reaction-component-library`](https://github.com/reactioncommerce/reaction-component-library) repo.\n1. Git checkout the proper branch that you want to link\n1. `cd` into the `package` folder of this repo, and run the command `yarn install` followed by `yarn build`\n1. After the build is done, `cd` into the new `dist` folder it just built and run `yarn link` to allow the library to be installed into the storefront. This will link `@reactioncommerce/components`\n1. Inside the `example-storefront` repo, temporarily rename your `.yarnrc` file to anything else (i.e. `.yarnrc-temp`)\n1. Run `yarn install` and then the command `yarn link \"@reactioncommerce/components\"` to set the local version as an override of the published npm version\n1. Inside your `.env` file, change `INTERNAL_GRAPHQL_URL` to equal `http://localhost:3000/graphql`, the same as the `EXTERNAL_GRAPHQL_URL`\n1. Start the storefront locally by running the command `export $(cat .env | xargs) \u0026\u0026 yarn dev`\n1. Your storefront should now be running at `localhost:4000`\n   - If you see errors about not being able to find peer dependency packages, that seems to be an issues with yarn linking. You can just temporarily `yarn add` each of those packages in the component library `package/dist` folder. (This folder is gitignored anyway.)\n1. After your changes are tested, shut down the storefront by running the command `CTRL+C`\n1. Run `yarn unlink \"@reactioncommerce/components\"` in the storefront repo folder\n1. `cd` to the `package/dist` folder of the `reaction-component-library` repo. Run the command `yarn unlink` to unlink the local version of the component library\n1. Undo the renaming of your `.yarnrc` file\n1. Undo the URL change inside your `.env` file\n\n## Clean up containers\n\nStop, and retain containers:\n\n```sh\ndocker-compose stop\n```\n\nStop, and remove containers:\n\n```sh\ndocker-compose down\n```\n\nStop, and remove containers, volumes and built images:\n\n```sh\ndocker-compose down -v --rmi local\n```\n\n## Build and run the production app locally\n\nSometimes it is helpful during development to make a production build of the app and run that locally.\n\nRun this command to build a Docker image with the production build of the app in it:\n\n```sh\ndocker build --network=host -t  reactioncommerce/example-storefront:X.X.X .\n```\n\nWhere X.X.X indicates the tag version you want to use, i.e. `3.1.0`\n\nThen, to start the app on your machine, make sure the Reaction API container is already running and enter:\n\n```sh\ndocker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X\n```\n\n_**NOTE:** You can replace the number before the colon in `4000:4000` with a different localhost port you'd like the application to run at._\n\n_**NOTE:** This is not the way to run the app in actual production deployment. This is only for running the production build locally for development, demo or trial purposes._\n\nTo stop the Docker container after starting it with the above command, use:\n\n```sh\ndocker stop reaction-storefront\n```\n\n## Contribute\n\nFind a bug, a typo, or something that’s not documented well? We’d love for you to [open an issue](https://github.com/reactioncommerce/example-storefront/issues) telling us what we can improve! This project uses [semantic-release](https://semantic-release.gitbook.io/semantic-release/), please use their [commit message format.](https://semantic-release.gitbook.io/semantic-release/#commit-message-format).\n\nWant to request a feature? Use our [Reaction Feature Requests repository](https://github.com/reactioncommerce/reaction-feature-requests) to file a request.\n\nWe love your pull requests! Check our our [`Good First Issue`](https://github.com/reactioncommerce/example-storefront/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) and [`Help Wanted`](https://github.com/reactioncommerce/example-storefront/issues?q=label%3A%22help+wanted%22) tags for good issues to tackle.\n\n### Pull Request guidelines\n\nPull requests should pass all automated tests, style, and security checks.\n\n#### Automated Tests\n\nYour code should pass all acceptance tests and unit tests. Run\n\n```sh\ndocker-compose run --rm web yarn test\n```\n\nto run the test suites locally. If you're adding functionality to Reaction, you should add tests for the added functionality. You can run the tests locally without cache if necessary by passing the `--no-cache` flag. This can be helpful if changes aren't showing up.\n\n```sh\ndocker-compose run --rm web yarn test --no-cache\n```\n\nTo update a failing snapshot (if you've made changes to a component)\n\n```sh\ndocker-compose run --rm web yarn test -u\n```\n\n#### Eslint\n\nWe require that all code contributed to Reaction follows [Reaction's ESLint rules](https://github.com/reactioncommerce/reaction-eslint-config). You can run\n\n```\ndocker-compose run --rm web eslint src\n```\n\nto run ESLint against your code locally.\n\n### Developer Certificate of Origin\n\nWe use the [Developer Certificate of Origin (DCO)](https://developercertificate.org/) in lieu of a Contributor License Agreement for all contributions to Reaction Commerce open source projects. We request that contributors agree to the terms of the DCO and indicate that agreement by signing all commits made to Reaction Commerce projects by adding a line with your name and email address to every Git commit message contributed:\n\n```\nSigned-off-by: Jane Doe \u003cjane.doe@example.com\u003e\n```\n\nYou can sign your commit automatically with Git by using `git commit -s` if you have your `user.name` and `user.email` set as part of your Git configuration.\n\nWe ask that you use your real name (please no anonymous contributions or pseudonyms). By signing your commit you are certifying that you have the right have the right to submit it under the open source license used by that particular Reaction Commerce project. You must use your real name (no pseudonyms or anonymous contributions are allowed.)\n\nWe use the [Probot DCO GitHub app](https://github.com/apps/dco) to check for DCO signoffs of every commit.\n\nIf you forget to sign your commits, the DCO bot will remind you and give you detailed instructions for how to amend your commits to add a signature.\n\n## License\n\nCopyright 2019 Reaction Commerce\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freactioncommerce%2Fexample-storefront.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Freactioncommerce%2Fexample-storefront?ref=badge_large)\n","funding_links":[],"categories":["JavaScript","graphql"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactioncommerce%2Fexample-storefront","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactioncommerce%2Fexample-storefront","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactioncommerce%2Fexample-storefront/lists"}