Note: This project is a work in progress and should not be used in production at this time.
Reference headless ecommerce storefront for Reaction Commerce v 2.0.0.
- Headless ecommerce starter kit built with Next.js, React, MobX, GraphQL, Apollo Client
- Reaction GraphQL API integration
- Server-side rendering
- Payments with Stripe
- Analytics with Segment or any other provider
- Reusable, customizable, themeable ecommerce React components from the new Reaction Component Library with Styled Components
- Fully-configured test suite: Jest snapshot testing, Mocha integration testing
- Written in ES6, configured with ES6
- Containerized with Docker
Follow the Reaction Platform docs to install and run all the services necessary to run the Starter Kit:
Directory: Service | URL |
---|---|
reaction : GraphQL API |
localhost:3000/graphql-alpha |
reaction : GraphQL API playground |
localhost:3000/graphiql |
reaction : Classic UI |
localhost:3000 |
reaction : MongoDB |
localhost:27017 |
reaction-hydra : oryd/hydra |
localhost:4444 |
reaction-next-starterkit |
localhost:4000 |
When 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:
- Add public Stripe API key (
STRIPE_PUBLIC_API_KEY
) to.env
. - Open the Reaction Classic app, at
http://localhost:3000
. Log in as an Admin user. - Open Payments: Enable Stripe by checking the box. Add a Stripe secret key and public key.
- 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.
Read the docs for setting up Segment or a custom analytics tracker
- Starter Kit full documentation
- Reaction Component Library repository, documentation, and component documentation
- Reaction Docs: Using GraphQL
- Reaction Docs: Testing with Jest
- Reaction Docs: Develping with Docker
The Reaction Platform runs the Starterkit 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 Starterkit, make sure to change directories into the reaction-next-starterkit
directory within the reaction-platform
repository:
cd reaction-next-starterkit
docker-compose up -d && docker-compose logs -f
docker-compose run --rm web [command]
Run 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.
Run tests locally
docker-compose run --rm web yarn test
Run tests locally without cache (this can be helpful if changes aren't showing up)
docker-compose run --rm web yarn test --no-cache
To update a failing snapshot (if you've made changes to a component)
docker-compose run --rm web yarn test -u
To run snyk security tests (this will run tests in the same way as CI)
docker-compose run --rm web sh -c "cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test"
To run eslint
docker-compose run --rm web eslint src
Yarn & 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. Yarn Add
docker-compose run --rm web yarn add --dev [package]
Yarn Install
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
Sometimes we need to test reaction-component-library
components in the context of the starterkit. Unfortunately, there isn't an easy wasy to do this within our Docker containers, so we need to run the starterkit
outside of docker.
cd
to your localreaction-component-library
repo.- Git checkout the proper branch that you want to link
cd
into thepackage
folder of this repo, and run the commandyarn install
followed byyarn build
- After the build is done,
cd
into the newdist
folder it just built and runyarn link
to allow the library to be installed into the starterkit. This will link@reactioncommerce/components
- Inside the
reaction-next-starterkit
repo, temporarily rename your.yarnrc
file to anything else (i.e..yarnrc-temp
) - Run
yarn install
and then the commandyarn link "@reactioncommerce/components"
to set the local version as an override of the published npm version - Inside your
.env
file, changeINTERNAL_GRAPHQL_URL
to equalhttp://localhost:3030/graphql-alpha
, the same as theEXTERNAL_GRAPHQL_URL
- Start the starterkit locally by running the command
export $(cat .env | xargs) && yarn dev
- Your starterkit should now be running at
localhost:4000
- 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 librarypackage/dist
folder. (This folder is gitignored anyway.)
- 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
- After your changes are tested, shut down the starterkit by running the command
CTRL+C
- Run
yarn unlink "@reactioncommerce/components"
in the starterkit repo folder cd
to thepackage/dist
folder of thereaction-component-library
repo. Run the commandyarn unlink
to unlink the local version of the component library- Undo the renaming of your
.yarnrc
file - Undo the URL change inside your
.env
file
Stop, and retain containers:
docker-compose stop
Stop, and remove containers:
docker-compose down
Stop, and remove containers, volumes and built images:
docker-compose down -v --rmi local
Sometimes it is helpful during development to make a production build of the app and run that locally.
Run this command to build a Docker image with the production build of the app in it:
docker build -t reaction-storefront --build-arg BUILD_ENV=production .
Then, to start the app on your machine, make sure the Reaction API container is already running and enter:
docker run -d --name storefront -p 4000:4000 --env-file .env --network api.reaction.localhost reaction-storefront
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.
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.
To stop the Docker container after starting it with the above command, use:
docker stop storefront
Copyright 2018 Reaction Commerce
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.