JHipster React Native

A React Native blueprint for JHipster apps, complete with authentication, an entity generator, JDL support, E2E tests, and more.

Check out the blog post or YouTube video for a full demo of JHipster React Native.

Docs

• Getting Started
• Generators
• Project Structure
• Distributing and Updating Apps
• CLI Flags
• JHipster Integrations
  • OAuth 2.0 and OpenID Connect
  • Websockets
• React Native Library Integrations
  • Expo - A framework and platform for universal React application
  • React Native Web - Run your React Native application in a browser, including PWA support
  • Storybook - Develop UI components in isolation
  • Detox - End-to-End Testing and Automation Framework for Mobile Apps
  • React Navigation - Routing and navigation for your React Native apps
  • Redux and Sagas - State management

Getting Started

Requirements

• Node LTS v14+
  • Verify version with node -v
• generator-jhipster-react-native installed
  • Install with npm install -g generator-jhipster-react-native
• expo-cli installed
  • Install with npm install -g expo-cli
  • To run your app on an emulator instead of a device, follow the platform-specific instructions:
    • Android
    • iOS
• JHipster backend must use JWT or OAuth2 auth types.

Create a directory for your app:

mkdir SampleApp && cd SampleApp

To generate an app, run the following command:

# JHipster v6.x+
rnhipster

# JHipster v7+
jhipster --blueprints react-native

# JHipster v7+ JDL Application
jhipster --blueprints react-native jdl ./path-to-your-app-config.jdl

Answer the prompts:

• Enter the path to your JHipster app
• Choose whether to enable E2E Detox Tests

After generating, you can import entities with the entity generator and JDL importer.

Configuration

• app/config/app-config.js contains your JHipster API URL (default: http://localhost:8080/)

CORS

• In dev, for the Web build, add http://localhost:19006 as an allowed origin in the backend CORS config.
• In production, you will need to enable CORS for your deployment domain.

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.

License

Apache-2.0 © Jon Ruddell