diff --git a/CHANGELOG.md b/CHANGELOG.md index 9228a1c60..c9ecee019 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,24 @@ +# 12/31/2019 + +- dev admin only read keys in TTY mode + +## Packages + +- `electrode-archetype-react-app@6.5.22` `(6.5.21 => 6.5.22)` +- `electrode-archetype-react-app-dev@6.5.22` `(6.5.21 => 6.5.22)` + +## Commits + +- `packages/electrode-archetype-react-app[-dev]` + + - Fix tests ([#1475](https://github.com/electrode-io/electrode/pull/1475)) [commit](http://github.com/electrode-io/electrode/commit/a3114aac60257648671a449121a5c8d43e9a7ff8) + - dev admin only read keys in TTY mode ([#1470](https://github.com/electrode-io/electrode/pull/1470)) [commit](http://github.com/electrode-io/electrode/commit/9cd31c465b9b30478e128ec0a999324703deda26) + +- `docs` + + - link fixes ([#1476](https://github.com/electrode-io/electrode/pull/1476)) [commit](http://github.com/electrode-io/electrode/commit/4ce9bf9e83d5295a7596dfce7c2b163467f5f5a1) + - doc link fixes 2 ([#1479](https://github.com/electrode-io/electrode/pull/1479)) [commit](http://github.com/electrode-io/electrode/commit/ea206268010ee0fa6bd8a010464bef3dbaac80df) + # 12/16/2019 ## Packages diff --git a/docs/README.md b/docs/README.md index 8d1d725e3..145d7b635 100644 --- a/docs/README.md +++ b/docs/README.md @@ -28,7 +28,7 @@ Do you find Electrode useful? Please send us your encouragement with a github star. Did you find an issue? Would you like to help with the project? -Please See our [contributing guide] for instructions on [submitting a PR] or [reporting an issue]. +Please see our [contributing guide] for instructions on [submitting a PR] or [reporting an issue]. ## Packages @@ -47,7 +47,7 @@ The [Electrode main repo] uses [Lerna] to manage multiple related packages that Electrode Ignite allows you to quickly create a Universal React App or Component with support from the archetypes, and server in Node with Hapi or Express. For information on how to use the modules, -check out [Get Started With Electrode App](./chapter1/quick-start/start-with-app.html). +check out [Get Started With Electrode App](chapter1/quick-start/start-with-app.md). ## Sample Applications diff --git a/docs/chapter1/advanced/powerful-electrode-tools/electrify.md b/docs/chapter1/advanced/powerful-electrode-tools/electrify.md index c9391f11f..155ee934f 100644 --- a/docs/chapter1/advanced/powerful-electrode-tools/electrify.md +++ b/docs/chapter1/advanced/powerful-electrode-tools/electrify.md @@ -26,7 +26,7 @@ $ npm install --save electrode-electrify ### Example Applications -* [Electrode Boilerplate](https://github.com/electrode-io/electrode-boilerplate-universal-react-node#electrode-electrify) +* [Electrode Boilerplate](https://github.com/electrode-io/electrode/tree/master/samples/universal-react-node#electrode-electrify) ## Usage diff --git a/docs/chapter1/advanced/powerful-electrode-tools/electrode-explorer.md b/docs/chapter1/advanced/powerful-electrode-tools/electrode-explorer.md index c5d58b464..07b958e4e 100644 --- a/docs/chapter1/advanced/powerful-electrode-tools/electrode-explorer.md +++ b/docs/chapter1/advanced/powerful-electrode-tools/electrode-explorer.md @@ -130,7 +130,7 @@ GHACCESS_TOKEN=YOUR_GITHUB_TOKEN NODE_ENV=production node . ## Deploy -Since this is an Electrode application, it can be deployed the same way as any other Electrode app. You can use [Heroku](../../quick-start/deploy-your-app.md) by following the steps in our Quick Start or use the [More Deployments](../../intermediate/more-deployments.md) as a resource. +Since this is an Electrode application, it can be deployed the same way as any other Electrode app. You can use [Heroku](/chapter1/further-develop-app/deploy-your-app.md) by following the steps in our Quick Start or use the [More Deployments](/chapter1/intermediate/more-deployments.md) as a resource. \*Just remember to set your GitHub token as an environment variable. diff --git a/docs/chapter1/advanced/stand-alone-modules.md b/docs/chapter1/advanced/stand-alone-modules.md index 52e9584b6..b523a40ea 100644 --- a/docs/chapter1/advanced/stand-alone-modules.md +++ b/docs/chapter1/advanced/stand-alone-modules.md @@ -1,6 +1,6 @@ # Stand Alone Modules -### Leveraging Stand-Alone Modules +## Leveraging Stand-Alone Modules Our flexible stand-alone modules are dedicated to optimizing performance in specific areas based on your application's needs. By "stand alone", we mean that these Electrode modules are agnostic of one another and you can use one or all of them in any Node platform to enhance your application's capabilities. Use our guides and examples below to plug them in. @@ -8,12 +8,12 @@ Our flexible stand-alone modules are dedicated to optimizing performance in spec * [Above the Fold Rendering](./stand-alone-modules/above-the-fold-rendering.md) is a React component wrapper that allows expensive components to skip Server Side Rendering. -* [Server Side Render Cache + Profiling](./stand-alone-modules/above-the-fold-rendering.md) is a module used to profile React Server Side Rendering performance and then cache expensive components to help you speed up SSR. +* [Server Side Render Cache + Profiling](./stand-alone-modules/server-side-render-caching-+-profiling.md) is a module used to profile React Server Side Rendering performance and then cache expensive components to help you speed up SSR. * [Stateless CSRF Validation](./stand-alone-modules/stateless-csrf-validation.md) is a Hapi plugin or Express middleware that enables stateless CSRF protection in case your app does not depend on server side persistence. * [Electrode Redux Router Engine](./stand-alone-modules/redux-router-engine.md) is a Hapi plugin or Express middleware that handles async data for React Server Side Rendering using [react-router](https://github.com/ReactTraining/react-router), Redux and the [Redux Server Rendering](http://redux.js.org/docs/recipes/ServerRendering.html) pattern. -### Bringing It All Together in an Advanced Electrode App +## Bringing It All Together in an Advanced Electrode App -By following the steps in the Getting Started: Advanced section, you will have a fully loaded Electrode application. It will consist of a Universal React and Node core, optimized module, and powerful tools that have solved some of our most challenging problems when it comes to Walmart's scale and market demands. Take a deeper look into our [Electrode Boilerplate](/chapter1/advanced/you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md) after you walk through our Stand Alone Modules and [Tools](powerful-electrode-tools.md). +By following the steps in the Getting Started: Advanced section, you will have a fully loaded Electrode application. It will consist of a Universal React and Node core, optimized module, and powerful tools that have solved some of our most challenging problems when it comes to Walmart's scale and market demands. Take a deeper look into our [Electrode Boilerplate](you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md) after you walk through our Stand Alone Modules and [Tools](powerful-electrode-tools.md). diff --git a/docs/chapter1/advanced/stand-alone-modules/above-the-fold-rendering.md b/docs/chapter1/advanced/stand-alone-modules/above-the-fold-rendering.md index e2071f732..81b1ed7dc 100644 --- a/docs/chapter1/advanced/stand-alone-modules/above-the-fold-rendering.md +++ b/docs/chapter1/advanced/stand-alone-modules/above-the-fold-rendering.md @@ -2,7 +2,7 @@ The [above-the-fold-only-server-render](https://github.com/electrode-io/above-the-fold-only-server-render) module is a React component for optionally skipping server side rendering of components outside above-the-fold \(or inside of the viewport\). This component helps render your components on the server that are above the fold and the remaining components on the client. -This module is a stand-alone module and can be configured to work in any [Electrode](#stateless-validation-electrode), [Express](#stateless-validation-express), or [Hapi](#stateless-validation-hapi) application. +This module is a stand-alone module and can be configured to work in any [Electrode](https://github.com/electrode-io/electrode), [Express.js](https://github.com/electrode-samples/express-example-with-standalone-electrode-modules), or [Hapi.js](https://github.com/electrode-samples/hapijs-example-with-standalone-electrode-modules) application. ### Why do we need this module? @@ -20,7 +20,7 @@ $ npm install --save above-the-fold-only-server-render ### Example Applications -* [Electrode Boilerplate](https://github.com/electrode-io/electrode-boilerplate-universal-react-node#above-the-fold-only-server-render) +* [Electrode Boilerplate](https://github.com/electrode-io/electrode/tree/master/samples/universal-react-node#above-the-fold-only-server-render) * [Express React Redux Webpack Example](https://github.com/docs-code-examples-electrode-io/express-react-redux-webpack#above-the-fold-only-server-render) diff --git a/docs/chapter1/advanced/stand-alone-modules/confippet.md b/docs/chapter1/advanced/stand-alone-modules/confippet.md index 2236ba843..862dcd72b 100644 --- a/docs/chapter1/advanced/stand-alone-modules/confippet.md +++ b/docs/chapter1/advanced/stand-alone-modules/confippet.md @@ -25,7 +25,7 @@ $ npm install --save electrode-confippet ### Example Applications -* [Electrode Boilerplate](https://github.com/electrode-io/electrode-boilerplate-universal-react-node#electrode-confippet) +* [Electrode Boilerplate](https://github.com/electrode-io/electrode/tree/master/samples/universal-react-node#electrode-confippet) * [Express Example with Standalone Modules](https://github.com/docs-code-examples-electrode-io/express-example-with-standalone-electrode-modules#electrode-confippet) @@ -33,22 +33,22 @@ $ npm install --save electrode-confippet ## Usage -* [Getting Started](https://docs.electrode.io/other/stand-alone-modules/confippet#getting-started) -* [configuration Composition](https://docs.electrode.io/other/stand-alone-modules/confippet#config-composition) -* [Environment Variables](https://docs.electrode.io/other/stand-alone-modules/confippet#environment-variables) -* [Using Templates](https://docs.electrode.io/other/stand-alone-modules/confippet#using-templates) -* [Usage in Node Modules](https://docs.electrode.io/other/stand-alone-modules/confippet#usage-in-node-modules) -* [Customization](https://docs.electrode.io/other/stand-alone-modules/confippet#customization) +* [Getting Started](#getting-started) +* [Configuration Composition](#config-composition) +* [Environment Variables](#environment-variables) +* [Using Templates](#using-templates) +* [Usage in Node Modules](#usage-in-node-modules) +* [Customization](#customization) ### Getting Started -Confippet can be integrated seamlessly into any existing [Express](https://docs.electrode.io/other/stand-alone-modules/confippet#express-setup), [Hapi](https://docs.electrode.io/other/stand-alone-modules/confippet#hapi-setup) or [Electrode](https://docs.electrode.io/other/stand-alone-modules/confippet#electrode-setup) application. +Confippet can be integrated seamlessly into any existing [Express](#express-setup), [Hapi](#hapi-setup) or [Electrode](#electrode-setup) application. For example, let's say that in our application we need to access a database that is running locally in our development environment but is running on a specific hostname in our production environment. We would like to be able to get the correct hostname in our code based on the current environment. Confippet can help us with this. Follow the setup instructions for this example depending on your app's framework: -* [Electrode](https://docs.electrode.io/other/stand-alone-modules/confippet#electrode-setup) -* [Express](https://docs.electrode.io/other/stand-alone-modules/confippet#express-setup) -* [Hapi](https://docs.electrode.io/other/stand-alone-modules/confippet#hapi-setup) +* [Electrode](#electrode-setup) +* [Express](#express-setup) +* [Hapi](#hapi-setup) #### _**Electrode Setup**_ @@ -377,7 +377,7 @@ Confippet's `presetConfig` composes together files in the `config/` directory, i Where: -* `EXT` can be any of `["json", "yaml", "js"]`. Confippet will load all of them, in that order. Each time it finds a configuration file, the values in that file will be loaded and merged into the configuration store. So `js` overrides `yaml`, which overrides `json`. You can add handlers for other file types and change their loading order—see [composeConfig](/chapter1/advanced/stand-alone-modules/confippet.md) for further details. +* `EXT` can be any of `["json", "yaml", "js"]`. Confippet will load all of them, in that order. Each time it finds a configuration file, the values in that file will be loaded and merged into the configuration store. So `js` overrides `yaml`, which overrides `json`. You can add handlers for other file types and change their loading order—see [composeConfig](https://github.com/electrode-io/electrode-confippet/blob/master/compose.md) for further details. * `{instance}` is your app's instance string in multi-instance deployments \(specified by the `NODE_APP_INSTANCE` environment variable\). * `{short_hostname}` is your server name up to the first dot. @@ -406,7 +406,7 @@ Confippet reads the following environment variables when composing a configurati * `NODE_CONFIG`- You can set this to a valid JSON string and Confippet will parse it to override the configuration. * `CONFIPPET*`- Any environment variables that starts with `CONFIPPET` will be parsed as JSON strings to override the configuration. -### Using Templates {#using-templates} +### Using Templates Values in your configuration files can be templates, which will be resolved with a preset context. See [processConfig](https://github.com/electrode-io/electrode-confippet/blob/master/templates.md) for more information about how to use configuration value templates. diff --git a/docs/chapter1/advanced/stand-alone-modules/redux-router-engine.md b/docs/chapter1/advanced/stand-alone-modules/redux-router-engine.md index ceabd6efa..f69447bca 100644 --- a/docs/chapter1/advanced/stand-alone-modules/redux-router-engine.md +++ b/docs/chapter1/advanced/stand-alone-modules/redux-router-engine.md @@ -20,7 +20,7 @@ The Electrode Redux Router Engine is a tool that handles asynchronous data for R - [Route Redux Init Example](#route-redux-init-example) - [`options` param](#options-param) - [More Route Redux Init Details](#more-route-redux-init-details) -- [Redux Router Engine](#redux-router-engine-1) +- [Redux Router Engine](#the-redux-router-engine) - [Electrode](#electrode) - [Hapi/Express](#hapiexpress) - [Redirect](#redirect) @@ -212,9 +212,9 @@ export default function reduxInit(options) { - In both cases you either have to manually process results from your child routes in `options.inits`, or you do every thing in the top route's `init` only. -## Redux Router Engine +## The Redux Router Engine -The [redux-router engine](#redux-router-engine) is initialized by passing a set of [options](#redux-router-engine-api) including [your react router routes](#define-your-routes) definition. +The Redux Router Engine is initialized by passing a set of [options](#apis) including [your react router routes](#define-your-routes) definition. The `ReduxRouterEngine` is stand-alone and can be used in **any** Redux/React application that runs on Express, Hapi or [WalmartLab's Electrode Platform](http://www.electrode.io/). Here's how to configure the engine depending on your framework: diff --git a/docs/chapter1/advanced/stand-alone-modules/server-side-render-caching-+-profiling.md b/docs/chapter1/advanced/stand-alone-modules/server-side-render-caching-+-profiling.md index d7a71783f..03e4a01d7 100644 --- a/docs/chapter1/advanced/stand-alone-modules/server-side-render-caching-+-profiling.md +++ b/docs/chapter1/advanced/stand-alone-modules/server-side-render-caching-+-profiling.md @@ -4,7 +4,7 @@ Use the The electrode-react-ssr-caching module to optimize React SSR with profil The [electrode-react-ssr-caching](https://github.com/electrode-io/electrode-react-ssr-caching) module supports profiling React Server Side Rendering time to enable component caching to help you speed up Server Side Rendering of your components. -This module is a stand-alone module and can be configured to work in any [Electrode](#stateless-validation-electrode), [Express](#stateless-validation-express), or [Hapi](#stateless-validation-hapi) application. +This module is a stand-alone module and can be configured to work in any [Electrode](https://github.com/electrode-io/electrode), [Express.js](https://github.com/electrode-samples/express-example-with-standalone-electrode-modules), or [Hapi.js](https://github.com/electrode-samples/hapijs-example-with-standalone-electrode-modules) application. ## Module: [electrode-react-ssr-caching](https://github.com/electrode-io/electrode-react-ssr-caching) @@ -16,7 +16,7 @@ $ npm install --save electrode-react-ssr-caching ### Example Applications -* [Electrode Boilerplate](https://github.com/electrode-io/electrode-boilerplate-universal-react-node#electrode-react-ssr-caching) +* [Electrode Boilerplate](https://github.com/electrode-io/electrode/tree/master/samples/universal-react-node#electrode-react-ssr-caching) * [Express React Redux Webpack Example](https://github.com/docs-code-examples-electrode-io/express-react-redux-webpack#electrode-react-ssr-caching) diff --git a/docs/chapter1/advanced/stand-alone-modules/stateless-csrf-validation.md b/docs/chapter1/advanced/stand-alone-modules/stateless-csrf-validation.md index 5b6d8557f..c6bfb9b1c 100644 --- a/docs/chapter1/advanced/stand-alone-modules/stateless-csrf-validation.md +++ b/docs/chapter1/advanced/stand-alone-modules/stateless-csrf-validation.md @@ -35,7 +35,7 @@ $ npm install --save electrode-csrf-jwt ### Example Applications -* [Electrode Boilerplate](https://github.com/electrode-io/electrode-boilerplate-universal-react-node#electrode-csrf-jwt) +* [Electrode Boilerplate](https://github.com/electrode-io/electrode/tree/master/samples/universal-react-node#electrode-csrf-jwt) * [Express Example with Standalone Modules](https://github.com/docs-code-examples-electrode-io/express-example-with-standalone-electrode-modules#electrode-csrf-jwt) @@ -66,7 +66,7 @@ Other configuration properties are optional and follow the [same usage as jsonwe ### Electrode {#stateless-validation-electrode} -All server configurations in [Electrode apps](../../../what-is-electrode.md) are handled by the versatile [confippet](./confippet.md) module. The Stateless CSRF JWT Validation module can be easily configured by adding the following property to `config/default.json`: +All server configurations in [Electrode apps](/overview/what-is-electrode.md) are handled by the versatile [confippet](./confippet.md) module. The Stateless CSRF JWT Validation module can be easily configured by adding the following property to `config/default.json`: ``` { @@ -184,4 +184,4 @@ function doGet() { In this example a `POST` request to `/2` can be made using the token retrieved from the `/1` endpoint. -You can checkout our [Electrode Boilerplate React Application](https://github.com/electrode-io/electrode#boilerplate-universal-react-node) for a more detailed example. +You can checkout our [Electrode Boilerplate React Application](https://github.com/electrode-io/electrode/tree/master/samples/universal-react-node) for a more detailed example. diff --git a/docs/chapter1/advanced/you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md b/docs/chapter1/advanced/you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md index ef42fbf53..0a31205fb 100644 --- a/docs/chapter1/advanced/you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md +++ b/docs/chapter1/advanced/you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md @@ -2,7 +2,7 @@ ### Maximum Performance Out-of-the-Box -In our [Getting Started](/chapter1.md) section, we introduced you to our Yeoman Electrode [Generator](https://github.com/electrode-io/electrode#yeoman-generator) and we constructed an impressive application with the built in technologies that the simple `yo electrode` command gave us (read our Getting Started: [What's Inside](../quick-start/whats-inside.md) to learn more): +In our **Getting Started** section, we introduced you to our Yeoman Electrode [Generator](https://github.com/electrode-io/electrode#yeoman-generator) and we constructed an impressive application with the built in technologies that the simple `yo electrode` command gave us (read our Getting Started: [What's Inside](/chapter1/further-develop-app/whats-inside.md) to learn more): - [React](https://facebook.github.io/react/index.html) @@ -36,9 +36,9 @@ In our [Getting Started](/chapter1.md) section, we introduced you to our Yeoman - [Electrode-Docgen](https://github.com/electrode-io/electrode-docgen) -This is the beginning foundation of the [Electrode Boilerplate](./you-can-view-an-example-bundleanalyzetsv-output-using-the-electrode-boilerplate-code.md). You have learned in the [Stand Alone Modules](./stand-alone-modules.md) section that each of the Electrode modules are agnostic and can be used individually to enhance one specific area of your application. However, integrated together, you have a supercharged application; one that is capable of handling the complex problems we face at WalmartLabs and reach maximum efficiency and performance. +This is the beginning foundation of the Electrode Boilerplate. You have learned in the [Stand Alone Modules](./stand-alone-modules.md) section that each of the Electrode modules are agnostic and can be used individually to enhance one specific area of your application. However, integrated together, you have a supercharged application; one that is capable of handling the complex problems we face at WalmartLabs and reach maximum efficiency and performance. -This boilerplate includes the [Electrode Generator](../quick-start/whats-inside.md) and it also has the following stand-alone modules and tools built in for peak optimization right out-of-the-box: +This boilerplate includes the [Electrode Generator](/chapter1/further-develop-app/whats-inside.md) and it also has the following stand-alone modules and tools built in for peak optimization right out-of-the-box: - [Above the Fold Rendering](./stand-alone-modules/above-the-fold-rendering.md) - [Server Side Render Cache + Profiling](./stand-alone-modules/server-side-render-caching-+-profiling.md) diff --git a/docs/chapter1/further-develop-app/deploy-your-app.md b/docs/chapter1/further-develop-app/deploy-your-app.md index b71fd3961..5f1dc0cf8 100644 --- a/docs/chapter1/further-develop-app/deploy-your-app.md +++ b/docs/chapter1/further-develop-app/deploy-your-app.md @@ -135,4 +135,4 @@ Visit the app at the generated URL by using this command: $ heroku open ``` -And...you did it! Click [here](https://first-electrode-example-app.herokuapp.com/) for our deployed Heroku version. We will build even more in our [Getting Started: Intermediate](../Intermediate.md) and cover complex topics like routing, server plugins, and other powerful deployment software. +And...you did it! Click [here](https://first-electrode-example-app.herokuapp.com/) for our deployed Heroku version. We will build even more in our [Getting Started: Intermediate](/chapter1/intermediate/README.md) and cover complex topics like routing, server plugins, and other powerful deployment software. diff --git a/docs/chapter1/Intermediate.md b/docs/chapter1/intermediate/README.md similarity index 100% rename from docs/chapter1/Intermediate.md rename to docs/chapter1/intermediate/README.md diff --git a/docs/chapter1/intermediate/app-archetype/customize-config.md b/docs/chapter1/intermediate/app-archetype/customize-config.md index dc9c3f334..4a0072e04 100644 --- a/docs/chapter1/intermediate/app-archetype/customize-config.md +++ b/docs/chapter1/intermediate/app-archetype/customize-config.md @@ -6,7 +6,7 @@ You can extend or customize the configurations in your Electrode applications. T The webpack configuration for your app is generated by the archetype. While composing the webpack configuration, the archetype looks for the archetype/config folder at the project root of your app. -To override or extend the webpack configuration, refer to the chapter about [Overriding](webpack-config.md#overriding). +To override or extend the webpack configuration, refer to the section about [Overriding](webpack-config.md#overriding). ## Define Client Entry Points diff --git a/docs/chapter1/intermediate/app-archetype/load-dll.md b/docs/chapter1/intermediate/app-archetype/load-dll.md index 5fe91a6d0..cdef4e3f7 100644 --- a/docs/chapter1/intermediate/app-archetype/load-dll.md +++ b/docs/chapter1/intermediate/app-archetype/load-dll.md @@ -26,4 +26,4 @@ module.exports = { In development mode with `clap dev`, Electrode will ensure your DLL is properly loaded from your local. -[electrode dll archetype]: ./chapter1/dll-archetype +[electrode dll archetype]: ../dll-archetype/README.md diff --git a/docs/chapter1/intermediate/app-archetype/unit-tests.md b/docs/chapter1/intermediate/app-archetype/unit-tests.md index 8ca073235..2e6b78fec 100644 --- a/docs/chapter1/intermediate/app-archetype/unit-tests.md +++ b/docs/chapter1/intermediate/app-archetype/unit-tests.md @@ -13,6 +13,7 @@ To run your karma unit tests, simply place your tests in the `test` folder. And ### Disabling Karma If you prefer [Jest](#jest) only for writing your unit tests, then you can explicitly turn off Karma support and skip installing the dependencies required. To do that, use the `clap features` interactive command or use npm: + ```sh npm r electrode-archetype-opt-karma ``` @@ -40,6 +41,7 @@ module.exports = { ### Disabling Jest If you prefer [Karma](#Karma) only for writing your unit tests, then you can explicitly turn off Jest support and skip installing the dependencies required. To do that, use the `clap features` interactive command or use npm: + ```sh npm r electrode-archetype-opt-jest ``` diff --git a/docs/chapter1/intermediate/app-archetype/webpack-config.md b/docs/chapter1/intermediate/app-archetype/webpack-config.md index b785d95f9..5458c5e90 100644 --- a/docs/chapter1/intermediate/app-archetype/webpack-config.md +++ b/docs/chapter1/intermediate/app-archetype/webpack-config.md @@ -182,6 +182,6 @@ The `electrode-archetype-react-app-dev/config/webpack` file exports similar para - `options` - The [options](#options) for the app archetype's webpack configuration composition. - `compose` - The [webpack-config-composer] instance that the app archetype has setup. It contains all the webpack partials and composer profiles from the app archetype. -You can find this example in one of the [sample application](https://github.com/electrode-io/electrode/blob/master/samples/hapi-app/webpack.config.js). +You can find this example in [one of the sample applications](https://github.com/electrode-io/electrode/blob/master/samples/hapi-app/webpack.config.js). [webpack-config-composer]: https://www.npmjs.com/package/webpack-config-composer diff --git a/docs/chapter1/intermediate/build-a-progressive-web-app.md b/docs/chapter1/intermediate/build-a-progressive-web-app.md index 651e34fb7..bcd2e85e5 100644 --- a/docs/chapter1/intermediate/build-a-progressive-web-app.md +++ b/docs/chapter1/intermediate/build-a-progressive-web-app.md @@ -39,7 +39,7 @@ $ yo electrode # ... answer rest of the questions and wait for app to be generated ... ``` -_Follow Prerequisites and skip to _[_Push Notifications_](./build-a-progressive-web-app.md) +_Follow Prerequisites and skip to [Push Notifications](#push-notifications)._ ### Prerequisites @@ -202,7 +202,7 @@ Go ahead and click on the `Offline` checkbox in the Developer tools. Terminate y **NOTE: The **`Add to Homescreen` **banner will pop up only on Android devices with Chrome 42+. To simulate the banner on your desktop Chrome, navigate to **`Developer tools` **-> **`Applications` **-> **`Manifest` **and click on **`Add to homescreen`**.** -### Push notifications {#push-notifications} +### Push notifications The [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) requires a registered service worker so it can send notifications in the background when the web application isn't running. We already have our Service Worker generated with the help of `sw-config.js`. We only need to add a `Push` event to it. Create a new file `sw-events.js` inside the `client` directory and add the following to it: @@ -431,7 +431,7 @@ const mapDispatchToProps = (dispatch) => { export default connect(mapStateToProps, mapDispatchToProps)(Home); ``` -Make sure you update the `API_KEY` with the one you previously generated in [Prerequisites](http://www.electrode.io/docs/service_workers.html#prerequisites). +Make sure you update the `API_KEY` with the one you previously generated in [Prerequisites](#prerequisites). `navigator.serviceWorker.ready` is a promise that will resolve once a service worker is registered, and it returns a reference to the active [ServiceWorkerRegistration](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration). The showNotification() method of the ServiceWorkerRegistration interface creates a notification and returns a Promise that resolves to a [NotificationEvent](https://developer.mozilla.org/en-US/docs/Web/API/NotificationEvent). diff --git a/docs/chapter1/intermediate/build-a-server-plugin.md b/docs/chapter1/intermediate/build-a-server-plugin.md index 16c8a2756..4d984c94b 100644 --- a/docs/chapter1/intermediate/build-a-server-plugin.md +++ b/docs/chapter1/intermediate/build-a-server-plugin.md @@ -121,4 +121,4 @@ Set your token for heroku deployment: heroku config:set token='your-token-here' ``` -A great tool for testing your server requests is [Postman](https://www.getpostman.com/). Its user interface for viewing response objects and errors is incredible. For now, we will build out Your Awesome App. Navigate to [Intermediate: Add Routes](/docs/chapter1/intermediate/react-routes/add-routes.md), to add routing to the app and extend our UI to display our contributor array. +A great tool for testing your server requests is [Postman](https://www.getpostman.com/). Its user interface for viewing response objects and errors is incredible. For now, we will build out Your Awesome App. Navigate to [Intermediate: Add Routes](/chapter1/intermediate/react-routes/add-routes.md) to add routing to the app and extend our UI to display our contributor array. diff --git a/docs/chapter1/intermediate/component-archetype/README.md b/docs/chapter1/intermediate/component-archetype/README.md index ef2da5ec6..85a14fd7c 100644 --- a/docs/chapter1/intermediate/component-archetype/README.md +++ b/docs/chapter1/intermediate/component-archetype/README.md @@ -2,4 +2,4 @@ The Electrode Component Archetype helps developers quickly build React components. Recently, the WalmartLabs Electrode team made a significant restructure to the component directory using Lerna to manage the component structure. With the new structure, you can have multiple components inside the package directory and a single demo app to test all the components. Generally, you keep one component in one repo, but you can also have multiple smaller components that complement each other. We also moved demo-server to a directory outside of the packages, imported components from packages, and presented components using the demo app. -Let's go through the most important sections to understand the new Component Archetype together and we will cover how to generate Electrode components by using the latest Electrode generators in the [Create an Electrode Component](../create-a-electrode-component.md) section. +Let's go through the most important sections to understand the new Component Archetype together and we will cover how to generate Electrode components by using the latest Electrode generators in the [Create an Electrode Component](/chapter1/intermediate/create-a-electrode-component.md) section. diff --git a/docs/chapter1/intermediate/component-archetype/component-archetype-structure.md b/docs/chapter1/intermediate/component-archetype/component-archetype-structure.md index b5eaabd3e..2ffc026e2 100644 --- a/docs/chapter1/intermediate/component-archetype/component-archetype-structure.md +++ b/docs/chapter1/intermediate/component-archetype/component-archetype-structure.md @@ -2,7 +2,7 @@ In the previous component archetype, we used `demo-server` to demo and test the React component inside of the component itself, which adds a risk of confusion. To clarify, we removed `demo-server` for the component archetype to target the build, eslint check, and unit tests. -At the same time, in the [new electrode components](../create-a-electrode-component.md), we demonstrate components using `/demo-app` where we import components from `/packages/`. The latest electrode components can be generated by the latest electrode-generator. +At the same time, in the [new electrode components](/chapter1/intermediate/create-a-electrode-component.md), we demonstrate components using `/demo-app` where we import components from `/packages/`. The latest electrode components can be generated by the latest electrode-generator. The new structure of the Electrode React Component Archetype is shown below. diff --git a/docs/chapter1/intermediate/component-archetype/webpack-config.md b/docs/chapter1/intermediate/component-archetype/webpack-config.md index a56a1ccae..96031a606 100644 --- a/docs/chapter1/intermediate/component-archetype/webpack-config.md +++ b/docs/chapter1/intermediate/component-archetype/webpack-config.md @@ -35,4 +35,4 @@ Below are the partial configurations for a new component archetype webpack struc --- -After understanding the new Component Archetype Structure, it's time to generate Electrode components by using the latest Electrode generators. With `generator-electrode`, we can create dynamic and performant Lerna-structured Electrode components. Let's explore and personalize this in our next section, [Create an Electrode Component.](../create-a-electrode-component.md) +After understanding the new Component Archetype Structure, it's time to generate Electrode components by using the latest Electrode generators. With `generator-electrode`, we can create dynamic and performant Lerna-structured Electrode components. Let's explore and personalize this in our next section, [Create an Electrode Component.](/chapter1/intermediate/create-a-electrode-component.md) diff --git a/docs/chapter1/intermediate/server-config.md b/docs/chapter1/intermediate/server-config.md index cc5eae581..01c252f2c 100644 --- a/docs/chapter1/intermediate/server-config.md +++ b/docs/chapter1/intermediate/server-config.md @@ -79,6 +79,6 @@ When all of our guests are invited to the House Party, our CSS modules kick in a Feel free to add your own personal touch and build out your Resource List House Party. You can compare your work to our [Heroku deployed example app](https://electrode-example-app.herokuapp.com/). -When you're ready, you can deploy Your Awesome App to [Heroku](https://devcenter.heroku.com/categories/deployment) by following the previous steps in our [Getting Started: Build More](../quick-start/build-app.md) section. If you choose this step, make sure you set all of the Heroku configurations, including the one for our [GitHub Api](./build-a-server-plugin.md). +When you're ready, you can deploy Your Awesome App to [Heroku](https://devcenter.heroku.com/categories/deployment) by following the previous steps in our [Getting Started: Build More](/chapter1/further-develop-app/build-app.md) section. If you choose this step, make sure you set all of the Heroku configurations, including the one for our [GitHub Api](./build-a-server-plugin.md). You can also navigate to [Intermediate: More Deployments](./more-deployments.md) to learn how to deploy with [Docker](./more-deployments/docker.md) and [Kubernetes](./more-deployments/kubernetes.md). diff --git a/docs/chapter1/intermediate/server-side-data-hydration.md b/docs/chapter1/intermediate/server-side-data-hydration.md index 71fa8d24c..907fbb972 100644 --- a/docs/chapter1/intermediate/server-side-data-hydration.md +++ b/docs/chapter1/intermediate/server-side-data-hydration.md @@ -1,6 +1,7 @@ # Server Side Data Hydration Server side rendering consists of two steps: + 1. Create the initial redux store data. 2. Call `ReactDOM.renderToString` with that data. diff --git a/docs/chapter1/quick-start/start-with-app.md b/docs/chapter1/quick-start/start-with-app.md index f6ab6330e..f3fb40fd3 100644 --- a/docs/chapter1/quick-start/start-with-app.md +++ b/docs/chapter1/quick-start/start-with-app.md @@ -102,4 +102,4 @@ electrode-app The generated application included a few demo components to show you how to use Redux, CSS Modules, and React JSX. Feel free to play with them and remove or replace them when you are ready to add your application. -To continue to build React components for your Electrode Application, see [Developing Your Electrode App.](../further-develop-app/build-app.md) +To continue to build React components for your Electrode Application, see [Building Your Electrode App.](../further-develop-app/build-app.md) diff --git a/packages/electrode-archetype-react-app-dev/lib/dev-admin/console-io.js b/packages/electrode-archetype-react-app-dev/lib/dev-admin/console-io.js index ce481e3cd..b2bdc9d6e 100644 --- a/packages/electrode-archetype-react-app-dev/lib/dev-admin/console-io.js +++ b/packages/electrode-archetype-react-app-dev/lib/dev-admin/console-io.js @@ -9,7 +9,9 @@ class ConsoleIO { setup() { readline.emitKeypressEvents(process.stdin); - process.stdin.setRawMode(true); + if (process.stdin.isTTY) { + process.stdin.setRawMode(true); + } } async getUserInput() { diff --git a/packages/electrode-archetype-react-app-dev/test/spec/generate-config.spec.js b/packages/electrode-archetype-react-app-dev/test/spec/generate-config.spec.js index 093a49d76..4c74b6338 100644 --- a/packages/electrode-archetype-react-app-dev/test/spec/generate-config.spec.js +++ b/packages/electrode-archetype-react-app-dev/test/spec/generate-config.spec.js @@ -7,18 +7,15 @@ const moduleName = "../../config/webpack/util/generate-config"; describe("generate-config", function() { this.timeout(10000); - before(() => { - }); + before(() => {}); - beforeEach(() => { - }); + beforeEach(() => {}); afterEach(() => { delete require.cache[require.resolve(moduleName)]; }); - after(() => { - }); + after(() => {}); describe("generateConfig", () => { it("If the configFilename is development.js and only webpack.config.development.js exists, fall back to archetype webpack", () => { @@ -27,25 +24,28 @@ describe("generate-config", function() { const defaultFilename = "webpack.config.development.js"; const defaultWebpackPath = Path.join(process.cwd(), defaultFilename); - const defaultWebpackContents = {test: 1}; + const defaultWebpackContents = { test: 1 }; mockRequire(defaultWebpackPath, defaultWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename); - const archWebpackContents = {test: 2}; + const archWebpackContents = { test: 2 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename: "development.js" }, - profileNames: [ "_base", "_production" ], - configFilename: "development.js" - }, true); + true + ); expect(config).to.deep.equal(archWebpackContents); @@ -59,25 +59,28 @@ describe("generate-config", function() { const defaultFilename = "webpack.config.dev.js"; const defaultWebpackPath = Path.join(process.cwd(), defaultFilename); - const defaultWebpackContents = {test: 3}; + const defaultWebpackContents = { test: 3 }; mockRequire(defaultWebpackPath, defaultWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename); - const archWebpackContents = {test: 4}; + const archWebpackContents = { test: 4 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename }, - profileNames: [ "_base", "_production" ], - configFilename - }, true); + true + ); expect(config).to.deep.equal(defaultWebpackContents); @@ -91,25 +94,28 @@ describe("generate-config", function() { const configFilename = "webpack.config.coverage.js"; const configWebpackPath = Path.join(process.cwd(), defaultFilename); - const configWebpackContents = {test: 5}; + const configWebpackContents = { test: 5 }; mockRequire(configWebpackPath, configWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename); - const archWebpackContents = {test: 6}; + const archWebpackContents = { test: 6 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename: defaultFilename }, - profileNames: [ "_base", "_production" ], - configFilename: "coverage.js" - }, true); + true + ); expect(config).to.deep.equal(archWebpackContents); @@ -123,25 +129,28 @@ describe("generate-config", function() { const defaultFilename = "webpack.config.coverage.js"; const configWebpackPath = Path.join(process.cwd(), defaultFilename); - const configWebpackContents = {test: 7}; + const configWebpackContents = { test: 7 }; mockRequire(configWebpackPath, configWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename); - const archWebpackContents = {test: 8}; + const archWebpackContents = { test: 8 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename }, - profileNames: [ "_base", "_production" ], - configFilename - }, true); + true + ); expect(config).to.deep.equal(configWebpackContents); @@ -155,25 +164,28 @@ describe("generate-config", function() { const archFilename = "webpack.config.js"; const configWebpackPath = Path.join(process.cwd(), configFilename); - const configWebpackContents = {test: 9}; + const configWebpackContents = { test: 9 }; mockRequire(configWebpackPath, configWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), archFilename); - const archWebpackContents = {test: 10}; + const archWebpackContents = { test: 10 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename }, - profileNames: [ "_base", "_production" ], - configFilename - }, true); + true + ); expect(config).to.deep.equal(archWebpackContents); @@ -188,25 +200,28 @@ describe("generate-config", function() { const defaultFilename = "webpack.config.production.js"; const configWebpackPath = Path.join(process.cwd(), defaultFilename); - const configWebpackContents = {test: 11}; + const configWebpackContents = { test: 11 }; mockRequire(configWebpackPath, configWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), archFilename); - const archWebpackContents = {test: 12}; + const archWebpackContents = { test: 12 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename }, - profileNames: [ "_base", "_production" ], - configFilename - }, true); + true + ); expect(config).to.deep.equal(archWebpackContents); @@ -220,25 +235,28 @@ describe("generate-config", function() { const defaultFilename = "webpack.config.js"; const configWebpackPath = Path.join(process.cwd(), defaultFilename); - const configWebpackContents = {test: 13}; + const configWebpackContents = { test: 13 }; mockRequire(configWebpackPath, configWebpackContents); const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename); - const archWebpackContents = {test: 14}; + const archWebpackContents = { test: 14 }; mockRequire(archWebpackPath, archWebpackContents); - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename }, - profileNames: [ "_base", "_production" ], - configFilename - }, true); + true + ); expect(config).to.deep.equal(configWebpackContents); @@ -250,18 +268,21 @@ describe("generate-config", function() { const { generateConfig } = require(moduleName); const configFilename = "production.js"; - const config = generateConfig({ - profiles: { - _base: { - partials: {} + const config = generateConfig( + { + profiles: { + _base: { + partials: {} + }, + _production: { + partials: {} + } }, - _production: { - partials: {} - } + profileNames: ["_base", "_production"], + configFilename }, - profileNames: [ "_base", "_production" ], - configFilename - }, true); + true + ); expect(config).to.deep.equal({}); });