Skip to content

Commit

Permalink
update all docs
Browse files Browse the repository at this point in the history
Fix #83
  • Loading branch information
ruddell committed Sep 10, 2019
1 parent 53d1d3e commit d00c24f
Show file tree
Hide file tree
Showing 13 changed files with 124 additions and 88 deletions.
46 changes: 26 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,34 @@

[![Logo](https://raw.githubusercontent.com/ruddell/ruddell.github.io/master/images/ignite-jhipster/logo-150h.png)](https://github.com/ruddell/ignite-jhipster)

A React Native boilerplate for [JHipster](http://www.jhipster.tech) apps, complete with authentication, an entity generator, E2E tests, and more.
A React Native boilerplate for [JHipster](http://www.jhipster.tech) apps, complete with authentication, an entity generator, JDL support, E2E tests, and more.

For a quick tour, check out the [Sample Application for Android](https://play.google.com/store/apps/details?id=com.jwtapp&hl=en), the [YouTube Demo](https://youtu.be/o46CwsJlL-I) or the [blog post](https://jruddell.com/blog/ignite-jhipster).

Uses the following libraries:
- [Ignite](https://github.com/infinitered/ignite) - Infinite Red's React Native app generator
- [React Native Navigation](https://github.com/wix/react-native-navigation) - A complete native navigation solution
- [Redux](https://redux.js.org/basics/usagewithreact) and [Sagas](https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html) - State management
- [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) - Icons from Ionicons, Font Awesome, and more
- [Detox](https://github.com/wix/Detox) - End-to-End Testing and Automation Framework for Mobile Apps

Check out the [Sample Application for Android](https://play.google.com/store/apps/details?id=com.jwtapp&hl=en) or the [presentation at JHipster Conf on Youtube](https://youtu.be/QZMAH2q6ViI).

## Docs
- [Getting Started](readme.md#getting-started)
- [App Config Variables](docs/config-variables.md)
- [Generators and Plugins](docs/generators-and-plugins.md)
- [Getting Started](README.md#getting-started)
- [Generators](docs/generators.md)
- [Project Structure](docs/project-structure.md)
- [OAuth2 OIDC Login](docs/oauth2-oidc.md)
- [Websockets](docs/websockets.md)
- [Upgrading Your Ignite JHipster App](docs/upgrading.md)
- JHipster Integrations
- [OAuth2 OIDC Login](docs/oauth2-oidc.md)
- [Websockets](docs/websockets.md)
- React Native Integrations
- [Storybook](docs/storybook.md) - Develop UI components in isolation
- [Fastlane](docs/fastlane.md) - Automate building and releasing your mobile apps
- [Detox](docs/detox.md) - End-to-End Testing and Automation Framework for Mobile Apps
- [React Native Navigation](https://github.com/wix/react-native-navigation) - A complete native navigation solution
- [Redux](https://redux.js.org/basics/usagewithreact) and [Sagas](https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html) - State management
- [Advanced Usage](docs/advanced-usage.md)

## Getting Started
#### Requirements
- Node v8+
- Verify version with `node -v`
- [React Native setup](https://facebook.github.io/react-native/docs/getting-started.html#content)
- [React Native CLI setup](https://facebook.github.io/react-native/docs/getting-started.html#content)
- [ignite-cli](https://github.com/infinitered/ignite) installed (>= v2.0.0)
- Install with `npm install -g ignite-cli`
- Verify version with `ignite --version`
- OAuth2 iOS apps require [Cocoapods](https://guides.cocoapods.org/using/getting-started.html) to be installed
- iOS apps require [Cocoapods](https://guides.cocoapods.org/using/getting-started.html) to be installed
- Not required but highly recommended, [Reactotron](https://github.com/infinitered/reactotron) makes debugging super simple and comes preconfigured

To generate an app, run the following command:
Expand All @@ -43,9 +40,18 @@ ignite new SampleApp --boilerplate ignite-jhipster

Answer the prompts, entering the path to your JHipster app and choosing any plugins you want. The generator will create a new directory containing the project (preconfigured for both iOS and Android).

After generating, you can use the [entity generator, JDL importer, and other commands](docs/generators-and-plugins.md).
After generating, you can use the [entity generator, JDL importer, and other commands](docs/generators.md).

#### Configuration

`app/config/app-config.js` contains several important variables:
- `apiUrl`: Your JHipster app's API url
- `appUrlScheme`: Your app's URL scheme for deep-linking, this is also configured for iOS (Info.plist) and Android (AndroidManifest.xml) separately.
- `uaaBaseUrl`: (UAA only) If you use a `uaaBasePath` other than `uaa`, configure this variable

**Note:** When running your JHipster backend locally for Android, make sure to run `adb reverse tcp:8080 tcp:8080` so the app can communicate with your backend.
**Notes for Android:**
- When running your JHipster backend locally for Android, make sure to run `adb reverse tcp:8080 tcp:8080` so the app can communicate with your backend.
- When building the Android app manually, prepend `app:` to the command (due to React Native Navigation). For example: `./gradlew app:bundleRelease`

[npm-image]: https://img.shields.io/npm/v/ignite-jhipster.svg
[npm-url]: https://npmjs.org/package/ignite-jhipster
Expand Down
21 changes: 3 additions & 18 deletions boilerplate/README.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,21 @@
# <%= props.name %>
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](http://standardjs.com/)

* Standard compliant React Native App Utilizing [Ignite](https://github.com/infinitered/ignite) and [Ignite Jhipster](https://github.com/ruddell/ignite-jhipster)
* React Native app generated with [Ignite Jhipster](https://github.com/ruddell/ignite-jhipster). See the Ignite JHipster docs for more details regarding this boilerplate.

## :arrow_up: How to Setup

**Step 1:** git clone this repo:

**Step 2:** cd to the cloned repo:

**Step 3:** Install the Application with `npm install`
**Step 3:** Install the Application with `<%= useNpm ? 'npm' : 'yarn' > install`


## :arrow_forward: How to Run App

1. cd to the repo
1. `cd` to the repo
2. Run Build for either OS
* for iOS
* run `react-native run-ios`
* for Android
* Run Genymotion
* run `react-native run-android`

## :no_entry_sign: Standard Compliant

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
This project adheres to Standard. Our CI enforces this, so we suggest you enable linting to keep your project compliant during development.

**Bypass Lint**

If you have to bypass lint for a special commit that you will come back and clean (pushing something to a branch etc.) then you can bypass git hooks with adding `--no-verify` to your commit command.

**Understanding Linting Errors**

The linting rules are from JS Standard and React-Standard. [Regular JS errors can be found with descriptions here](http://eslint.org/docs/rules/), while [React errors and descriptions can be found here](https://github.com/yannickcr/eslint-plugin-react).
3 changes: 3 additions & 0 deletions docs/advanced-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ You can pass flags for each of the options.
| Flag | Possible Values | Action |
| ------------------------ | ------------------------------ | ---------------------------------------------- |
| `--jh-dir` | backend, ../backend | The JHipster app's directory |
| `--jdl` | app.jdl | Pass a JDL file in place of an app directory |
| `--detox` | true, false | Enables Detox E2E tests |
| `--skip-git` | | Skips git init |
| `--skip-lint` | | Skips `standard` initialization (linting) |
Expand All @@ -20,3 +21,5 @@ You can pass a JDL file containing an application config (and optionally entitie
ignite new JhipsterApp -b --jdl=jwt-mono.jdl --detox=true --skip-git

This will generate the full React Native project and import any entities present in the JDL.

**Note:** Ignite JHipster only supports JDL files containing a single application config.
7 changes: 0 additions & 7 deletions docs/config-variables.md

This file was deleted.

21 changes: 21 additions & 0 deletions docs/detox.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
## Detox
- Currently, Detox only supports iOS/macOS and does not support tests requiring authentication for OAuth2 apps.

If enabled during generation, [Detox](https://github.com/wix/Detox) is configured for the project. Sample tests are available for the account screens, and are generated for entity screens when you add an entity. For example:

- [`e2e/settings-screen.spec.js`](https://github.com/ruddell/ignite-jhipster/blob/53d1d3e9cd5bd4fbba5ca8b20d7334a9b7ad24f4/boilerplate/e2e/settings-screen.spec.js)
- [`e2e/login-screen.spec.js`](https://github.com/ruddell/ignite-jhipster/blob/master/boilerplate/e2e/login-screen.spec.js)

To run the tests, you need to build the app for debug or release:
```bash
detox build --configuration ios.sim.debug
detox build --configuration ios.sim.release
```
Then run the tests using the same configuration from above:
```bash
detox test --configuration ios.sim.debug --reuse
detox test --configuration ios.sim.release --reuse
```

For more information on configuration and writing tests for Detox, check the [official Detox documentation](https://github.com/wix/Detox/blob/master/docs/README.md).

32 changes: 32 additions & 0 deletions docs/fastlane.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
## Fastlane
- Currently, fastlane is officially supported to run on macOS.

[Fastlane](https://github.com/fastlane/fastlane) automates building and releasing your mobile apps. It can handle all tedious tasks, like generating screenshots, dealing with code signing, and releasing your application.

The Fastlane files are generated under the `fastlane` folder at the root of the project. When running Fastlane, the outcome depends on the platform:
- For iOS, provisioning profiles are checked/updated, the app is built, signed with release keys, uploaded to Testflight, and released to beta testers.
- For Android, the app is built, signed with release keys, uploaded to Google Play, and released to a beta track.

### Fastlane Config
#### Appfile
Contains information identifying your app.

#### Fastfile
Fastlane uses a "lane" concept, which is basically a function. A lane contains logic for building and uploading your app to the app stores. The generated Fastfile contains two lanes, one for each platform (iOS and Android).

#### Matchfile
Used for [Fastlane Match](https://docs.fastlane.tools/actions/match/), which shares one code signing identity across your development team to simplify your codesigning setup and prevent code signing issues.


### Running Fastlane
To run the iOS lane:
```bash
fastlane ios build
```
To run the Android lane:
```bash
fastlane android build
```
- **Note**: You must upload the first AAB/APK file to Google Play manually before using Fastlane.

For more information on configuration for Fastlane, check the [official Fastlane documentation](https://docs.fastlane.tools/).
26 changes: 0 additions & 26 deletions docs/generators-and-plugins.md

This file was deleted.

20 changes: 20 additions & 0 deletions docs/generators.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
### Generators

#### Entity

`ignite generate entity <name>`
- Prompts for the path to the entity's config (`.jhipster` folder in your app)
- Generates all files needed for fetching and displaying the entity
- Includes the API endpoints, redux/saga config, and the user interface

#### Import JDL
`ignite generate import-jdl <jdl-filename>`
- Import several entities at once using JDL
- Runs the entity generator for each entity present in the JDL

#### Upgrade
`ignite generate upgrade`
- Upgrades your generated app to the latest template code. Make sure to upgrade `ignite-jhipster` in your `package.json` first.
- It's recommended to use `git` and branches to merge changes into your code.
- The command below will keep all of your changes while merging any updates. If there are conflicts, you will need to manually merge the changes.
- `git merge -s recursive -Xours <branch name>`
11 changes: 4 additions & 7 deletions docs/oauth2-oidc.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
## OAuth2 OIDC

**Note:** When running the backend locally for Android, make sure to run `adb reverse tcp:8080 tcp:8080` so the app can communicate with your backend. Also run `adb reverse tcp:9080 tcp:9080` to enable connections to Keycloak on `localhost`
### Native iOS Library Setup
For a full walkthrough of generating and configuring OAuth2 with Ignite JHipster, check out Matt Raible's post ["Build a Mobile App with React Native and Spring Boot"](https://developer.okta.com/blog/2018/10/10/react-native-spring-boot-mobile-app) or [Youtube video](https://www.youtube.com/watch?v=h7QcSe-LYZg) of the same.

Cocoapods is the usual choice for setting up the native iOS libraries needed for OAuth2 support. If you didn't have Cocoapods installed before generating your app, [install it](https://guides.cocoapods.org/using/getting-started.html), then run `pod install` from the `ios` directory. Note that you open the `xcworkspace` file rather than the `xcproject` file when using Cocoapods.

If you don't want to use Cocoapods, follow one of the [other setup instructions for react-native-app-auth](https://github.com/FormidableLabs/react-native-app-auth#ios-setup) and delete the `ios/Podfile` file.

### Backend Generated Files

Ignite JHipster generates several files in your JHipster backend's folder. See the changes in your JHipster app.
- `src/main/docker/realm-config/jhipster-realm.json`
- Adds your app's url scheme as an authorized redirect URI for the Keycloak docker container
Expand All @@ -21,8 +16,10 @@ The app's URL scheme is declared in AppConfig, build.gradle, AndroidManifest.xml
Add the URL scheme from above as a valid redirect URI, followed by the word "authorize". For example, if your URL scheme is `oauth-app` then the redirect URI
should look like `oauth-app://authorize`. This is patched in JHipster's Keycloak docker config so you may need to restart the docker container.

### Okta
### Keycloak
When running the backend locally for Android, make sure to run `adb reverse tcp:8080 tcp:8080 && adb reverse tcp:9080 tcp:9080` so the app can communicate with both Keycloak and your backend.

### Okta
To use Okta with the AppAuth library, you will need to create a new Native application in Okta's dashboard. Make sure PKCE support is enabled, then modify `app/modules/login/login.sagas.js` to use the new client ID:

```javascript
Expand Down
2 changes: 1 addition & 1 deletion docs/project-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,4 @@ Contains sample Jest snapshot and unit tests for your application.

### storybook

[Storybook](https://storybook.js.org/) has been setup to show off components in the different states. Storybook is a great way to develop and test components outside of use in your app. Install your app on a device or emulator, exit the React Native packager, and run run `npm run storybook` to get started. All stores are contained in the `*.story.js` files along side the components.
[Storybook](https://storybook.js.org/) has been setup to show off components in the different states. Storybook is a great way to develop and test components outside of use in your app. View the Storybook when running on an emulator or local device via the "Storybook" option in the Side Menu. All stores are contained in the `*.story.js` files along side the components.
13 changes: 13 additions & 0 deletions docs/storybook.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
## Storybook
Storybook for React Native is configured out-of-the-box in DEV builds only (local device or simulator). You can access it in the Side Menu by clicking on "Storybook".

### Stories
Sample "stories" are available for the generated components. They allow you to preview the components in various states, dependant on the props passed to them.

- [`search-bar.story.js`](https://github.com/ruddell/ignite-jhipster/blob/53d1d3e9cd5bd4fbba5ca8b20d7334a9b7ad24f4/boilerplate/app/shared/components/search-bar/search-bar.story.js)
- [`alert-message.story.js`](https://github.com/ruddell/ignite-jhipster/blob/master/boilerplate/app/shared/components/alert-message/alert-message.story.js)

Use fixtures (JSON files containing sample data) to write stories for your own components.

For more information on configuration and writing stories for Storybook, check the [official Storybook documentation](https://storybook.js.org/docs/guides/guide-react-native/).

9 changes: 0 additions & 9 deletions docs/upgrading.md

This file was deleted.

1 change: 1 addition & 0 deletions src/boilerplate/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ async function install (context) {

props.skipGit = parameters.options['skip-git']
props.skipLint = parameters.options['skip-lint']
props.useNpm = useNpm

// very hacky but correctly handles both strings and booleans and converts to boolean
props.detox = JSON.parse(props.detox)
Expand Down

0 comments on commit d00c24f

Please sign in to comment.