From 5e4dddfa762621c0f1b8618f52179f3d0de81fe9 Mon Sep 17 00:00:00 2001 From: Will Lopez Date: Wed, 17 Jun 2020 15:36:18 -0700 Subject: [PATCH] chore: update README and CHANGELOG to reflect recent updates Signed-off-by: Will Lopez --- CHANGELOG.md | 15 +++++++++++++++ README.md | 24 ++++++++++++++---------- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 409276607c..3801ac7e79 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,18 @@ +# v3.2.0 + +## Refactors + +- refactor: Configure `react-testing-library` and remove unnecessary testing dependencies [#686](https://github.com/reactioncommerce/example-storefront/pull/686) + +This is a major update that introduces the following refactors in PR [#667](https://github.com/reactioncommerce/example-storefront/pull/667) +- Use React hooks for various parts of the application including orders, cart, shop, translations and more. This refactor remove various HOC that added unnecessary complexity to the app. +- React context is now used and all previous uses of MobX have been removed. Using React context greatly simplifies local states management. +- Simple translation helpers have been added to support multi-lingual shops. See the `useTranslation` React hook for more details. +- Next.js has been update to use version 9.4.1, which includes support for [SSG](https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support)(Static Site Generation). By default product pages are re-regenerated every two minutes. Further, various other features, such as dynamic routes and API routes are now used, either a dynamic route or API +as appropriate. +- Various components form the Reaction component library have been removed in favor of using the new Reaction Catalyst design system. This is a stepping stone towards consolidating styling solutions use use only one. + + # v3.1.0 This release of `example-storefront` is designed to work with v3.x of the Reaction API. diff --git a/README.md b/README.md index a36586bc76..b407c88d35 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [Reaction Commerce](http://reactioncommerce.com) is an API-first, headless commerce platform built using Node.js, React, and GraphQL. It plays nicely with npm, Docker and Kubernetes. -This 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 prefered client-side technology. While we feel our example storefront is full featured enough to use in production, it may be missing features your shop requires at this time. +This 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 prefered 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. ## Features Reaction 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. @@ -17,7 +17,6 @@ This example storefront is built with [Next.js](https://nextjs.org/), [React](ht - Payments with [Stripe](https://stripe.com/) - Analytics with [Segment](https://segment.com/) or any other provider - 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/) -- Fully-configured test suite: Jest snapshot testing, Mocha integration testing - Written in ES6, configured with ES6 - Containerized with Docker @@ -62,13 +61,22 @@ Read the docs for [setting up Segment or a custom analytics tracker](docs/tracki ## Development The 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: - ```sh cd example-storefront ``` ### Build and run in development mode with logs +Create a symbolic link to use the development Docker image: +``` +ln -s docker-compose.dev.yml docker-compose.override.yml +``` + +If running for the first time or environment variables in `.env.example` have changed execute the command below to update environment variables. +``` +./bin/setup +``` +Start the storefront by executing: ```sh docker-compose up -d && docker-compose logs -f ``` @@ -100,11 +108,6 @@ Run tests locally without cache (this can be helpful if changes aren't showing u docker-compose run --rm web yarn test --no-cache ``` -To update a failing snapshot (if you've made changes to a component) -```sh -docker-compose run --rm web yarn test -u -``` - To run Snyk security tests (this will run tests in the same way as CI) ```sh docker-compose run --rm web sh -c "cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test" @@ -182,13 +185,14 @@ Sometimes it is helpful during development to make a production build of the app Run this command to build a Docker image with the production build of the app in it: ```sh -docker build -t reaction-storefront . +docker build --network=host -t reactioncommerce/example-storefront:X.X.X . ``` +Where X.X.X indicates the tag version you want to use, i.e. `3.1.0` Then, to start the app on your machine, make sure the Reaction API container is already running and enter: ```sh -docker run -it --name storefront -p 4000:4000 --env-file .env --network reaction.localhost reaction-storefront +docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X ``` _**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._