# electrode-archetype-react-app-sync-internal-jmcriffey

> Electrode NodeJS/React Universal Application Archetype

Latest version **0.0.1** (published 2016-12-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install electrode-archetype-react-app-sync-internal-jmcriffey
pnpm add electrode-archetype-react-app-sync-internal-jmcriffey
yarn add electrode-archetype-react-app-sync-internal-jmcriffey
bun add electrode-archetype-react-app-sync-internal-jmcriffey
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2016-12-20 |
| First published | 2016-12-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^4.4.6 \|\| ^6.2.1 |
| Dependencies | 15 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 127 |
| Maintainers | jmcriffey |

## Links

- npm: https://www.npmjs.com/package/electrode-archetype-react-app-sync-internal-jmcriffey
- Repository: https://github.com/electrode-io/electrode-archetype-react-app
- Issues: https://github.com/electrode-io/electrode-archetype-react-app/issues
- npm.io page: https://npm.io/package/electrode-archetype-react-app-sync-internal-jmcriffey

## Dependencies (15)

- [babel-core](https://npm.io/package/babel-core.md) ^6.4.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) 6.5.0
- [babel-register](https://npm.io/package/babel-register.md) ^6.14.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.3.13
- [babel-plugin-lodash](https://npm.io/package/babel-plugin-lodash.md) ^3.1.3
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.3.13
- [babel-plugin-react-intl](https://npm.io/package/babel-plugin-react-intl.md) ^2.1.2
- [css-modules-require-hook](https://npm.io/package/css-modules-require-hook.md) ^4.0.2
- [babel-preset-es2015-loose](https://npm.io/package/babel-preset-es2015-loose.md) ^7.0.0
- [babel-plugin-i18n-id-hashing](https://npm.io/package/babel-plugin-i18n-id-hashing.md) ^2.1.0
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.8.0
- [babel-plugin-transform-node-env-inline](https://npm.io/package/babel-plugin-transform-node-env-inline.md) ^6.5.0
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.3.13
- [babel-plugin-transform-react-inline-elements](https://npm.io/package/babel-plugin-transform-react-inline-elements.md) ^6.6.5
- [babel-plugin-transform-react-constant-elements](https://npm.io/package/babel-plugin-transform-react-constant-elements.md) ^6.5.0

## Recent versions

- 0.0.1 (latest) — 2016-12-20

## README

# Archetype: Electrode React ~~Isomorphic~~ Universal App

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]

A Walmart Labs flavored React Universal App archetype.

## tl;dr

#### What is this for?

This "app archetype" provides for common patterns across all app projects so that each app project can standardize on common development behavior and patterns. Its essentially pre-made patterns for build scripts.

#### How do I start developing in my application project after installing?

```bash
# This runs both the node server and webpack (in hot mode)
$ gulp hot

# Also try `dev` mode when running off battery power and you wish to maximize battery life.
$ gulp dev
```

#### What is `hot mode`?

`Hot mode` enables Hot module reloading(HMR), it is where webpack transpiles your javascript and css code and continues to watch for any changes, and, builds and loads only the code that has changed on disk. It allows you to develop without re-loading your browser page as the changes will be automagically piped in.

#### How do I run my application tests?

```bash
# This will run test eslint and your spec tests
$ gulp check
```

#### How do I run my application tests without going through eslint (i.e., while I'm developing)?

```bash
# This will run only your spec tests
$ gulp test-dev
```

#### Why can't my test and code changes get automatically run with the tests?  Why do the tests take so long to start?

```bash
# This will start a webpack-dev-server to hot watch your code and also start a karma test browser that auto-reruns when specs or client code changes.
$ gulp test-watch-all
```

#### How do I use and/or view the final build files without minifying/uglifying but also with sourcemaps?

```bash
# This will build your code and save to disk, and then start a node server (without using webpack-dev-server).
$ gulp dev-static
```

#### Is there anything else that might be nice for my development?

```bash
# This will start the node server in debug mode so that you can place breakpoints, "debugger" statements, or use `node-inspector`.
$ gulp debug
```

#### How do I view my test result in the browser?

Run either of the below commands before opening the link.

```
gulp server-test
gulp dev # (OR) (which includes `server-test`)
gulp hot # (OR) (which includes `server-test`)
```
This will serve the static assets for test.html

open [test.html]((http://localhost:3001/node_modules/electrode-archetype-react-app/config/browser_test/test.html)) to view test result.

#### How do I generate a manifest.json and a service-worker file?
First we need to add a `sw-config.js` file under the app's `config` folder.

This file contains two sections:
##### 1. Manifest
  ```
manifest: {
  logo: "./images/icon.png",
  title: "Electrode Progressive App",
  short_name: "EPA",
  start_url: "/"
}
  ```
  Manifest gives you control over how your web app is installed on user's home screen with `short_name, title and logo` properties. You can also specify a starting path to launch your app with `start_url` property. Manifest defines how your app appears to the user and more importantly how they can launch it.
##### 2. Cache
```
cache: {
  runtimeCaching: [{
    handler: "fastest",
    urlPattern: /\/home$/
  }, {
    handler: "networkFirst",
    urlPattern: /getBeer/
  }],
  staticFileGlobs: ['dist/**/*']
}
```
  Seamlessly cache your static assets or run time routes or cache them together!
  Precache your static assets generated by webpack using the `staticFileGlobs` property. Or use the `runtimeCaching` property to cache specific react routes in from your `routes.jsx`.

Once this file is added, running
```
gulp build
```
will generate a `manifest.json` file inside of `dist/js/icons-[hash]` and a service worker file `dist/sw.js`.

`Service Worker` file is generated during the build step and it will precache all the static resources as per the configuration in `sw-config.js`.
Using `AboveTheFoldOnlyServerRender` you can avoid caching of certain components inside the crucial pages of your app to make your _App shell_ even lighter.
```
<AboveTheFoldOnlyServerRender skip={true}>
  <div>
    this will not be a part of your app shell
  </div>
</AboveTheFoldOnlyServerRender>
```

AboveTheFoldOnlyServerRender [example](https://github.com/docs-code-examples-electrode-io/electrode-progressive-beer/blob/master/client/components/home.jsx#L69-L83)
Sample [config.js](https://github.com/electrode-io/electrode-boilerplate-universal-react-node/blob/master/config/sw-config.js)
More on [PWA](https://developers.google.com/web/progressive-web-apps/)

## Installation

We use [gulp] as a task invoker.  You should install it globally.

```bash
$ sudo npm install -g gulp
```

###### run the following in your project
```bash
$ npm install --save-dev gulp electrode-archetype-react-app electrode-archetype-react-app-dev
```

###### Add a `gulpfile.js`
The `gulpfile.js` should contain the following and be located in the root of your project

```js
require("electrode-archetype-react-app")();
```

###### Add a `.babelrc` to your project
The `.babelrc` needs to extend
[the archetype's babel configuration](config/babel/.babelrc) in order to apply the presents (ES2015, React) and the plugins like i18n. If your project needs additional Babel settings (like using stage 0 features) you can add them to this file. See the [Babel docs](https://babeljs.io/docs/usage/babelrc/) for more information.

```json
{
  "extends": "./node_modules/electrode-archetype-react-app/config/babel/.babelrc"
}
```

###### Use `babel-core/register` in your server entry point

If you don't have a build step for your server code, then you must transpile
on the fly using `babel-register`. For performance reasons, we recommend
whitelisting the `react` module to be transpiled as well, so that the
`transform-node-env-inline` plugin gets applied to the React codebase:

```js
require("babel-core/register")({
  ignore: /node_modules\/(?!react\/)/
});
```

###### Use the `cssModuleHook` in your server entry point for isomorphic CSS modules

If you want to enable isomorphic css modules, the server needs to know how to import css files
and generate unique class names.
The archetype can handle this for you using the `supports` module. In your server entry point:

```js
var supports = require("electrode-archetype-react-app/supports");

supports.cssModuleHook();
```

###### Define client entry points

By default, the archetype uses `client/app.js` or `client/app.jsx` as a client entry point. Alternatively,
you can define multiple entry points for your application, so the Webpack will create bundles for each app
entry point. To do that, place `entry.config.js` module into your app's `client` directory:

Here is an **example** of `entry.config.js`:
```js
module.exports = {
  "web": "./app-web.js",
  "ios": "./app-ios.js",
  "android": "./app-android.js"
};
```

## Tasks

Run `gulp` to see list of tasks.

Built with :heart: by [Team Electrode](https://github.com/orgs/electrode-io/people) @WalmartLabs.

[npm-image]: https://badge.fury.io/js/electrode-archetype-react-app.svg
[npm-url]: https://npmjs.org/package/electrode-archetype-react-app
[travis-image]: https://travis-ci.org/electrode-io/electrode-archetype-react-app.svg?branch=master
[travis-url]: https://travis-ci.org/electrode-io/electrode-archetype-react-app
[daviddm-image]: https://david-dm.org/electrode-io/electrode-archetype-react-app.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/electrode-io/electrode-archetype-react-app

---
_Source: https://npm.io/package/electrode-archetype-react-app-sync-internal-jmcriffey · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._