Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
CANONICAL_URL=http://localhost:4000
ENABLE_SPA_ROUTING=true
BUILD_GRAPHQL_URL=http://localhost:3000/graphql
EXTERNAL_GRAPHQL_URL=http://localhost:3000/graphql
INTERNAL_GRAPHQL_URL=http://api.reaction.localhost:3000/graphql
OAUTH2_ADMIN_PORT=4445
OAUTH2_ADMIN_URL=http://hydra.reaction.localhost:4445
OAUTH2_AUTH_URL=http://localhost:4444/oauth2/auth
OAUTH2_CLIENT_ID=example-storefront
OAUTH2_CLIENT_SECRET=CHANGEME
OAUTH2_PUBLIC_LOGOUT_URL=http://localhost:4444/oauth2/sessions/logout
OAUTH2_HOST=hydra.reaction.localhost
OAUTH2_IDP_PUBLIC_CHANGE_PASSWORD_URL=http://localhost:4100/account/change-password?email=EMAIL&from=FROM
OAUTH2_IDP_HOST_URL=http://identity.reaction.localhost:4100
OAUTH2_TOKEN_URL=http://hydra.reaction.localhost:4444/oauth2/token
PORT=4000
SEGMENT_ANALYTICS_SKIP_MINIMIZE=true
SEGMENT_ANALYTICS_WRITE_KEY=ENTER_KEY_HERE
SESSION_MAX_AGE_MS=2592000000
SESSION_SECRET=CHANGEME
STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE
STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE
13 changes: 1 addition & 12 deletions .env.prod
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
CANONICAL_URL=http://localhost:4000
ENABLE_SPA_ROUTING=true
BUILD_GRAPHQL_URL=http://localhost:3000/graphql
EXTERNAL_GRAPHQL_URL=http://localhost:3000/graphql
INTERNAL_GRAPHQL_URL=http://api.reaction.localhost:3000/graphql
OAUTH2_ADMIN_PORT=4445
OAUTH2_ADMIN_URL=http://hydra.reaction.localhost:4445
OAUTH2_AUTH_URL=http://localhost:4444/oauth2/auth
OAUTH2_CLIENT_ID=example-storefront
OAUTH2_CLIENT_SECRET=CHANGEME
OAUTH2_PUBLIC_LOGOUT_URL=http://localhost:4444/oauth2/sessions/logout
OAUTH2_HOST=hydra.reaction.localhost
OAUTH2_IDP_PUBLIC_CHANGE_PASSWORD_URL=http://localhost:4100/account/change-password?email=EMAIL&from=FROM
OAUTH2_IDP_HOST_URL=http://identity.reaction.localhost:4100
OAUTH2_TOKEN_URL=http://hydra.reaction.localhost:4444/oauth2/token
PORT=4000
SEGMENT_ANALYTICS_SKIP_MINIMIZE=true
SEGMENT_ANALYTICS_WRITE_KEY=ENTER_KEY_HERE
SESSION_MAX_AGE_MS=2592000000
SESSION_SECRET=CHANGEME
STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE
STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE
58 changes: 43 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
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.

