From b0aa1e1bb015e6313557640c804baeb6d3efbbcd Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Wed, 27 Feb 2019 10:01:32 -0800 Subject: [PATCH 1/3] docs: how to test component library locally Signed-off-by: Erik Kieckhafer --- styleguide.config.js | 4 +++ styleguide/src/sections/LocalDevelopment.md | 36 +++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 styleguide/src/sections/LocalDevelopment.md diff --git a/styleguide.config.js b/styleguide.config.js index d69ebe770..3324cdecc 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -378,6 +378,10 @@ module.exports = { { name: "Understanding Component References", content: "styleguide/src/sections/ComponentsContext.md" + }, + { + name: "Developing Locally Inside Another Project", + content: "styleguide/src/sections/LocalDevelopment.md" } ] }, diff --git a/styleguide/src/sections/LocalDevelopment.md b/styleguide/src/sections/LocalDevelopment.md new file mode 100644 index 000000000..ad74b96fe --- /dev/null +++ b/styleguide/src/sections/LocalDevelopment.md @@ -0,0 +1,36 @@ +If you'd like to see your changes locally inside of another project, such as the [Reaction Operator UI](https://github.com/reactioncommerce/reaction) or the [Reaction Storefront](https://github.com/reactioncommerce/reaction-next-starterkit), it's possible to link your local version of this Component Library using the following steps: + +1. `cd` into your local version of the [Reaction Component Library](https://github.com/reactioncommerce/reaction-component-library), and run the following commands: +``` +yarn install +cd package` +yarn install +yarn run build +``` + +Next, `cd` into the local version of the repository you'd like to use the local `Component Library` inside. Add the following line to the `volumes:` portion of the `docker-compose.yml` file: + +Inside `Reaction Storefront`: + +```diff +volumes: + - $HOME/.cache/yarn-offline-mirror:/home/node/.cache/yarn-offline-mirror + - web-yarn:/home/node/.cache/yarn + - .:/usr/local/src/reaction-app + - empty_node_modules:/usr/local/src/reaction-app/node_modules # do not link node_modules in, and persist it between dc up runs + - node_modules:/usr/local/src/node_modules ++ - /{Path-to-your-local-repo}/reaction-component-library/package/dist:/usr/local/src/reaction-app/node_modules/@reactioncommerce/components +``` + +Inside `Reaction Operator UI`: +```diff +volumes: + - $HOME/.cache/yarn-offline-mirror:/home/node/.cache/yarn-offline-mirror + - web-yarn:/home/node/.cache/yarn + - .:/usr/local/src/reaction-app + - empty_node_modules:/usr/local/src/reaction-app/node_modules # do not link node_modules in, and persist it between dc up runs + - node_modules:/usr/local/src/node_modules ++ - /{Path-to-your-local-repo}/reaction-component-library/package/dist:/usr/local/src/node_modules/@reactioncommerce/components +``` + +Next, run `docker-compose up -d` like normal to access the app in your browser and test it. Be sure to remove and not commit the added line from `docker-compose.yml` when you are done testing. From 23ac3ce7a88fe1bc9887207ffbdb51e0a4b86835 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Wed, 27 Feb 2019 10:10:51 -0800 Subject: [PATCH 2/3] refactor: fix formatting issues Signed-off-by: Erik Kieckhafer --- styleguide/src/sections/LocalDevelopment.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/styleguide/src/sections/LocalDevelopment.md b/styleguide/src/sections/LocalDevelopment.md index ad74b96fe..84909fddb 100644 --- a/styleguide/src/sections/LocalDevelopment.md +++ b/styleguide/src/sections/LocalDevelopment.md @@ -1,14 +1,15 @@ If you'd like to see your changes locally inside of another project, such as the [Reaction Operator UI](https://github.com/reactioncommerce/reaction) or the [Reaction Storefront](https://github.com/reactioncommerce/reaction-next-starterkit), it's possible to link your local version of this Component Library using the following steps: -1. `cd` into your local version of the [Reaction Component Library](https://github.com/reactioncommerce/reaction-component-library), and run the following commands: -``` +- `cd` into your local version of the [Reaction Component Library](https://github.com/reactioncommerce/reaction-component-library), and run the following commands: + +```js yarn install -cd package` +cd package yarn install yarn run build ``` -Next, `cd` into the local version of the repository you'd like to use the local `Component Library` inside. Add the following line to the `volumes:` portion of the `docker-compose.yml` file: +- Next, `cd` into the local version of the repository you'd like to use the local `Component Library` inside. Add the following line to the `volumes:` portion of the `docker-compose.yml` file: Inside `Reaction Storefront`: @@ -33,4 +34,6 @@ volumes: + - /{Path-to-your-local-repo}/reaction-component-library/package/dist:/usr/local/src/node_modules/@reactioncommerce/components ``` -Next, run `docker-compose up -d` like normal to access the app in your browser and test it. Be sure to remove and not commit the added line from `docker-compose.yml` when you are done testing. +- Next, run `docker-compose up -d` like normal to access the app in your browser and test it. + +**Be sure to remove and not commit the added line from `docker-compose.yml` when you are done testing.** From d61bc338d5070243c9842256d655298726594f8f Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Wed, 27 Feb 2019 10:16:12 -0800 Subject: [PATCH 3/3] refactor: error fix Signed-off-by: Erik Kieckhafer --- styleguide/src/sections/LocalDevelopment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styleguide/src/sections/LocalDevelopment.md b/styleguide/src/sections/LocalDevelopment.md index 84909fddb..a7fb30fbc 100644 --- a/styleguide/src/sections/LocalDevelopment.md +++ b/styleguide/src/sections/LocalDevelopment.md @@ -2,7 +2,7 @@ If you'd like to see your changes locally inside of another project, such as the - `cd` into your local version of the [Reaction Component Library](https://github.com/reactioncommerce/reaction-component-library), and run the following commands: -```js +```diff yarn install cd package yarn install