Check out the full list of Reaction [features](https://www.reactioncommerce.com/features) and [release history](https://reactioncommerce.com/roadmap) for more info.
Expand All @@ -25,12 +26,11 @@ This example storefront is built with [Next.js](https://nextjs.org/), [React](ht
Follow the [Reaction Platform docs](https://docs.reactioncommerce.com/docs/installation-reaction-platform) to install and run all the services necessary to run the storefront:

| Directory: Service | URL |
|-----------------------------------------------------------------------------------------------|--------------------------------------------------|
| --------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL API | [localhost:3000/graphql](localhost:3000/graphql) |
| [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL Playground developer tool | [localhost:3000/graphql](localhost:3000/graphql) |
| [`reaction`](https://github.com/reactioncommerce/reaction): Reaction Admin | [localhost:4080](localhost:4080) |
| [`reaction`](https://github.com/reactioncommerce/reaction): MongoDB | [localhost:27017](localhost:27017) |
| [`reaction-hydra`](https://github.com/reactioncommerce/reaction-hydra): Authentication | [localhost:4444](localhost:4444) |
| [`example-storefront`](https://github.com/reactioncommerce/example-storefront): Storefront | [localhost:4000](localhost:4000) |

**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.
Expand All @@ -51,32 +51,37 @@ When running the storefront and Reaction for the first time, you will need to co
Read the docs for [setting up Segment or a custom analytics tracker](docs/tracking-events.md)

## Documentation

- [Example Storefront full documentation](./docs)
- [Example Storefront Component Library repository](https://github.com/reactioncommerce/reaction-component-library), [documentation](https://github.com/reactioncommerce/reaction-component-library/tree/master/docs), and [component documentation](http://designsystem.reactioncommerce.com/)
- [Reaction Docs: Using GraphQL](https://docs.reactioncommerce.com/docs/graphql-using)
- [Reaction Docs: Testing with Jest](https://docs.reactioncommerce.com/docs/testing-reaction)
- [Reaction Docs: Developing with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development
)
- [Reaction Docs: Developing with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development)

## 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
```
Expand All @@ -94,26 +99,31 @@ docker-compose run --rm --service-ports web yarn start
```sh
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. See Yarn section below for more examples.

### Run tests in container

Run tests locally

```sh
docker-compose run --rm web yarn test
```

Run tests locally without cache (this can be helpful if changes aren't showing up)

```sh
docker-compose run --rm web yarn test --no-cache
```

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"
```

To run ESLint

```sh
docker-compose run --rm web eslint src
```
Expand All @@ -129,13 +139,15 @@ You can use the Google Chrome DevTools to debug the code running in the Node.js

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**

⚠️ Always rebuild the image and start a new container after modifying yarn.lock or Dockerfile!

```
docker-compose run --rm web yarn install
docker-compose down --rmi local
Expand All @@ -155,25 +167,29 @@ Sometimes we need to test the [Example Storefront Component Library](https://git
1. Inside your `.env` file, change `INTERNAL_GRAPHQL_URL` to equal `http://localhost:3000/graphql`, the same as the `EXTERNAL_GRAPHQL_URL`
1. Start the storefront locally by running the command `export $(cat .env | xargs) && yarn dev`
1. Your storefront 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 library `package/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 `yarn add` each of those packages in the component library `package/dist` folder. (This folder is gitignored anyway.)
1. After your changes are tested, shut down the storefront by running the command `CTRL+C`
1. Run `yarn unlink "@reactioncommerce/components"` in the storefront repo folder
1. `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
1. Undo the renaming of your `.yarnrc` file
1. Undo the URL change inside your `.env` file

## Clean up containers

Stop, and retain containers:

```sh
docker-compose stop
```

Stop, and remove containers:

```sh
docker-compose down
```

Stop, and remove containers, volumes and built images:

```sh
docker-compose down -v --rmi local
```
Expand All @@ -187,6 +203,7 @@ Run this command to build a Docker image with the production build of the app in
```sh
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:
Expand Down Expand Up @@ -214,28 +231,37 @@ Want to request a feature? Use our [Reaction Feature Requests repository](https:
We 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.

### Pull Request guidelines

Pull requests should pass all automated tests, style, and security checks.

#### Automated Tests

Your code should pass all [acceptance tests and unit tests](https://docs.reactioncommerce.com/reaction-docs/trunk/testing-reaction). Run

```sh
docker-compose run --rm web yarn test
```

to 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.

```sh
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
```

#### Eslint

We require that all code contributed to Reaction follows [Reaction's ESLint rules](https://github.com/reactioncommerce/reaction-eslint-config). You can run

```
docker-compose run --rm web eslint src
```

to run ESLint against your code locally.

Please follow the [Reaction Code Style Guide](https://docs.reactioncommerce.com/docs/styleguide). Check out our guides to [JSDoc](https://docs.reactioncommerce.com/docs/jsdoc-style-guide), [Git](https://docs.reactioncommerce.com/docs/git-style-guide), [error handling](https://docs.reactioncommerce.com/docs/error-handling-guide), [logging](https://docs.reactioncommerce.com/docs/logging), and [React](https://docs.reactioncommerce.com/docs/react-best-practices).
Expand All @@ -245,7 +271,9 @@ We also request that you follow the our [pull request template](https://docs.rea
Get more details in our [Contributing Guide](https://docs.reactioncommerce.com/docs/contributing-to-reaction).

### Developer Certificate of Origin

We 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:

```
Signed-off-by: Jane Doe <jane.doe@example.com>
```
Expand All @@ -258,20 +286,20 @@ We use the [Probot DCO GitHub app](https://github.com/apps/dco) to check for DCO

If 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.


## License
Copyright 2019 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
Copyright 2019 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.
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.

[![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)
5 changes: 2 additions & 3 deletions apiUtils/localeMiddleware.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import redirect from "./redirect";

export default (req, res) => {
const {
query: { slug },
_parsedUrl
query: { slug, ...rest }
} = req;

const fallback = "de";
Expand Down Expand Up @@ -41,7 +40,7 @@ export default (req, res) => {
found = fallback;
}

const queryPart = (_parsedUrl && _parsedUrl.query) ? `?${_parsedUrl.query}` : "";
const queryPart = rest ? (`?${Object.keys(rest).map((k) => `${k}=${rest[k]}`).join("&")}`) : "";

if (slug) {
return redirect(res, 302, `/${found}${slug ? `/${slug.join("/")}` : ""}${queryPart}`);
Expand Down
53 changes: 0 additions & 53 deletions apiUtils/passportMiddleware.js

This file was deleted.

6 changes: 2 additions & 4 deletions bin/start
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,5 @@ IFS="$(printf "\n\t")"

cd "$(dirname "$0")/.."
yarn install
printf "Waiting for Hydra service... "
./bin/wait-for.sh "${OAUTH2_HOST}:${OAUTH2_ADMIN_PORT}"
printf "Hydra service found!\n"
yarn start:dev

yarn start:dev
Loading